Atklājiet Mongoose spēku un to, kā varat to izmantot, lai pārvaldītu datus vienkāršai tīmekļa lietotnei.
Next.js ir daudzpusīgs pilnas kaudzes JavaScript ietvars, kas ir veidots uz React, atbalsta tā galvenās funkcijas, piemēram, JSX, komponentus un āķus. Dažas no Next.js galvenajām funkcijām ietver uz failiem balstītu maršrutēšanu, CSS JS formātā un servera puses renderēšanu.
Viena no būtiskām Next.js iespējām ir tā spēja nemanāmi integrēties ar dažādām aizmugursistēmas tehnoloģijām, piemēram, Mongoose, ļaujot ērti un efektīvi pārvaldīt datus.
Izmantojot Mongoose, jūs varat viegli definēt veiktspējīgu REST API no lietojumprogrammas Next.js, lai saglabātu un izgūtu datus no MongoDB datu bāzes.
Next.js: pilnas stack JavaScript ietvars
Atšķirībā no React, Next.js tiek uzskatīts par pilnas kaudzes tīmekļa ietvaru, jo tas nodrošina pilnīgu risinājumu servera puses renderētu tīmekļa lietojumprogrammu izveidei.
Tas ir tāpēc, ka tas piedāvā līdzekļus, kas ļauj strādāt gan ar lietojumprogrammas priekšgalu, gan aizmuguri no viena projekta direktorija. Lai ieviestu servera puses funkcionalitāti, īpaši maza mēroga lietojumprogrammām, nav obligāti jāiestata atsevišķa aizmugures projekta mape.
Tomēr, lai arī Next.js apstrādā dažas aizmugursistēmas funkcijas, lai izveidotu liela mēroga pilnas skursteņa lietojumprogrammas, iespējams, vēlēsities to apvienot ar īpašu aizmugursistēmas sistēmu, piemēram, Express.
Dažas no galvenajām funkcijām, kas nodrošina Next.js pilnas kaudzes iespējas, ietver:
- Servera puses renderēšana: Next.js nodrošina iebūvētu atbalstu servera puses renderēšanas iespējām. Būtībā tas nozīmē, ka, tiklīdz klients nosūta HTTP pieprasījumus serverim, serveris apstrādā pieprasījumus un atbild ar nepieciešamo HTML saturu katrai lapai, kas jāatveido pārlūkprogrammā.
- Maršrutēšana: Next.js izmanto uz lapām balstītu maršrutēšanas sistēmu, lai definētu un pārvaldītu dažādus maršrutus, apstrādātu lietotāju ievades un izveidotu dinamiskas lapas, nepaļaujoties uz trešo pušu bibliotēkām. Turklāt to ir viegli palielināt, jo jaunu maršrutu pievienošana ir tikpat vienkārša kā jaunas lapas, piemēram, about.js, pievienošana lapu direktorijam.
- API galapunkti: Next.js nodrošina iebūvētu atbalstu servera puses iespējām, ko izmanto, lai izveidotu API galapunktus, kas pārvalda HTTP pieprasījumus un atgriež datus. Tādējādi ir viegli izveidot aizmugursistēmas funkcionalitāti, neuzstādot atsevišķu serveri, izmantojot īpašu aizmugursistēmas sistēmu, piemēram, Express. Tomēr ir svarīgi atzīmēt, ka Next.js galvenokārt ir priekšgala tīmekļa ietvars.
Iestatiet MongoDB datu bāzi
Lai sāktu, izveidot MongoDB datu bāzi. Varat arī ātri izveidot MongoDB datu bāzi, izmantojot MongoDB klastera konfigurēšana mākonī bez maksas. Kad datu bāze ir izveidota un darbojas, kopējiet datu bāzes savienojuma URI virkni.
Jūs varat atrast šī projekta kodu GitHub repozitorijs.
Iestatiet Next.js projektu
Izveidojiet direktoriju jaunam projektam un cd tajā:
mkdir nextjs-projekts
cd nextjs-projektsPēc tam instalējiet Next.js:
npx create-next-app nextjs-mongodbKad instalēšanas process ir pabeigts, instalējiet Mongoose kā atkarību.
npm instalēt mongooseVisbeidzot, sava projekta saknes direktorijā izveidojiet jaunu .env failu, kurā būs jūsu datu bāzes savienojuma virkne.
NEXT_PUBLIC_MONGO_URI = "datu bāzes URI savienojuma virkne"Konfigurējiet datu bāzes savienojumu
Iekš src direktorijā, izveidojiet jaunu mapi un piešķiriet tai nosaukumu utils. Šajā mapē izveidojiet jaunu failu ar nosaukumu dbConfig.js un pievienojiet tam šādu kodu:
imports mangusts no'mangusts';konst savienot Mongo = asinhrons () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
eksportētnoklusējuma savienot Mongo;
Definējiet datu modeļus
Datu modeļi definē saglabājamo datu struktūru, tostarp datu veidus un attiecības starp datiem.
MongoDB saglabā datus JSON līdzīgos dokumentos, jo tas ir a NoSQL datu bāze. Mongoose nodrošina veidu, kā definēt, kā dati no Next.js klientiem ir jāuzglabā un kā tiem vajadzētu piekļūt no datu bāzes.
Src direktorijā izveidojiet jaunu mapi un nosaukumu modeļos. Šajā mapē izveidojiet jaunu failu ar nosaukumu userModel.js, un pievienojiet tālāk norādīto kodu:
imports { Shēma, modelis, modeļi } no'mangusts';konst userSchema = jauns Shēma({
nosaukums: Stīga,
e-pasts: {
veids: Stīga,
nepieciešams: taisnība,
unikāls: taisnība,
},
});konst Lietotājs = modeļi. Lietotājs || modelis ('Lietotājs', userSchema);
eksportētnoklusējuma Lietotājs;
Izveidojiet API galapunktus
Atšķirībā no citiem priekšgala ietvariem, Next.js nodrošina iebūvētu atbalstu API pārvaldībai. Tas vienkāršo API izveides procesu, jo varat tos definēt tieši Next.js projektā, nevis iestatīt atsevišķu serveri.
Kad esat definējis API maršrutus lapas/api direktorijā, Next.js ģenerē API galapunktus katram failam šajā direktorijā. Piemēram, ja izveidojat userV1/user.js, Next.js izveidos galapunktu, kas pieejams vietnē http://localhost: 3000/api/userV1/user.
Iekšpusē lapas/api, izveidojiet jaunu mapi un nosauciet to userV1. Šajā mapē izveidojiet jaunu failu ar nosaukumu user.jsun pievienojiet tālāk norādīto kodu:
imports savienot Mongo no'../../../utils/dbConfig';
imports Lietotājs no"../../../models/userModel";/**
* @param {imports('Nākamais').NextApiRequest} req
* @param {imports('Nākamais').NextApiResponse} res
*/
eksportētnoklusējumaasinhronsfunkcijuuserAPI(req, res) {
mēģināt {
konsole.log("PIEVIENOJUMS AR MONGO");
gaidīt savienot Mongo();
konsole.log(“PIEVIENOTS AR MONGO”);
ja (req.metode 'POST') {
konsole.log('DOKUMENTA VEIDOŠANA');
konst izveidotsLietotājs = gaidīt User.create (req.body);
konsole.log('IZVEIDOTS DOKUMENTS');
res.json({izveidotaisLietotājs});
} citsja (req.metode 'GŪT') {
konsole.log("DOKUMENTU IEŅEMŠANA");
konst fetchedUsers = gaidīt User.find({});
konsole.log('IEŅEMTIE DOKUMENTI');
res.json({ fetchedUsers});
} cits {
mestjaunsKļūda(`Neatbalstīta HTTP metode: ${req.method}`);
}
} noķert (kļūda) {
konsole.log (kļūda);
res.json ({ kļūda });
}
}
Šis kods ievieš API galapunktu lietotāja datu glabāšanai un iegūšanai no MongoDB datu bāzes. Tas definē a userAPI funkcija, kas aizņem divus parametrus: req un res. Tie atspoguļo attiecīgi ienākošo HTTP pieprasījumu un izejošo HTTP atbildi.
Funkcijā kods izveido savienojumu ar MongoDB datu bāzi un pārbauda ienākošā pieprasījuma HTTP metodi.
Ja metode ir POST pieprasījums, kods izveido jaunu lietotāja dokumentu datu bāzē, izmantojot izveidot metodi. Un otrādi, ja tas ir a GŪT pieprasījuma kods ienes visus lietotāja dokumentus no datu bāzes.
API galapunktu izmantošana
Pievienojiet zemāk esošo kodu pages/index.js fails:
- Veiciet POST pieprasījumu API galapunktam, lai saglabātu datus datu bāzē.
imports stilus no"@/styles/Home.module.css";
imports { useState } no'reaģēt';eksportētnoklusējumafunkcijuMājas() {
konst [nosaukums, setName] = useState('');
konst [email, setEmail] = useState('');
konst [usersResults, setUsersResults] = useState([]);konst CreateUser = asinhrons () => {
mēģināt {
konst izveidotsLietotājs = gaidīt atnest('/api/userV1/user', {
metode: 'POST',
galvenes: {
"Satura veids": "aplikācija/json",
},
korpuss: JSON.stringify({
vārds,
e-pasts,
}),
}).tad((res) => res.json());
konsole.log('IZVEIDOTS DOKUMENTS');setName('');
setEmail('');konsole.log (createdUser);
} noķert (kļūda) {
konsole.log (kļūda);
}
}; - Definējiet funkciju lietotāja datu iegūšanai, veicot HTTP pieprasījumus GET galapunktam.
konst displayUsers = asinhrons () => {
mēģināt {
konsole.log("DOKUMENTU IEŅEMŠANA");
konst fetchedUsers = gaidīt atnest('/api/userV1/user').tad((res) =>
res.json()
);
konsole.log('IEŅEMTIE DOKUMENTI');
setUsersResults (fetchedUsers);
konsole.log (usersResults)
} noķert (kļūda) {
konsole.log (kļūda);
}
}; - Visbeidzot, renderējiet veidlapas elementu ar teksta ievades laukiem un iesniedziet un parādiet lietotāja datu pogas.
atgriezties (
<>
Visbeidzot, turpiniet un pagrieziet izstrādes serveri, lai atjauninātu izmaiņas un pārietu uz http://localhost: 3000 savā pārlūkprogrammā.
npm palaist devNext.js izmantošana lietojumprogrammās
Next.js ir lieliska iespēja lielisku tīmekļa lietojumprogrammu izveidei neatkarīgi no tā, vai strādājat pie blakusprojekta vai liela mēroga tīmekļa risinājuma. Tas piedāvā virkni funkciju un iespēju, kas racionalizē veiktspējīgu un mērogojamu produktu izveides procesu.
Lai gan tas galvenokārt ir spēcīgs klienta puses ietvars, varat arī izmantot tā servera puses iespējas, lai ātri izveidotu aizmugures pakalpojumu.
