Avastage Mongoose'i võimsus ja kuidas saate seda kasutada andmete haldamiseks lihtsa veebirakenduse jaoks.

Next.js on mitmekülgne täispinu JavaScripti raamistik, mis on üles ehitatud Reactile ja toetab selle põhifunktsioone, nagu JSX, komponendid ja konksud. Mõned Next.js-i põhifunktsioonid hõlmavad failipõhist marsruutimist, CSS-i JS-is ja serveripoolset renderdamist.

Üks oluline Next.js-i võimalus on selle võime sujuvalt integreeruda erinevate taustatehnoloogiatega, nagu Mongoose, võimaldades teil andmeid hõlpsalt tõhusalt hallata.

Mongoose'i abil saate hõlpsasti määratleda rakendusest Next.js toimiv REST API, et salvestada ja hankida andmeid MongoDB andmebaasist.

Next.js: Full-stack JavaScripti raamistik

Erinevalt Reactist peetakse Next.js-i täispinu veebiraamistikuks, kuna see pakub terviklikku lahendust serveripoolsete renderdatud veebirakenduste loomiseks.

Seda seetõttu, et see pakub funktsioone, mis võimaldavad töötada nii rakenduse esi- kui ka tagaotsas ühes projektikataloogis. Serveripoolse funktsionaalsuse rakendamiseks, eriti väikesemahuliste rakenduste jaoks, ei pea te tingimata seadistama eraldi taustaprojekti kausta.

Ent niivõrd kui Next.js tegeleb mõne taustafunktsiooniga, võiksite suuremahuliste täispinu rakenduste loomiseks ühendada selle spetsiaalse taustaraamistikuga, nagu Express.

Mõned põhifunktsioonid, mis annavad Next.js'ile täieliku virna, on järgmised:

  • Serveripoolne renderdus: Next.js pakub sisseehitatud tuge serveripoolsetele renderdusvõimalustele. Põhimõtteliselt tähendab see, et kui klient saadab serverile HTTP-päringuid, töötleb server päringud ja vastab iga brauseris renderdatava lehe jaoks vajaliku HTML-i sisuga.
  • Marsruutimine: Next.js kasutab lehepõhist marsruutimissüsteemi, et määratleda ja hallata erinevaid marsruute, käsitleda kasutajate sisestusi ja luua dünaamilisi lehti, ilma et peaks tuginema kolmandate osapoolte teekidele. Lisaks on seda lihtne suurendada, kuna uute marsruutide lisamine on sama lihtne kui uue lehe (nt about.js) lisamine lehtede kataloogi.
  • API lõpp-punktid: Next.js pakub sisseehitatud tuge serveripoolsetele võimalustele, mida kasutatakse HTTP-päringuid haldavate ja andmeid tagastavate API lõpp-punktide loomiseks. See muudab taustafunktsioonide loomise lihtsaks, ilma et peaksite seadistama eraldi serverit, kasutades selleks spetsiaalset taustaraamistikku, nagu Express. Siiski on oluline märkida, et Next.js on peamiselt esiotsa veebiraamistik.

MongoDB andmebaasi seadistamine

Alustamiseks looge MongoDB andmebaas. Teise võimalusena saate MongoDB andmebaasi kiiresti luua MongoDB klastri konfigureerimine pilves tasuta. Kui olete andmebaasi loonud ja käivitanud, kopeerige andmebaasiühenduse URI string.

Selle projekti koodi leiate siit GitHubi hoidla.

Seadistage Next.js projekt

Looge uue projekti jaoks kataloog ja cd sellesse:

mkdir nextjs-projekt
cd nextjs-projekt

Seejärel installige Next.js:

npx create-next-app nextjs-mongodb

Kui installiprotsess on lõppenud, installige Mongoose sõltuvusena.

npm install mongoose

Lõpuks looge oma projekti juurkataloogis oma andmebaasi ühendusstringi hoidmiseks uus env-fail.

NEXT_PUBLIC_MONGO_URI = "andmebaasi URI ühenduse string"

Andmebaasiühenduse konfigureerimine

Aastal src kataloogi, looge uus kaust ja andke sellele nimi utils. Looge selle kausta sees uus fail nimega dbConfig.js ja lisage sellele järgmine kood:

importida mangust alates"mongoose";
konst ühenda Mongo = asünkr () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
eksportidavaikimisi ühenda Mongo;

Määratlege andmemudelid

Andmemudelid määratlevad salvestatavate andmete struktuuri, sealhulgas andmetüübid ja andmetevahelised seosed.

MongoDB salvestab andmeid JSON-i sarnastes dokumentides, kuna see on a NoSQL andmebaas. Mongoose pakub võimalust määratleda, kuidas Next.js-i klientide andmeid tuleks salvestada ja neile andmebaasist juurde pääseda.

Looge src kataloogis mudelites uus kaust ja nimi. Looge selle kausta sees uus fail nimega userModel.js, ja lisage allolev kood:

importida { Skeem, mudel, mudelid } alates"mongoose";
konst userSchema = uus Skeem({
 nimi: String,
 email: {
 tüüp: String,
 nõutud: tõsi,
 ainulaadne: tõsi,
 },
});


konst Kasutaja = mudelid. Kasutaja || mudel ('kasutaja', userSchema);
eksportidavaikimisi Kasutaja;

Looge API lõpp-punktid

Erinevalt teistest esiotsa raamistikest pakub Next.js API halduse sisseehitatud tuge. See lihtsustab API-de loomise protsessi, kuna saate need otse projektis Next.js määratleda, selle asemel et luua eraldi serverit.

Kui olete määratlenud API marsruudid lehtede/api kataloogis, genereerib Next.js API lõpp-punktid iga selle kataloogi faili jaoks. Näiteks kui loote faili userV1/user.js, loob Next.js lõpp-punkti, millele on juurdepääs aadressil http://localhost: 3000/api/kasutajaV1/kasutaja.

Sees lehed/api, looge uus kaust ja nimetage see kasutajaV1. Looge selle kausta sees uus fail nimega user.jsja lisage allolev kood:

importida ühenda Mongo alates'../../../utils/dbConfig';
importida Kasutaja alates"../../../models/userModel";
/**
 * @param {importida('järgmine').NextApiRequest} req
 * @param {importida('järgmine').NextApiResponse} res
 */
eksportidavaikimisiasünkrfunktsiooniuserAPI(req, res) {
proovi {
konsool.log("ÜHENDAMINE MONGOGA");
ootama ühenda Mongo();
konsool.log("ÜHENDATUD MONGOGA");
kui (nõutav meetod 'POSTI') {
konsool.log('DOKUMENTI LOOMINE');
konst loodudKasutaja = ootama User.create (req.body);
konsool.log('LOODI DOKUMENT');
 res.json({ loodudKasutaja });
 } muidukui (nõutav meetod 'HANGI') {
konsool.log(DOKUMENTIDE TOOMINE);
konst fetchedUsers = ootama User.find({});
konsool.log('TOOTUD DOKUMENDID');
 res.json({ fetchedUsers });
 } muidu {
viskamauusViga(`Toetamata HTTP-meetod: ${req.method}`);
 }
 } püüda (viga) {
konsool.log (viga);
 res.json({ error });
 }
}

See kood rakendab API lõpp-punkti kasutajaandmete salvestamiseks ja toomiseks MongoDB andmebaasist. See määratleb a userAPI funktsioon, mis võtab kaks parameetrit: req ja res. Need tähistavad vastavalt sissetulevat HTTP-päringut ja väljaminevat HTTP-vastust.

Funktsiooni sees loob kood ühenduse MongoDB andmebaasiga ja kontrollib sissetuleva päringu HTTP-meetodit.

Kui meetod on POST-i päring, loob kood andmebaasi uue kasutajadokumendi, kasutades luua meetod. Ja vastupidi, kui see on a SAADA päringu korral hangib kood andmebaasist kõik kasutajadokumendid.

API lõpp-punktide tarbimine

Lisage allolev kood pages/index.js fail:

  • Andmete andmebaasi salvestamiseks tehke API lõpp-punktile POST-i päring.
    importida stiilid alates'@/styles/Home.module.css';
    importida { useState } alates'reageeri';
    eksportidavaikimisifunktsiooniKodu() {
    konst [nimi, setName] = useState('');
    konst [email, setEmail] = useState('');
    konst [usersResults, setUsersResults] = useState([]);
    

    konst createUser = asünkr () => {
    proovi {
    konst loodudKasutaja = ootama tõmba('/api/userV1/user', {
     meetod: 'POSTI',
     päised: {
    'Sisu tüüp': "rakendus/json",
     },
     keha: JSON.stringify({
     nimi,
     email,
     }),
     }).siis((res) => res.json());
    konsool.log('LOODI DOKUMENT');
    

     setName('');
     setEmail('');
    konsool.log (createdUser);
     } püüda (viga) {
    konsool.log (viga);
     }
     };
  • Määrake funktsioon kasutajaandmete toomiseks, tehes GET-i lõpp-punktile HTTP-päringuid.
    konst displayUsers = asünkr () => {
    proovi {
    konsool.log(DOKUMENTIDE TOOMINE);
    konst fetchedUsers = ootama tõmba('/api/userV1/user').siis((res) =>
     res.json()
     );
    konsool.log('TOOTUD DOKUMENDID');

     setUsersResults (fetchedUsers);
    konsool.log (usersResults)

     } püüda (viga) {
    konsool.log (viga);
     }
     };
  • Viimasena renderdage vormielement koos tekstisisestusväljadega ning esitage ja kuvage kasutajaandmeid.
    tagasi (
     <>

Lõpuks minge edasi ja käivitage arendusserver, et muudatusi värskendada ja sinna navigeerida http://localhost: 3000 oma brauseris.

npm käivita dev

Next.js kasutamine rakenduses

Next.js on suurepärane võimalus lahedate veebirakenduste loomiseks, olenemata sellest, kas töötate kõrvalprojekti või suuremahulise veebilahenduse kallal. See pakub mitmesuguseid funktsioone ja võimalusi, mis sujuvamaks muutvad tõhusate ja skaleeritavate toodete loomise protsessi.

Kuigi tegemist on peamiselt tugeva kliendipoolse raamistikuga, saate taustateenuse kiireks loomiseks kasutada ka selle serveripoolseid võimalusi.