Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Взаимодействие с базой данных PostgreSQL или любой другой базой данных напрямую увеличивает объем написанного вами SQL. Это может привести к проблемам безопасности, таким как атаки с внедрением SQL, и ограничить переносимость вашей базы данных. Рекомендуется использовать ORM (сопоставитель отношений объектов), такой как Prisma, который обеспечивает уровень абстракции поверх вашей базы данных.

Узнайте, как использовать Prisma в Next.js для подключения и взаимодействия с базой данных PostgreSQL.

Создание приложения Next.js

Перед созданием приложения Next.js убедитесь, что у вас есть Узел и npm установлены в вашей среде разработки.

Создайте приложение Next.js с именем prisma-next, выполнив эту команду в своем терминале:

npx создать-следующее-приложение prisma-следующее

Это создаст новый каталог с именем prisma-next с основными файлами для начала работы.

instagram viewer

Перейдите в каталог prisma-next и запустите сервер разработки с помощью этой команды:

нпм запустить разработчик

Это запускает сервер разработки в http://localhost: 3000.

Это основные шаги для создания нового приложения Next.js. Вы можете узнать больше о функциях Next.js, обратившись к этой статье на зачем переходить на Next.js.

Установка клиента Prisma

Чтобы начать использовать Призма, вам понадобятся пакеты prisma и @prisma/client. prisma — это инструмент Prisma CLI, а @prisma/client — это автоматически сгенерированный конструктор запросов, который поможет вам выполнить запрос к базе данных.

Установите эти два пакета через npm.

npm установить призму @prisma/client

Затем инициализируйте prisma, выполнив команду npx prisma init на терминале.

инициализация призмы npx

Это создаст новый файл с именем схема.призма который содержит схему базы данных и .env файл, в который вы добавите URL-адрес подключения к базе данных.

Добавление URL-адреса подключения

Вам нужен URL-адрес подключения, чтобы подключить prisma к вашему База данных PostgreSQL. Общий формат URL-адреса подключения таков:

postgres://{имя пользователя}:{пароль}@{имя хоста}:{порт}/{имя базы данных}

Замените элементы в фигурных скобках данными вашей собственной базы данных, а затем сохраните их в файле .env:

DATABASE_URL = «ваша строка подключения»

Затем в schema.prisma укажите URL подключения к базе данных:

источник данных БД {
 провайдер = "PostgreSQL"
 url = env("URL_БАЗА_ДАННЫХ")
}

Определение схемы базы данных

Схема базы данных — это структура, которая определяет модель данных вашей базы данных. Он определяет таблицы, столбцы и отношения между таблицами в базе данных, а также любые ограничения и индексы, которые должна использовать база данных.

Чтобы создать схему для базы данных с таблицей пользователей, откройте файл schema.prisma и добавьте модель пользователя.

модель Пользователь {
 id Строка @default (cuid()) @id
 имя Строка?
 Строка электронной почты @unique
}

Модель User имеет столбец идентификатора, который является первичным ключом, столбец имени строкового типа и столбец электронной почты, который должен быть уникальным.

После определения модели данных вам необходимо развернуть схему в базе данных с помощью npx призма дбтолкать команда.

npx prisma db push

Эта команда создает фактические таблицы в базе данных.

Использование Prisma в Next.js

Чтобы использовать Prisma в Next.js, вам необходимо создать экземпляр клиента prisma.

Сначала создайте клиент Prisma.

генерация призмы npx

Затем создайте новую папку с именем lib и добавьте в нее новый файл с именем prisma.js. В этот файл добавьте следующий код для создания экземпляра клиента prisma.

Импортировать { ПризмаКлиент } от"@призма/клиент";
позволять призма;
если (типокно"неопределенный") {
если (процесс.env. NODE_ENV "производство") {
 призма = новый ПризмаКлиент();
 } еще {
если (!global.prisma) {
 глобальная.призма = новый ПризмаКлиент();
 }


 призма = глобальная.призма;
 }
}
экспортпо умолчанию призма;

Теперь вы можете импортировать клиент prisma как «prisma» в свои файлы и начать запрашивать базу данных.

Запрос к базе данных в маршруте API Next.js

Prisma обычно используется на стороне сервера, где она может безопасно взаимодействовать с вашей базой данных. В приложении Next.js вы можете настроить маршрут API, который использует Prisma для извлечения данных из базы данных и возврата их клиенту. Затем страницы или компоненты могут извлекать данные из маршрута API, используя HTTP-библиотека, такая как Axios или fetch.

Создайте маршрут API, открыв папку pages/api и создав новую подпапку с именем db. В этой папке создайте файл с именем createuser.js и добавьте следующую функцию обработчика.

Импортировать призма от"@/библиотека/призма";
экспортпо умолчаниюасинхронныйфункцияобработчик(запрос, разрешение) {
константа {имя, электронная почта} = req.query;


пытаться {
константа новыйУэр = Ждите призма. Пользователь.создать({
 данные: {
 имя,
 электронная почта,
 },
 });
 res.json({ пользователь: новенький, ошибка: нулевой });
 } ловить (ошибка) {
 res.json({ ошибка: сообщение об ошибке, пользователь: нулевой });
 }
}

Эта функция получает имя и адрес электронной почты из тела запроса. Затем в блоке try/catch он использует метод create, предоставляемый клиентом Prisma, для создания нового пользователя. Функция возвращает объект JSON, содержащий пользователя и сообщение об ошибке, если таковое имеется.

В одном из ваших компонентов теперь вы можете сделать запрос к этому маршруту API. Для демонстрации создайте новую папку с именем profile в каталоге приложения и добавьте новый файл с именем page.js. Затем добавьте простую форму, содержащую два поля ввода для имени и адреса электронной почты и кнопку отправки.

Добавьте в форму событие отправки, которое вызывает функцию с именем handleSubmit. Форма должна выглядеть так:

"использовать клиент";
Импортировать Реагировать, {useState} от"реагировать";
экспортпо умолчаниюфункцияСтраница() {
константа [имя, имя набора] = useState("");
константа [электронная почта, адрес электронной почты] = useState("");


константа обработатьОтправить = асинхронный (е) => {
 e.preventDefault();
 };


возвращаться (




 тип = {текст}
 заполнитель ="Добавить имя"
 значение = {имя}
 onChange={имя набора((е) => e.target.value)}
 />


 тип = {текст}
 заполнитель ="Добавить электронную почту"
 значение = {электронная почта}
 onChange={setemail((е) => e.target.value)}
 />

В функции handleSubmit используйте метод fetch, чтобы сделать запрос к маршруту /api/db/createuser.

константа обработатьОтправить = асинхронный (е) => {
 e.preventDefault();
константа пользователь = Ждите принести("/API/БД/создать пользователя", {
 Тип содержимого: "приложение/json",
 тело: JSON.stringify({имя, электронная почта}),
 });
};

Теперь, когда форма будет отправлена, Prisma создаст новую запись пользователя в таблице User.

Делайте больше с Prisma

Вы можете использовать Prisma для подключения и запроса базы данных PostgreSQL из приложения Next.js.

Помимо добавления новых записей в базу данных, вы также можете запускать другие команды SQL. Например, вы можете удалять строки, выбирать строки на основе определенных условий и даже обновлять существующие данные, хранящиеся в базе данных.