Objavte silu Mongoose a ako ho môžete použiť na správu údajov pre jednoduchú webovú aplikáciu.

Next.js je všestranný full-stack JavaScript framework, ktorý je postavený na Reacte a podporuje jeho hlavné funkcie ako JSX, komponenty a háčiky. Niektoré zo základných funkcií Next.js zahŕňajú smerovanie založené na súboroch, CSS v JS a vykresľovanie na strane servera.

Jednou z významných schopností Next.js je jeho schopnosť bezproblémovo sa integrovať s rôznymi backendovými technológiami, ako je Mongoose, čo vám umožňuje jednoducho a efektívne spravovať dáta.

Pomocou Mongoose môžete jednoducho definovať výkonné REST API z aplikácie Next.js na ukladanie a získavanie údajov z databázy MongoDB.

Next.js: Full-Stack JavaScript Framework

Na rozdiel od Reactu sa Next.js považuje za full-stack webový rámec, pretože poskytuje kompletné riešenie pre vytváranie webových aplikácií vykresľovaných na strane servera.

Je to preto, že ponúka funkcie, ktoré umožňujú pracovať na front-end aj back-ende aplikácie z jedného adresára projektu. Na implementáciu funkčnosti na strane servera, najmä pre aplikácie malého rozsahu, nemusíte nevyhnutne nastaviť samostatný priečinok back-end projektu.

instagram viewer

Napriek tomu, že Next.js zvláda niektoré funkcie back-endu, na vytváranie rozsiahlych aplikácií s úplným zásobníkom ho možno budete chcieť skombinovať s vyhradeným backendovým rámcom, ako je Express.

Niektoré zo základných funkcií, ktoré dávajú Next.js jeho úplné možnosti, zahŕňajú:

  • Vykresľovanie na strane servera: Next.js poskytuje vstavanú podporu pre možnosti vykresľovania na strane servera. V podstate to znamená, že keď klient odošle HTTP požiadavky na server, server spracuje požiadavky a odpovie požadovaným HTML obsahom pre každú stránku, ktorá sa má vykresliť v prehliadači.
  • Smerovanie: Next.js používa systém smerovania založený na stránkach na definovanie a správu rôznych trás, spracovanie vstupov používateľov a vytváranie dynamických stránok bez toho, aby ste sa museli spoliehať na knižnice tretích strán. Okrem toho sa dá ľahko zväčšiť, pretože pridávanie nových trás je také jednoduché ako pridávanie novej stránky, napríklad about.js, do adresára stránok.
  • Koncové body API: Next.js poskytuje vstavanú podporu pre funkcie na strane servera, ktoré sa používajú na vytváranie koncových bodov API, ktoré spravujú požiadavky HTTP a vracajú údaje. To uľahčuje vytváranie back-endových funkcií bez toho, aby ste museli nastavovať samostatný server pomocou vyhradeného backendového rámca, ako je Express. Je však dôležité poznamenať, že Next.js je primárne front-end webový rámec.

Nastavte databázu MongoDB

Začať, nastaviť databázu MongoDB. Prípadne môžete rýchlo vytvoriť databázu MongoDB pomocou bezplatná konfigurácia klastra MongoDB v cloude. Keď máte databázu v prevádzke, skopírujte reťazec URI pripojenia k databáze.

Kód tohto projektu nájdete v tomto úložisko GitHub.

Nastavte projekt Next.js

Vytvorte adresár pre nový projekt a cd do toho:

mkdir nextjs-project
cd nextjs-projekt

Potom nainštalujte Next.js:

npx create-next-app nextjs-mongodb

Po dokončení procesu inštalácie nainštalujte Mongoose ako závislosť.

npm nainštalovať mongoose

Nakoniec v koreňovom adresári vášho projektu vytvorte nový súbor .env, ktorý bude obsahovať reťazec pripojenia k databáze.

NEXT_PUBLIC_MONGO_URI = "reťazec pripojenia URI databázy"

Nakonfigurujte pripojenie k databáze

V src adresár, vytvorte nový priečinok a pomenujte ho utils. V tomto priečinku vytvorte nový súbor s názvom dbConfig.js a pridajte k nemu nasledujúci kód:

importovať mangusta od"mongoose";
konšt pripojiťMongo = async () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
exportpredvolená pripojiťMongo;

Definujte dátové modely

Dátové modely definujú štruktúru údajov, ktoré sa budú ukladať, vrátane typov údajov a vzťahov medzi údajmi.

MongoDB ukladá údaje do dokumentov podobných JSON, pretože ide o a NoSQL databáza. Mongoose poskytuje spôsob, ako definovať, ako sa majú údaje z klientov Next.js ukladať a pristupovať z databázy.

V adresári src vytvorte nový priečinok a názov v modeloch. V tomto priečinku vytvorte nový súbor s názvom userModel.js, a pridajte kód nižšie:

importovať { Schéma, model, modely } od"mongoose";
konšt userSchema = Nový Schéma({
 názov: Reťazec,
 email: {
 typ: Reťazec,
 požadovaný: pravda,
 jedinečné: pravda,
 },
});


konšt Používateľ = modely. Používateľ || Model('používateľ', userSchema);
exportpredvolená Používateľ;

Vytvorte koncové body API

Na rozdiel od iných front-end rámcov, Next.js poskytuje vstavanú podporu pre správu API. To zjednodušuje proces vytvárania API, pretože ich môžete definovať priamo v projekte Next.js namiesto nastavovania samostatného servera.

Po zadefinovaní ciest API v adresári pages/api Next.js vygeneruje koncové body API pre každý zo súborov v tomto adresári. Ak napríklad vytvoríte userV1/user.js, Next.js vytvorí koncový bod prístupný na http://localhost: 3000/api/userV1/user.

Vnútri stránky/api, vytvorte nový priečinok a pomenujte ho userV1. V tomto priečinku vytvorte nový súbor s názvom user.jsa pridajte kód nižšie:

importovať pripojiťMongo od'../../../utils/dbConfig';
importovať Používateľ od'../../../models/userModel';
/**
 * @param {importovať('Ďalšie').NextApiRequest} požiadavka
 * @param {importovať('Ďalšie').NextApiResponse} res
 */
exportpredvolenáasyncfunkciuuserAPI(req, req) {
skúste {
konzoly.log(PRIPOJENIE SA K MONGOVI);
čakať connectMongo();
konzoly.log(PRIPOJENÉ K MONGOVI);
ak (požadovaná metóda 'POST') {
konzoly.log('VYTVORÍ SA DOKUMENT');
konšt createdUser = čakať User.create (req.body);
konzoly.log(„VYTVORENÝ DOKUMENT“);
 res.json({ createdUser });
 } inakak (požadovaná metóda 'GET') {
konzoly.log(„NAČÍTANIE DOKUMENTOV“);
konšt fetchedUsers = čakať User.find({});
konzoly.log('NAŤAHOVANÉ DOKUMENTY');
 res.json({ fetchedUsers });
 } inak {
hodiťNovýChyba(`Nepodporovaná metóda HTTP: ${req.method}`);
 }
 } chytiť (chyba) {
konzoly.log (chyba);
 res.json({ chyba });
 }
}

Tento kód implementuje koncový bod API na ukladanie a načítanie používateľských údajov z databázy MongoDB. Definuje a userAPI funkcia, ktorá má dva parametre: req a res. Tieto predstavujú prichádzajúcu požiadavku HTTP a odchádzajúce odpoveď HTTP.

Vo vnútri funkcie sa kód pripojí k databáze MongoDB a skontroluje HTTP metódu prichádzajúcej požiadavky.

Ak je metódou požiadavka POST, kód vytvorí nový užívateľský dokument v databáze pomocou vytvoriť metóda. Naopak, ak ide o a GET kód načíta všetky užívateľské dokumenty z databázy.

Využívanie koncových bodov API

Pridajte nižšie uvedený kód do pages/index.js súbor:

  • Urobte požiadavku POST na koncový bod API na uloženie údajov do databázy.
    importovať štýlov od'@/styles/Home.module.css';
    importovať { useState } od'reagovať';
    exportpredvolenáfunkciuDomov() {
    konšt [name, setName] = useState('');
    konšt [email, setEmail] = useState('');
    konšt [usersResults, setUsersResults] = useState([]);
    

    konšt createUser = async () => {
    skúste {
    konšt createdUser = čakať priniesť ('/api/userV1/user', {
     metóda: 'POST',
     hlavičky: {
    'Druh obsahu': 'application/json',
     },
     telo: JSON.stringify({
     názov,
     email,
     }),
     }).potom((res) => res.json());
    konzoly.log(„VYTVORENÝ DOKUMENT“);
    

     setName('');
     setEmail('');
    konzoly.log (vytvorenýPoužívateľ);
     } chytiť (chyba) {
    konzoly.log (chyba);
     }
     };
  • Definujte funkciu na načítanie údajov používateľa vytváraním požiadaviek HTTP na koncový bod GET.
    konšt displayUsers = async () => {
    skúste {
    konzoly.log(„NAČÍTANIE DOKUMENTOV“);
    konšt fetchedUsers = čakať priniesť ('/api/userV1/user').potom((res) =>
     res.json()
     );
    konzoly.log('NAŤAHOVANÉ DOKUMENTY');

     setUsersResults (fetchedUsers);
    konzoly.log (usersResults)

     } chytiť (chyba) {
    konzoly.log (chyba);
     }
     };
  • Nakoniec vyrenderujte prvok formulára s poľami na zadávanie textu a odošlite a zobrazte tlačidlá s používateľskými údajmi.
    vrátiť (
     <>

Nakoniec pokračujte a roztočte vývojový server, aby ste aktualizovali zmeny a prejdite naň http://localhost: 3000 vo vašom prehliadači.

npm spustiť dev

Používanie Next.js v Aplikáciách

Next.js je fantastická možnosť na vytváranie skvelých webových aplikácií, či už pracujete na vedľajšom projekte alebo na veľkom webovom riešení. Ponúka celý rad funkcií a možností, ktoré zefektívňujú proces vytvárania výkonných a škálovateľných produktov.

Aj keď ide predovšetkým o robustný rámec na strane klienta, jeho možnosti na strane servera môžete využiť aj na rýchle spustenie backendovej služby.