Oppdag kraften til Mongoose og hvordan du kan bruke den til å administrere data for en enkel nettapp.

Next.js er et allsidig fullstack JavaScript-rammeverk som er bygget på toppen av React, og støtter hovedfunksjonene som JSX, komponenter og kroker. Noen av kjernefunksjonene til Next.js inkluderer filbasert ruting, CSS i JS og gjengivelse på serversiden.

En betydelig egenskap til Next.js er dens evne til sømløs integrering med ulike backend-teknologier som Mongoose, slik at du enkelt kan administrere data effektivt.

Med Mongoose kan du enkelt definere en effektiv REST API fra en Next.js-applikasjon for å lagre og hente data fra en MongoDB-database.

Next.js: Et fullstack JavaScript-rammeverk

I motsetning til React, betraktes Next.js som et fullstack-nettrammeverk fordi det gir en komplett løsning for å bygge server-side gjengitte webapplikasjoner.

Dette er fordi det tilbyr funksjoner som gjør det mulig å jobbe på både front-end og back-end av en applikasjon fra en enkelt prosjektkatalog. Du trenger ikke nødvendigvis å sette opp en egen back-end-prosjektmappe for å implementere funksjonalitet på serversiden, spesielt for småskalaapplikasjoner.

instagram viewer

Men så mye som Next.js håndterer noen backend-funksjonalitet, for å bygge storskala fullstack-applikasjoner, vil du kanskje kombinere det med et dedikert backend-rammeverk som Express.

Noen av kjernefunksjonene som gir Next.js fullstack-funksjonene inkluderer:

  • Gjengivelse på serversiden: Next.js gir innebygd støtte for gjengivelsesfunksjoner på serversiden. I hovedsak betyr det at når en klient sender HTTP-forespørsler til en server, behandler serveren forespørslene og svarer med det nødvendige HTML-innholdet for hver side som skal gjengis i nettleseren.
  • Ruting: Next.js bruker et sidebasert rutingsystem for å definere og administrere forskjellige ruter, håndtere brukerinndata og lage dynamiske sider uten å måtte stole på tredjepartsbiblioteker. I tillegg er det enkelt å skalere opp siden det å legge til nye ruter er like enkelt som å legge til en ny side som about.js i sidens katalog.
  • API-endepunkter: Next.js gir innebygd støtte for funksjoner på serversiden som brukes til å lage API-endepunkter som administrerer HTTP-forespørsler og returnerer data. Dette gjør det enkelt å bygge backend-funksjonalitet uten å måtte sette opp en separat server ved å bruke et dedikert backend-rammeverk som Express. Det er imidlertid viktig å merke seg at Next.js først og fremst er et front-end nettrammeverk.

Sett opp en MongoDB-database

For å komme i gang, sette opp en MongoDB-database. Alternativt kan du raskt spinne opp en MongoDB-database ved å konfigurere en MongoDB-klynge i skyen gratis. Når du har databasen oppe og kjører, kopierer du databasetilkoblingens URI-streng.

Du finner dette prosjektets kode i denne GitHub-depot.

Sett opp et Next.js-prosjekt

Opprett en katalog for et nytt prosjekt og cd i det:

mkdir nextjs-project
cd nextjs-prosjekt

Installer deretter Next.js:

npx create-next-app nextjs-mongodb

Når installasjonsprosessen er fullført, installer Mongoose som en avhengighet.

npm installer mongoose

Til slutt, i rotkatalogen til prosjektet ditt, lag en ny .env-fil for å holde databasetilkoblingsstrengen.

NEXT_PUBLIC_MONGO_URI = "database URI-tilkoblingsstreng"

Konfigurer databasetilkoblingen

I src katalog, opprett en ny mappe og navngi den utils. Inne i denne mappen oppretter du en ny fil som heter dbConfig.js og legg til følgende kode:

import mangust fra"mangus";
konst connectMongo = asynkron () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
eksportmisligholde koble Mongo;

Definer datamodellene

Datamodeller definerer strukturen til dataene som skal lagres, inkludert typene data og relasjonene mellom dataene.

MongoDB lagrer data i JSON-lignende dokumenter siden det er en NoSQL database. Mongoose gir en måte å definere hvordan data fra Next.js-klienter skal lagres og få tilgang fra databasen.

Opprett en ny mappe og navn i modeller i src-katalogen. Inne i denne mappen oppretter du en ny fil som heter userModel.js, og legg til koden nedenfor:

import { Skjema, modell, modeller } fra"mangus";
konst userSchema = ny Skjema({
 Navn: String,
 e-post: {
 type: String,
 nødvendig: ekte,
 unik: ekte,
 },
});


konst Bruker = modeller. Bruker || modell('Bruker', brukerskjema);
eksportmisligholde Bruker;

Opprett API-endepunkter

I motsetning til andre front-end-rammeverk gir Next.js innebygd støtte for API-administrasjon. Dette forenkler prosessen med å lage APIer siden du kan definere dem direkte i Next.js-prosjektet i stedet for å sette opp en egen server.

Når du har definert API-rutene inne i pages/api-katalogen, genererer Next.js API-endepunkter for hver av filene i denne katalogen. Hvis du for eksempel oppretter userV1/user.js, vil Next.js opprette et endepunkt som er tilgjengelig på http://localhost: 3000/api/userV1/user.

Inne i sider/api, opprett en ny mappe og navngi den userV1. Inne i denne mappen oppretter du en ny fil som heter user.js, og legg til koden nedenfor:

import koble til Mongo fra'../../../utils/dbConfig';
import Bruker fra'../../../models/userModel';
/**
 * @param {import('neste').NextApiRequest} req
 * @param {import('neste').NextApiResponse} res
 */
eksportmisligholdeasynkronfunksjonbruker-API(krav, res) {
prøve {
konsoll.Logg('KOBLER TIL MONGO');
avvente koble Mongo();
konsoll.Logg('KOBLET TIL MONGO');
hvis (rekv.metode 'POST') {
konsoll.Logg("LAGER DOKUMENT");
konst opprettet bruker = avvente User.create (req.body);
konsoll.Logg('OPPRETTET DOKUMENT');
 res.json({ opprettet bruker });
 } ellershvis (rekv.metode 'FÅ') {
konsoll.Logg('HENTER DOKUMENTER');
konst hentetBrukere = avvente Bruker.finn({});
konsoll.Logg(«HENTET DOKUMENTER»);
 res.json({ hentet brukere });
 } ellers {
kastenyFeil(`Ustøttet HTTP-metode: ${req.method}`);
 }
 } å fange (feil) {
konsoll.log (feil);
 res.json({ feil });
 }
}

Denne koden implementerer et API-endepunkt for lagring og henting av brukerdata fra en MongoDB-database. Den definerer en bruker-API funksjon som tar to parametere: rekv og res. Disse representerer henholdsvis den innkommende HTTP-forespørselen og den utgående HTTP-responsen.

Inne i funksjonen kobles koden til MongoDB-databasen og sjekker HTTP-metoden for den innkommende forespørselen.

Hvis metoden er en POST-forespørsel, oppretter koden et nytt brukerdokument i databasen ved hjelp av skape metode. Omvendt, hvis det er en FÅ forespørsel, henter koden alle brukerdokumenter fra databasen.

Bruker API-endepunktene

Legg til koden nedenfor til pages/index.js fil:

  • Gjør en POST-forespørsel til API-endepunktet for å lagre data i databasen.
    import stiler fra'@/styles/Home.module.css';
    import { useState } fra'reagere';
    eksportmisligholdefunksjonHjem() {
    konst [navn, settnavn] = brukState('');
    konst [email, setEmail] = useState('');
    konst [usersResults, setUsersResults] = useState([]);
    

    konst createUser = asynkron () => {
    prøve {
    konst opprettet bruker = avvente hente('/api/userV1/user', {
     metode: 'POST',
     overskrifter: {
    'Innholdstype': 'applikasjon/json',
     },
     kropp: JSON.stringify({
     Navn,
     e-post,
     }),
     }).deretter((res) => res.json());
    konsoll.Logg('OPPRETTET DOKUMENT');
    

     settnavn('');
     setE-post('');
    konsoll.log (createdUser);
     } å fange (feil) {
    konsoll.log (feil);
     }
     };
  • Definer en funksjon for å hente brukerdata ved å gjøre HTTP-forespørsler til GET-endepunktet.
    konst displayUsers = asynkron () => {
    prøve {
    konsoll.Logg('HENTER DOKUMENTER');
    konst hentetBrukere = avvente hente('/api/userV1/user').deretter((res) =>
     res.json()
     );
    konsoll.Logg(«HENTET DOKUMENTER»);

     setUsersResults (fetchedUsers);
    konsoll.log (usersResults)

     } å fange (feil) {
    konsoll.log (feil);
     }
     };
  • Til slutt, gjengi et skjemaelement med tekstinndatafelt og send inn og vis brukerdataknapper.
    komme tilbake (
     <>

Til slutt, gå videre og snurr opp utviklingsserveren for å oppdatere endringene og navigere til http://localhost: 3000 i nettleseren din.

npm kjøre dev

Bruke Next.js i applikasjoner

Next.js er et fantastisk alternativ for å bygge kule webapplikasjoner, enten du jobber med et sideprosjekt eller en storskala nettløsning. Den tilbyr en rekke funksjoner og muligheter som effektiviserer prosessen med å lage effektive og skalerbare produkter.

Selv om det først og fremst er et robust rammeverk på klientsiden, kan du også bruke funksjonene på serversiden for raskt å spinne opp en backend-tjeneste.