Oplev styrken ved Mongoose, og hvordan du kan bruge den til at administrere data til en simpel webapp.

Next.js er en alsidig full-stack JavaScript-ramme, der er bygget oven på React og understøtter dens hovedfunktioner som JSX, komponenter og kroge. Nogle af Next.js’ kernefunktioner inkluderer filbaseret routing, CSS i JS og gengivelse på serversiden.

En væsentlig egenskab ved Next.js er dens evne til problemfrit at integrere med forskellige backend-teknologier såsom Mongoose, hvilket giver dig mulighed for nemt at administrere data effektivt.

Med Mongoose kan du nemt definere en effektiv REST API fra en Next.js-applikation til at gemme og hente data fra en MongoDB-database.

Next.js: A Full-Stack JavaScript Framework

I modsætning til React betragtes Next.js som et fuldstack-webframework, fordi det giver en komplet løsning til opbygning af server-side-renderede webapplikationer.

Dette skyldes, at det tilbyder funktioner, der gør det muligt at arbejde på både front-end og back-end af en applikation fra en enkelt projektmappe. Du behøver ikke nødvendigvis at oprette en separat back-end-projektmappe for at implementere server-side-funktionalitet, især for små applikationer.

instagram viewer

Men så meget som Next.js håndterer nogle backend-funktioner, for at bygge store, fuld-stack-applikationer, vil du måske kombinere det med en dedikeret backend-ramme som Express.

Nogle af de kernefunktioner, der giver Next.js sine full-stack-funktioner, inkluderer:

  • Server-side-rendering: Next.js giver indbygget understøttelse af server-side-rendering-funktioner. I bund og grund betyder det, at når en klient sender HTTP-anmodninger til en server, behandler serveren anmodningerne og svarer med det nødvendige HTML-indhold for hver side, der skal gengives i browseren.
  • Routing: Next.js bruger et sidebaseret routingsystem til at definere og administrere forskellige ruter, håndtere brugerinput og skabe dynamiske sider uden at skulle stole på tredjepartsbiblioteker. Derudover er det nemt at skalere op, da tilføjelse af nye ruter er lige så enkelt som at tilføje en ny side såsom about.js til sidernes bibliotek.
  • API-endepunkter: Next.js giver indbygget understøttelse af server-side-funktioner, som bruges til at oprette API-endepunkter, der administrerer HTTP-anmodninger og returnerer data. Dette gør det nemt at bygge backend-funktionalitet uden at skulle opsætte en separat server ved hjælp af en dedikeret backend-ramme som Express. Det er dog vigtigt at bemærke, at Next.js primært er en front-end webramme.

Opsæt en MongoDB-database

For at komme i gang, oprette en MongoDB-database. Alternativt kan du hurtigt oprette en MongoDB-database ved at konfigurere en MongoDB-klynge i skyen gratis. Når du har din database oppe at køre, skal du kopiere databaseforbindelsens URI-streng.

Du kan finde dette projekts kode i denne GitHub-depot.

Konfigurer et Next.js-projekt

Opret en mappe til et nyt projekt og cd ind i det:

mkdir nextjs-project
cd nextjs-projekt

Installer derefter Next.js:

npx create-next-app nextjs-mongodb

Når installationsprocessen er fuldført, skal du installere Mongoose som en afhængighed.

npm installere mongoose

Til sidst, i dit projekts rodbibliotek, skal du oprette en ny .env-fil til at holde din databaseforbindelsesstreng.

NEXT_PUBLIC_MONGO_URI = "database URI forbindelsesstreng"

Konfigurer databaseforbindelsen

I den src mappe, opret en ny mappe og navngiv den utils. Inde i denne mappe skal du oprette en ny fil kaldet dbConfig.js og tilføje følgende kode til det:

importere mangust fra'mangust';
konst connectMongo = asynkron () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
eksportStandard forbinde Mongo;

Definer datamodellerne

Datamodeller definerer strukturen af ​​de data, der vil blive lagret, herunder typerne af data og relationerne mellem dataene.

MongoDB gemmer data i JSON-lignende dokumenter, da det er en NoSQL database. Mongoose giver en måde at definere, hvordan data fra Next.js-klienter skal lagres og tilgås fra databasen.

I src-mappen skal du oprette en ny mappe og navn i modeller. Inde i denne mappe skal du oprette en ny fil kaldet userModel.js, og tilføj koden nedenfor:

importere { Skema, model, modeller } fra'mangust';
konst userSchema = ny Skema({
 navn: Snor,
 e-mail: {
 type: Snor,
 påkrævet: rigtigt,
 enestående: rigtigt,
 },
});


konst Bruger = modeller. Bruger || model('Bruger', brugerskema);
eksportStandard Bruger;

Opret API-endepunkter

I modsætning til andre front-end-frameworks giver Next.js indbygget support til API-administration. Dette forenkler processen med at oprette API'er, da du kan definere dem direkte i Next.js-projektet i stedet for at opsætte en separat server.

Når du har defineret API-ruterne inde i pages/api-mappen, genererer Next.js API-slutpunkter for hver af filerne i denne mappe. Hvis du f.eks. opretter userV1/user.js, vil Next.js oprette et slutpunkt, der er tilgængeligt på http://localhost: 3000/api/userV1/user.

Inde i sider/api, opret en ny mappe og navngiv den brugerV1. Inde i denne mappe skal du oprette en ny fil kaldet bruger.js, og tilføj koden nedenfor:

importere forbinde Mongo fra'../../../utils/dbConfig';
importere Bruger fra'../../../models/userModel';
/**
 * @param {importere('Næste').NextApiRequest} req
 * @param {importere('Næste').NextApiResponse} res
 */
eksportStandardasynkronfungerebruger-API(kræve, res) {
prøve {
konsol.log('FORBINDELSE TIL MONGO');
vente connectMongo();
konsol.log('FORBUNDET TIL MONGO');
hvis (anmodningsmetode 'STOLPE') {
konsol.log('OPRETTER DOKUMENT');
konst oprettetBruger = vente User.create (req.body);
konsol.log('OPRETTET DOKUMENT');
 res.json({ createdUser });
 } andethvis (anmodningsmetode 'FÅ') {
konsol.log('HENTNING AF DOKUMENTER');
konst hentedeBrugere = vente Bruger.find({});
konsol.log('HENTET DOKUMENTER');
 res.json({ fetchedUsers });
 } andet {
kastenyFejl(`Ikke-understøttet HTTP-metode: ${req.method}`);
 }
 } fangst (fejl) {
konsol.log (fejl);
 res.json({ fejl });
 }
}

Denne kode implementerer et API-endepunkt til lagring og hentning af brugerdata fra en MongoDB-database. Det definerer en bruger-API funktion, der tager to parametre: req og res. Disse repræsenterer henholdsvis den indgående HTTP-anmodning og den udgående HTTP-svar.

Inde i funktionen forbinder koden til MongoDB-databasen og kontrollerer HTTP-metoden for den indkommende anmodning.

Hvis metoden er en POST-anmodning, opretter koden et nyt brugerdokument i databasen ved hjælp af skab metode. Omvendt, hvis det er en FÅ anmodning henter koden alle brugerdokumenter fra databasen.

Forbruger API-endepunkterne

Tilføj koden nedenfor til sider/indeks.js fil:

  • Foretag en POST-anmodning til API-endepunktet for at gemme data i databasen.
    importere stilarter fra'@/styles/Home.module.css';
    importere { useState } fra'reagere';
    eksportStandardfungereHjem() {
    konst [navn, sætnavn] = useState('');
    konst [email, setEmail] = useState('');
    konst [usersResults, setUsersResults] = useState([]);
    

    konst opretteBruger = asynkron () => {
    prøve {
    konst oprettetBruger = vente hente('/api/userV1/user', {
     metode: 'STOLPE',
     overskrifter: {
    'Indholdstype': 'applikation/json',
     },
     legeme: JSON.stringify({
     navn,
     e-mail,
     }),
     }).derefter((res) => res.json());
    konsol.log('OPRETTET DOKUMENT');
    

     sætnavn('');
     sætEmail('');
    konsol.log (createdUser);
     } fangst (fejl) {
    konsol.log (fejl);
     }
     };
  • Definer en funktion til at hente brugerdata ved at lave HTTP-anmodninger til GET-slutpunktet.
    konst displayBrugere = asynkron () => {
    prøve {
    konsol.log('HENTNING AF DOKUMENTER');
    konst hentedeBrugere = vente hente('/api/userV1/user').derefter((res) =>
     res.json()
     );
    konsol.log('HENTET DOKUMENTER');

     setUsersResults (fetchedUsers);
    konsol.log (brugerresultater)

     } fangst (fejl) {
    konsol.log (fejl);
     }
     };
  • Til sidst skal du gengive et formularelement med tekstindtastningsfelter og sende og vise brugerdataknapper.
    Vend tilbage (
     <>

Til sidst skal du gå videre og dreje udviklingsserveren op for at opdatere ændringerne og navigere til http://localhost: 3000 i din browser.

npm køre dev

Brug af Next.js i applikationer

Next.js er en fantastisk mulighed for at bygge fede webapplikationer, uanset om du arbejder på et sideprojekt eller en storstilet webløsning. Det tilbyder en række funktioner og muligheder, der strømliner processen med at skabe effektive og skalerbare produkter.

Selvom det primært er en robust klient-side-ramme, kan du også bruge dens server-side-kapaciteter til hurtigt at oprette en backend-tjeneste.