Odkrijte moč Mongoose in kako jo lahko uporabite za upravljanje podatkov za preprosto spletno aplikacijo.

Next.js je vsestransko ogrodje JavaScript s polnim skladom, ki je zgrajeno na vrhu Reacta in podpira njegove glavne funkcije, kot so JSX, komponente in kavlji. Nekatere osnovne funkcije Next.js vključujejo usmerjanje na podlagi datotek, CSS v JS in upodabljanje na strani strežnika.

Ena od pomembnih zmogljivosti Next.js je njegova zmožnost brezhibne integracije z različnimi zalednimi tehnologijami, kot je Mongoose, kar vam omogoča preprosto in učinkovito upravljanje podatkov.

Z Mongoose lahko preprosto definirate zmogljiv API REST iz aplikacije Next.js za shranjevanje in pridobivanje podatkov iz baze podatkov MongoDB.

Next.js: ogrodje JavaScript s polnim skladom

Za razliko od Reacta Next.js velja za spletno ogrodje s polnim skladom, ker zagotavlja popolno rešitev za gradnjo spletnih aplikacij, upodobljenih na strani strežnika.

To je zato, ker ponuja funkcije, ki omogočajo delo na sprednji in zadnji strani aplikacije iz enega imenika projekta. Za implementacijo funkcionalnosti na strani strežnika vam ni treba nujno nastaviti ločene projektne mape v ozadju, zlasti za aplikacije majhnega obsega.

instagram viewer

Ne glede na to, da Next.js obravnava nekatere zaledne funkcije, ga boste morda želeli združiti z namenskim zalednim ogrodjem, kot je Express, za gradnjo obsežnih aplikacij s polnim skladom.

Nekatere osnovne funkcije, ki Next.js dajejo njegove zmogljivosti celotnega sklada, vključujejo:

  • Upodabljanje na strani strežnika: Next.js nudi vgrajeno podporo za zmožnosti upodabljanja na strani strežnika. V bistvu to pomeni, da ko odjemalec strežniku pošlje zahteve HTTP, strežnik obdela zahteve in se odzove z zahtevano vsebino HTML za vsako stran, ki bo upodobljena v brskalniku.
  • Usmerjanje: Next.js uporablja sistem usmerjanja na podlagi strani za definiranje in upravljanje različnih poti, obdelavo uporabniških vnosov in ustvarjanje dinamičnih strani, ne da bi se morali zanašati na knjižnice tretjih oseb. Poleg tega ga je enostavno povečati, saj je dodajanje novih poti tako preprosto kot dodajanje nove strani, kot je about.js, v imenik strani.
  • Končne točke API: Next.js ponuja vgrajeno podporo za zmogljivosti na strani strežnika, ki se uporabljajo za ustvarjanje končnih točk API, ki upravljajo zahteve HTTP in vračajo podatke. To olajša izgradnjo zaledne funkcionalnosti, ne da bi morali nastaviti ločen strežnik z uporabo namenskega zalednega ogrodja, kot je Express. Vendar je pomembno omeniti, da je Next.js predvsem sprednji spletni okvir.

Nastavite bazo podatkov MongoDB

Za začetek, nastavite bazo podatkov MongoDB. Druga možnost je, da lahko hitro zavrtite bazo podatkov MongoDB z brezplačno konfiguriranje gruče MongoDB v oblaku. Ko je baza podatkov pripravljena in zagnana, kopirajte niz URI povezave z bazo podatkov.

Tukaj lahko najdete kodo tega projekta Repozitorij GitHub.

Nastavite projekt Next.js

Ustvarite imenik za nov projekt in cd vanj:

mkdir nextjs-projekt
cd nextjs-projekt

Nato namestite Next.js:

npx create-next-app nextjs-mongodb

Ko je postopek namestitve končan, namestite Mongoose kot odvisnost.

npm namestite mongoose

Na koncu v korenskem imeniku vašega projekta ustvarite novo datoteko .env, ki bo vsebovala povezovalni niz vaše baze podatkov.

NEXT_PUBLIC_MONGO_URI = "povezavni niz URI zbirke podatkov"

Konfigurirajte povezavo z bazo podatkov

V src ustvarite novo mapo in jo poimenujte utils. Znotraj te mape ustvarite novo datoteko z imenom dbConfig.js in ji dodajte naslednjo kodo:

uvoz mungos od'mungos';
konst povežiMongo = asinh () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
izvozprivzeto connectMongo;

Definirajte podatkovne modele

Podatkovni modeli določajo strukturo podatkov, ki bodo shranjeni, vključno z vrstami podatkov in odnosi med podatki.

MongoDB shranjuje podatke v dokumente, podobne JSON, saj je Baza podatkov NoSQL. Mongoose ponuja način za definiranje, kako naj bodo podatki iz odjemalcev Next.js shranjeni in dostopni iz baze podatkov.

V imeniku src ustvarite novo mapo in ime v modelih. Znotraj te mape ustvarite novo datoteko z imenom userModel.js, in dodajte spodnjo kodo:

uvoz { Shema, model, modeli } od'mungos';
konst uporabniška shema = novo Shema({
 ime: Vrvica,
 E-naslov: {
 vrsta: Vrvica,
 obvezno: prav,
 edinstveno: prav,
 },
});


konst Uporabnik = modeli. Uporabnik || model('Uporabnik', uporabniška shema);
izvozprivzeto uporabnik;

Ustvarite končne točke API-ja

Za razliko od drugih sprednjih okvirov Next.js zagotavlja vgrajeno podporo za upravljanje API-jev. To poenostavi postopek ustvarjanja API-jev, saj jih lahko definirate neposredno v projektu Next.js, namesto da nastavite ločen strežnik.

Ko definirate poti API znotraj imenika pages/api, Next.js ustvari končne točke API za vsako datoteko v tem imeniku. Če na primer ustvarite userV1/user.js, bo Next.js ustvaril končno točko, dostopno na http://localhost: 3000/api/uporabnikV1/uporabnik.

Znotraj strani/api, ustvarite novo mapo in jo poimenujte userV1. Znotraj te mape ustvarite novo datoteko z imenom uporabnik.jsin dodajte spodnjo kodo:

uvoz povežiMongo od'../../../utils/dbConfig';
uvoz Uporabnik od'../../../models/userModel';
/**
 * @param {uvoz('Naslednji').NextApiRequest} req
 * @param {uvoz('Naslednji').NextApiResponse} res
 */
izvozprivzetoasinhfunkcijouporabniški API(zahteva, res) {
poskusi {
konzola.log('POVEZOVANJE Z MONGO');
čakati povežiMongo();
konzola.log('POVEZAN Z MONGO');
če (zahtevana metoda 'POST') {
konzola.log('USTVARJANJE DOKUMENTA');
konst createdUser = čakati User.create (req.body);
konzola.log('USTVARJEN DOKUMENT');
 res.json({ createdUser});
 } drugačeče (zahtevana metoda 'GET') {
konzola.log('PRIBANJE DOKUMENTOV');
konst fetchedUsers = čakati User.find({});
konzola.log('PRIDENI DOKUMENTI');
 res.json({fetchedUsers});
 } drugače {
metatinovoNapaka(`Nepodprta metoda HTTP: ${req.method}`);
 }
 } ulov (napaka) {
konzola.log (napaka);
 res.json({napaka});
 }
}

Ta koda implementira končno točko API za shranjevanje in pridobivanje uporabniških podatkov iz baze podatkov MongoDB. Določa a uporabniški API funkcija, ki sprejme dva parametra: zahtevano in res. Ti predstavljajo dohodno zahtevo HTTP oziroma odhodni odgovor HTTP.

Znotraj funkcije se koda poveže z bazo podatkov MongoDB in preveri metodo HTTP dohodne zahteve.

Če je metoda zahteva POST, koda ustvari nov uporabniški dokument v bazi podatkov z uporabo ustvariti metoda. Nasprotno, če je a DOBITI zahteva, koda pridobi vse uporabniške dokumente iz baze podatkov.

Uporaba končnih točk API-ja

Dodajte spodnjo kodo v pages/index.js mapa:

  • Izvedite zahtevo POST končni točki API za shranjevanje podatkov v zbirko podatkov.
    uvoz stilov od'@/styles/Home.module.css';
    uvoz {useState} od'reagirati';
    izvozprivzetofunkcijodomov() {
    konst [ime, setName] = useState('');
    konst [email, setEmail] = useState('');
    konst [usersResults, setUsersResults] = useState([]);
    

    konst createUser = asinh () => {
    poskusi {
    konst createdUser = čakati prinesi ('/api/userV1/user', {
     metoda: 'POST',
     glave: {
    'Content-Type': 'application/json',
     },
     telo: JSON.stringify({
     ime,
     E-naslov,
     }),
     }).potem((res) => res.json());
    konzola.log('USTVARJEN DOKUMENT');
    

     setName('');
     setEmail('');
    konzola.log (ustvarjenUporabnik);
     } ulov (napaka) {
    konzola.log (napaka);
     }
     };
  • Definirajte funkcijo za pridobivanje uporabniških podatkov s pošiljanjem zahtev HTTP končni točki GET.
    konst displayUsers = asinh () => {
    poskusi {
    konzola.log('PRIBANJE DOKUMENTOV');
    konst fetchedUsers = čakati prinesi ('/api/userV1/user').potem((res) =>
     res.json()
     );
    konzola.log('PRIDENI DOKUMENTI');

     setUsersResults (fetchedUsers);
    konzola.log (uporabnikiRezultati)

     } ulov (napaka) {
    konzola.log (napaka);
     }
     };
  • Na koncu upodobite element obrazca s polji za vnos besedila ter gumbe za pošiljanje in prikaz uporabniških podatkov.
    vrnitev (
     <>

Končno nadaljujte in zavrtite razvojni strežnik, da posodobite spremembe in se pomaknete do njega http://localhost: 3000 v vašem brskalniku.

npm run dev

Uporaba Next.js v aplikacijah

Next.js je fantastična možnost za izdelavo kul spletnih aplikacij, ne glede na to, ali delate na stranskem projektu ali obsežni spletni rešitvi. Ponuja vrsto funkcij in zmožnosti, ki poenostavijo proces ustvarjanja zmogljivih in razširljivih izdelkov.

Čeprav gre predvsem za robustno ogrodje na strani odjemalca, lahko uporabite tudi njegove zmogljivosti na strani strežnika za hitro vrtenje zaledne storitve.