Открийте силата на Mongoose и как можете да го използвате за управление на данни за просто уеб приложение.

Next.js е гъвкава JavaScript рамка с пълен стек, която е изградена върху React, поддържайки основните му функции като JSX, компоненти и кукички. Някои от основните функции на Next.js включват базирано на файлове маршрутизиране, CSS в JS и изобразяване от страна на сървъра.

Една важна способност на Next.js е способността му да се интегрира безпроблемно с различни бекенд технологии като Mongoose, което ви позволява лесно да управлявате данните ефективно.

С Mongoose можете лесно да дефинирате производителен REST API от приложение Next.js за съхраняване и извличане на данни от база данни MongoDB.

Next.js: JavaScript рамка с пълен стек

За разлика от React, Next.js се счита за уеб рамка с пълен стек, тъй като предоставя цялостно решение за изграждане на рендирани уеб приложения от страна на сървъра.

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

instagram viewer

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

Някои от основните функции, които дават на Next.js неговите възможности за пълен стек, включват:

  • Изобразяване от страна на сървъра: Next.js предоставя вградена поддръжка за възможности за изобразяване от страна на сървъра. По същество това означава, че след като клиент изпрати HTTP заявки до сървър, сървърът обработва заявките и отговаря с необходимото HTML съдържание за всяка страница, която да бъде изобразена в браузъра.
  • Маршрутизиране: Next.js използва система за маршрутизиране, базирана на страници, за да дефинира и управлява различни маршрути, да обработва потребителски входове и да създава динамични страници, без да се налага да разчита на библиотеки на трети страни. Освен това е лесно да се мащабира, тъй като добавянето на нови маршрути е толкова просто, колкото добавянето на нова страница, като about.js, към директорията на страниците.
  • API крайни точки: Next.js предоставя вградена поддръжка за възможности от страна на сървъра, които се използват за създаване на API крайни точки, които управляват HTTP заявки и връщат данни. Това улеснява изграждането на бекенд функционалност, без да се налага да настройвате отделен сървър, като използвате специална бекенд рамка като Express. Въпреки това е важно да се отбележи, че Next.js е предимно уеб рамка отпред.

Настройте база данни MongoDB

За да започнете, настройте база данни MongoDB. Като алтернатива можете бързо да завъртите база данни MongoDB чрез конфигуриране на MongoDB клъстер в облака безплатно. След като стартирате базата си данни, копирайте URI низа за връзка с базата данни.

Можете да намерите кода на този проект тук GitHub хранилище.

Настройте проект Next.js

Създайте директория за нов проект и cd в него:

mkdir nextjs-проект
cd nextjs-проект

След това инсталирайте Next.js:

npx create-next-app nextjs-mongodb

След като инсталационният процес приключи, инсталирайте Mongoose като зависимост.

npm инсталирайте mongoose

Накрая, в главната директория на вашия проект, създайте нов .env файл, който да съдържа низа за връзка с вашата база данни.

NEXT_PUBLIC_MONGO_URI = "низ за връзка с URI на базата данни"

Конфигурирайте връзката към базата данни

В src директория, създайте нова папка и я наименувайте помощни средства. В тази папка създайте нов файл, наречен dbConfig.js и добавете следния код към него:

импортиране мангуста от"мангуста";
конст свържете Монго = асинхронен () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
износпо подразбиране connectMongo;

Дефинирайте моделите на данни

Моделите на данни дефинират структурата на данните, които ще се съхраняват, включително типовете данни и връзките между данните.

MongoDB съхранява данни в документи, подобни на JSON, тъй като е a NoSQL база данни. Mongoose предоставя начин да се определи как данните от клиентите на Next.js трябва да се съхраняват и да се осъществява достъп от базата данни.

В директорията src създайте нова папка и име в модели. В тази папка създайте нов файл, наречен userModel.js, и добавете кода по-долу:

импортиране { Схема, модел, модели } от"мангуста";
конст потребителска схема = нов Схема ({
 име: низ,
 електронна поща: {
 Тип: низ,
 задължително: вярно,
 единствен по рода си: вярно,
 },
});


конст Потребител = модели. Потребител || модел("Потребител", потребителска схема);
износпо подразбиране потребител;

Създайте крайните точки на API

За разлика от други предни рамки, Next.js предоставя вградена поддръжка за управление на API. Това опростява процеса на създаване на API, тъй като можете да ги дефинирате директно в проекта Next.js, вместо да настройвате отделен сървър.

След като дефинирате API маршрутите в директорията pages/api, Next.js генерира API крайни точки за всеки от файловете в тази директория. Например, ако създадете userV1/user.js, Next.js ще създаде крайна точка, достъпна на http://localhost: 3000/api/потребител V1/потребител.

Вътре в страници/api, създайте нова папка и я наименувайте userV1. В тази папка създайте нов файл, наречен user.jsи добавете кода по-долу:

импортиране свържете Монго от'../../../utils/dbConfig';
импортиране Потребител от'../../../models/userModel';
/**
 * @param {импортиране('следващия').NextApiRequest} req
 * @param {импортиране('следващия').NextApiResponse} res
 */
износпо подразбиранеасинхроненфункцияuserAPI(req, res) {
опитвам {
конзола.log(„СВЪРЗВАНЕ С МОНГО“);
изчакайте свържетеMongo();
конзола.log(„СВЪРЗАН С МОНГО“);
ако (необходим метод „ПУБЛИКУВАНЕ“) {
конзола.log(„СЪЗДАВАНЕ НА ДОКУМЕНТ“);
конст createdUser = изчакайте User.create (req.body);
конзола.log(„СЪЗДАДЕН ДОКУМЕНТ“);
 res.json({ createdUser});
 } другоако (необходим метод "ВЗЕМИ") {
конзола.log(„ИЗВЛЕЧВАНЕ НА ДОКУМЕНТИ“);
конст fetchedUsers = изчакайте User.find({});
конзола.log(„ИЗТЕГЛЕНИ ДОКУМЕНТИ“);
 res.json({fetchedUsers});
 } друго {
хвърлямновГрешка(`Неподдържан HTTP метод: ${req.method}`);
 }
 } улов (грешка) {
конзола.log (грешка);
 res.json({грешка});
 }
}

Този код имплементира крайна точка на API за съхраняване и извличане на потребителски данни от база данни MongoDB. То определя a userAPI функция, която приема два параметъра: изискване и рез. Те представляват съответно входящата HTTP заявка и изходящия HTTP отговор.

Вътре във функцията кодът се свързва с базата данни MongoDB и проверява HTTP метода на входящата заявка.

Ако методът е POST заявка, кодът създава нов потребителски документ в базата данни, използвайки създавам метод. Обратно, ако е a ВЗЕМЕТЕ заявка, кодът извлича всички потребителски документи от базата данни.

Консумиране на крайните точки на API

Добавете кода по-долу към страници/index.js файл:

  • Направете POST заявка към крайната точка на API за съхраняване на данни в базата данни.
    импортиране стилове от'@/styles/Home.module.css';
    импортиране {useState} от"реагира";
    износпо подразбиранефункцияУ дома() {
    конст [име, setName] = useState('');
    конст [имейл, setEmail] = useState('');
    конст [usersResults, setUsersResults] = useState([]);
    

    конст createUser = асинхронен () => {
    опитвам {
    конст createdUser = изчакайте извличане ('/api/userV1/user', {
     метод: „ПУБЛИКУВАНЕ“,
     заглавки: {
    'Тип съдържание': 'приложение/json',
     },
     тяло: JSON.stringify({
     име,
     електронна поща,
     }),
     }).тогава((рез) => res.json());
    конзола.log(„СЪЗДАДЕН ДОКУМЕНТ“);
    

     setName('');
     setEmail('');
    конзола.log (създаден потребител);
     } улов (грешка) {
    конзола.log (грешка);
     }
     };
  • Дефинирайте функция за извличане на потребителските данни чрез отправяне на HTTP заявки към крайната точка GET.
    конст displayUsers = асинхронен () => {
    опитвам {
    конзола.log(„ИЗВЛЕЧВАНЕ НА ДОКУМЕНТИ“);
    конст fetchedUsers = изчакайте извличане ('/api/userV1/user').тогава((рез) =>
     res.json()
     );
    конзола.log(„ИЗТЕГЛЕНИ ДОКУМЕНТИ“);

     setUsersResults (fetchedUsers);
    конзола.log (usersResults)

     } улов (грешка) {
    конзола.log (грешка);
     }
     };
  • И накрая, изобразете елемент на формуляр с полета за въвеждане на текст и бутони за изпращане и показване на потребителски данни.
    връщане (
     <>

И накрая, завъртете сървъра за разработка, за да актуализирате промените и да отидете до него http://localhost: 3000 във вашия браузър.

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

Използване на Next.js в приложения

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

Въпреки че е основно стабилна рамка от страна на клиента, можете също да използвате нейните възможности от страна на сървъра, за да завъртите бързо бекенд услуга.