Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Взаимодействието с PostgreSQL база данни или друга база данни директно увеличава количеството SQL, което пишете. Това може да доведе до проблеми със сигурността, като например атаки чрез SQL инжектиране, и ограничава преносимостта на вашата база данни. Препоръчително е да използвате ORM (Object Relation Mapper) като Prisma, който предоставя абстракционен слой върху вашата база данни.

Научете как да използвате Prisma в Next.js за свързване и взаимодействие с база данни на PostgreSQL.

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

Преди да създадете приложение Next.js, уверете се, че имате Възел и npm са инсталирани във вашата среда за разработка.

Създайте приложение Next.js, наречено prisma-next, като изпълните тази команда във вашия терминал:

npx create-next-app prisma-next

Това ще създаде нова директория, наречена prisma-next, с основни файлове, за да започнете.

instagram viewer

Отидете до директорията prisma-next и стартирайте сървъра за разработка, като използвате тази команда:

npm стартиране dev

Това стартира сървър за разработка на http://localhost: 3000.

Това са основните стъпки за създаване на ново приложение Next.js. Можете да научите повече за функциите на Next.js, като се обърнете към тази статия защо да мигрирам към Next.js.

Инсталиране на Prisma Client

За да започнете да използвате Призма, ще ви трябват пакетите prisma и @prisma/client. prisma е инструментът Prisma CLI, докато @prisma/client е автоматично генериран конструктор на заявки, който ще ви помогне да правите заявки към вашата база данни.

Инсталирайте тези два пакета чрез npm.

npm инсталирайте prisma @prisma/клиент

След това инициализирайте Prisma, като изпълните командата npx prisma init на терминала.

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

Това ще генерира нов файл, наречен схема.призма който съдържа схемата на базата данни и a .env файл, към който ще добавите URL адреса за връзка с базата данни.

Добавяне на URL адрес за връзка

Имате нужда от URL адрес за връзка, за да свържете Prisma към вашия PostgreSQL база данни. Общият формат за URL адрес за връзка е следният:

postgres://{потребителско име}:{парола}@{име на хост}:{порт}/{име-база-данни}

Заменете елементите във къдрави скоби с подробности за собствената си база данни, след което я запазете във файла .env:

DATABASE_URL = ”вашият низ за връзка”

След това в schema.prisma посочете URL адреса за връзка с базата данни:

източник на данни db {
 доставчик = "PostgreSQL"
 url = env("DATABASE_URL")
}

Дефиниране на схемата на базата данни

Схемата на базата данни е структура, която дефинира модела на данни на вашата база данни. Той определя таблиците, колоните и връзките между таблиците в базата данни, както и всички ограничения и индекси, които базата данни трябва да използва.

За да създадете схема за база данни с таблица потребители, отворете файла schema.prisma и добавете потребителски модел.

модел потребител {
 id String @default (cuid()) @id
 име String?
 имейл String @unique
}

Потребителският модел има колона за id, която е първичният ключ, колона за име от тип низ и колона за имейл, която трябва да бъде уникална.

След като дефинирате модела на данни, трябва да разположите вашата схема в базата данни, като използвате npx призма dbтласък команда.

npx prizma db натискане

Тази команда създава действителните таблици в базата данни.

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

За да използвате Prisma в Next.js, трябва да създадете екземпляр на Prisma клиент.

Първо, генерирайте Prisma клиента.

генериране на npx призма

След това създайте нова папка, наречена lib, и добавете нов файл с име prisma.js в нея. В този файл добавете следния код, за да създадете екземпляр на Prisma клиент.

импортиране { PrismaClient } от"@prisma/клиент";
позволявам призма;
ако (типпрозорец"недефиниран") {
ако (process.env. NODE_ENV "производство") {
 призма = нов PrismaClient();
 } друго {
ако (!global.prisma) {
 global.prisma = нов PrismaClient();
 }


 призма = global.prisma;
 }
}
износпо подразбиране призма;

Сега можете да импортирате Prisma клиента като „prisma“ във вашите файлове и да започнете да правите заявки в базата данни.

Запитване до базата данни в маршрут на API на Next.js

Prisma обикновено се използва от страната на сървъра, където може безопасно да взаимодейства с вашата база данни. В приложение Next.js можете да настроите API маршрут, който използва Prisma за извличане на данни от базата данни и връщането им на клиента. След това страниците или компонентите могат да извличат данни от маршрута на API с помощта на HTTP библиотека като Axios или fetch.

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

импортиране призма от"@/lib/prisma";
износпо подразбиранеасинхроненфункцияманипулатор(req, res) {
конст { име, имейл } = req.query;


опитвам {
конст newUer = изчакайте призма. User.create({
 данни: {
 име,
 електронна поща,
 },
 });
 res.json({ потребител: нов, грешка: нула });
 } улов (грешка) {
 res.json({ грешка: съобщение за грешка, потребител: нула });
 }
}

Тази функция получава името и имейла от тялото на заявката. След това в блока try/catch той използва метода за създаване, предоставен от Prisma Client, за да създаде нов потребител. Функцията връща JSON обект, съдържащ потребителя и съобщението за грешка, ако има такова.

В един от вашите компоненти вече можете да направите заявка към този API маршрут. За да демонстрирате, създайте нова папка с име profile в директорията на приложението и добавете нов файл с име page.js. След това добавете прост формуляр, съдържащ две полета за въвеждане на име и имейл и бутон за изпращане.

Във формуляра добавете събитие при изпращане, което извиква функция, наречена handleSubmit. Формата трябва да изглежда така:

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


конст handleSubmit = асинхронен (e) => {
 e.preventDefault();
 };


връщане (




 тип={текст}
 заместител =„Добавяне на име“
 стойност={име}
 onChange={setname((д) => e.target.value)}
 />


 тип={текст}
 заместител =„Добавяне на имейл“
 стойност={имейл}
 onChange={setemail((д) => e.target.value)}
 />

Във функцията handleSubmit използвайте метода fetch, за да направите заявка към маршрута /api/db/createuser.

конст handleSubmit = асинхронен (e) => {
 e.preventDefault();
конст потребител = изчакайте извличане ("/api/db/createuser", {
 Тип съдържание: "приложение/json",
 тяло: JSON.stringify({ име, имейл }),
 });
};

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

Правете повече с Prisma

Можете да използвате Prisma, за да се свържете и да направите заявка към PostgreSQL база данни от приложение Next.js.

Освен добавяне на нови записи към базата данни, можете да изпълнявате и други SQL команди. Например, можете да изтриете редове, да изберете редове въз основа на конкретни условия и дори да актуализирате съществуващи данни, съхранени в базата данни.