Descoperiți puterea Mongoose și cum o puteți utiliza pentru a gestiona datele pentru o aplicație web simplă.
Next.js este un cadru JavaScript complet versatil care este construit pe React, care acceptă principalele sale caracteristici, cum ar fi JSX, componente și cârlige. Unele dintre caracteristicile de bază ale Next.js includ rutarea bazată pe fișiere, CSS în JS și randarea pe server.
O capacitate semnificativă a Next.js este capacitatea sa de a se integra perfect cu diverse tehnologii backend, cum ar fi Mongoose, permițându-vă să gestionați cu ușurință datele în mod eficient.
Cu Mongoose, puteți defini cu ușurință un API REST performant dintr-o aplicație Next.js pentru a stoca și a prelua date dintr-o bază de date MongoDB.
Next.js: Un cadru JavaScript Full-Stack
Spre deosebire de React, Next.js este considerat un cadru web full-stack, deoarece oferă o soluție completă pentru construirea de aplicații web randate pe server.
Acest lucru se datorează faptului că oferă caracteristici care fac posibilă lucrul atât pe front-end, cât și pe back-end al unei aplicații dintr-un singur director de proiect. Nu trebuie neapărat să configurați un folder de proiect back-end separat pentru a implementa funcționalitatea serverului, în special pentru aplicațiile la scară mică.
Cu toate acestea, deși Next.js se ocupă de anumite funcționalități back-end, pentru a construi aplicații la scară largă, cu stivă completă, este posibil să doriți să le combinați cu un cadru backend dedicat, cum ar fi Express.
Unele dintre caracteristicile de bază care oferă Next.js capabilitățile sale complete includ:
- Redare pe partea serverului: Next.js oferă suport încorporat pentru capabilitățile de randare pe partea serverului. În esență, înseamnă că, odată ce un client trimite cereri HTTP către un server, serverul procesează cererile și răspunde cu conținutul HTML necesar pentru fiecare pagină care urmează să fie redată în browser.
- Rutare: Next.js folosește un sistem de rutare bazat pe pagini pentru a defini și gestiona diferite rute, pentru a gestiona intrările utilizatorilor și pentru a crea pagini dinamice fără a fi nevoie să se bazeze pe biblioteci terțe. În plus, este ușor de extins, deoarece adăugarea de noi rute este la fel de simplă ca și adăugarea unei pagini noi, cum ar fi about.js, în directorul paginilor.
- Puncte finale API: Next.js oferă suport încorporat pentru capabilitățile de pe partea serverului, care sunt utilizate pentru a crea puncte finale API care gestionează cererile HTTP și returnează date. Acest lucru facilitează construirea funcționalității back-end fără a fi nevoie să configurați un server separat folosind un cadru backend dedicat, cum ar fi Express. Cu toate acestea, este important să rețineți că Next.js este în primul rând un cadru web front-end.
Configurați o bază de date MongoDB
Pentru a incepe, configurați o bază de date MongoDB. Alternativ, puteți învârti rapid o bază de date MongoDB prin configurarea gratuită a unui cluster MongoDB în cloud. După ce aveți baza de date în funcțiune, copiați șirul URI al conexiunii la baza de date.
Puteți găsi codul acestui proiect în aceasta Depozitul GitHub.
Configurați un proiect Next.js
Creați un director pentru un nou proiect și CD în ea:
mkdir nextjs-proiect
cd nextjs-proiectApoi instalați Next.js:
npx create-next-app nextjs-mongodbDupă finalizarea procesului de instalare, instalați Mongoose ca dependență.
npm instalează mangustaÎn cele din urmă, în directorul rădăcină al proiectului, creați un nou fișier .env pentru a păstra șirul de conexiune la baza de date.
NEXT_PUBLIC_MONGO_URI = „șir de conexiune URI bază de date”Configurați conexiunea la baza de date
În src director, creați un folder nou și denumiți-l utilitare. În acest folder, creați un fișier nou numit dbConfig.js și adăugați următorul cod la el:
import mangustă din'mangustă';const connectMongo = asincron () => mangusta.connect (process.env. NEXT_PUBLIC_MONGO_URI);
exportMod implicit connectMongo;
Definiți modelele de date
Modelele de date definesc structura datelor care vor fi stocate, inclusiv tipurile de date și relațiile dintre date.
MongoDB stochează date în documente asemănătoare JSON, deoarece este un Baza de date NoSQL. Mongoose oferă o modalitate de a defini modul în care datele de la clienții Next.js ar trebui să fie stocate și accesate din baza de date.
În directorul src, creați un folder și un nume nou în modele. În acest folder, creați un fișier nou numit userModel.js, si adauga codul de mai jos:
import { Schema, model, modele } din'mangustă';const userSchema = nou Schemă({
Nume: Şir,
e-mail: {
tip: Şir,
necesar: Adevărat,
unic: Adevărat,
},
});const Utilizator = modele. Utilizator || model('Utilizator', userSchema);
exportMod implicit Utilizator;
Creați punctele finale API
Spre deosebire de alte framework-uri front-end, Next.js oferă suport încorporat pentru managementul API. Acest lucru simplifică procesul de creare a API-urilor, deoarece le puteți defini direct în proiectul Next.js, în loc să configurați un server separat.
Odată ce ați definit rutele API în directorul pagini/api, Next.js generează puncte finale API pentru fiecare dintre fișierele din acest director. De exemplu, dacă creați userV1/user.js, Next.js va crea un punct final accesibil la http://localhost: 3000/api/userV1/user.
În interiorul pagini/api, creați un folder nou și numiți-l userV1. În acest folder, creați un fișier nou numit user.jsși adăugați codul de mai jos:
import connectMongo din„../../../utils/dbConfig”;
import Utilizator din„../../../models/userModel”;/**
* @param {import('Următorul').NextApiRequest} solicitare
* @param {import('Următorul').NextApiResponse} res
*/
exportMod implicitasincronfuncţieuserAPI(cerere, res) {
încerca {
consolă.Buturuga(„CONECTAREA LA MONGO”);
așteaptă connectMongo();
consolă.Buturuga(„CONECTAT LA MONGO”);
dacă (metoda solicitată 'POST') {
consolă.Buturuga(„CREAREA DOCUMENTULUI”);
const createUser = așteaptă User.create (req.body);
consolă.Buturuga(„DOCUMENT CREAT”);
res.json({ createUser });
} altfeldacă (metoda solicitată 'OBȚINE') {
consolă.Buturuga(„Preluarea documentelor”);
const fetchedUsers = așteaptă User.find({});
consolă.Buturuga(„DOCUMENTE ADUCE”);
res.json({ fetchedUsers });
} altfel {
aruncanouEroare(`Metoda HTTP neacceptată: ${req.method}`);
}
} captură (eroare) {
consolă.log (eroare);
res.json({ eroare });
}
}
Acest cod implementează un punct final API pentru stocarea și preluarea datelor utilizatorului dintr-o bază de date MongoDB. Acesta definește a userAPI funcție care ia doi parametri: solicitat și res. Acestea reprezintă cererea HTTP de intrare și, respectiv, răspunsul HTTP de ieșire.
În interiorul funcției, codul se conectează la baza de date MongoDB și verifică metoda HTTP a cererii primite.
Dacă metoda este o solicitare POST, codul creează un nou document de utilizator în baza de date folosind crea metodă. Dimpotrivă, dacă este un OBȚINE cerere, codul preia toate documentele utilizatorului din baza de date.
Utilizarea punctelor finale API
Adăugați codul de mai jos la pages/index.js fişier:
- Efectuați o solicitare POST către punctul final API pentru a stoca date în baza de date.
import stiluri din„@/styles/Home.module.css”;
import { useState } din'reacţiona';exportMod implicitfuncţieAcasă() {
const [nume, setName] = useState('');
const [email, setEmail] = useState('');
const [usersResults, setUsersResults] = useState([]);const createUser = asincron () => {
încerca {
const createUser = așteaptă aduce(„/api/userV1/user”, {
metodă: 'POST',
antete: {
'Tipul de conținut': „aplicație/json”,
},
corp: JSON.stringify({
Nume,
e-mail,
}),
}).apoi((res) => res.json());
consolă.Buturuga(„DOCUMENT CREAT”);Pune un nume('');
setEmail('');consolă.log (createdUser);
} captură (eroare) {
consolă.log (eroare);
}
}; - Definiți o funcție pentru a prelua datele utilizatorului făcând solicitări HTTP către punctul final GET.
const displayUsers = asincron () => {
încerca {
consolă.Buturuga(„Preluarea documentelor”);
const fetchedUsers = așteaptă aduce(„/api/userV1/user”).apoi((res) =>
res.json()
);
consolă.Buturuga(„DOCUMENTE ADUCE”);
setUsersResults (fetchedUsers);
consolă.log (usersResults)
} captură (eroare) {
consolă.log (eroare);
}
}; - În cele din urmă, redați un element de formular cu câmpuri de introducere a textului și trimiteți și afișați butoanele pentru datele utilizatorului.
întoarcere (
<>
În cele din urmă, mergeți mai departe și porniți serverul de dezvoltare pentru a actualiza modificările și navigați la http://localhost: 3000 în browserul dvs.
npm run devUtilizarea Next.js în aplicații
Next.js este o opțiune fantastică pentru construirea de aplicații web interesante, indiferent dacă lucrați la un proiect secundar sau la o soluție web la scară largă. Oferă o gamă de caracteristici și capabilități care simplifică procesul de creare a produselor performante și scalabile.
Deși este în primul rând un cadru robust pe partea clientului, puteți utiliza și capabilitățile sale de pe partea serverului pentru a activa rapid un serviciu de backend.
