Atraskite „Mongoose“ galią ir kaip galite ją naudoti tvarkydami paprastos žiniatinklio programos duomenis.

Next.js yra universali pilno „JavaScript“ sistema, sukurta ant „React“, palaikanti pagrindines jos funkcijas, pvz., JSX, komponentus ir kabliukus. Kai kurios pagrindinės Next.js funkcijos apima failais pagrįstą maršruto parinkimą, CSS JS ir serverio pusės atvaizdavimą.

Viena iš svarbių Next.js galimybių yra galimybė sklandžiai integruotis su įvairiomis užpakalinėmis technologijomis, tokiomis kaip „Mongoose“, todėl galite lengvai ir efektyviai valdyti duomenis.

Naudodami Mongoose galite lengvai apibrėžti našią REST API iš Next.js programos, kad išsaugotumėte ir gautumėte duomenis iš MongoDB duomenų bazės.

Next.js: „Full-Stack JavaScript Framework“.

Skirtingai nuo React, Next.js yra laikomas pilnu žiniatinklio pagrindu, nes jis suteikia išsamų sprendimą serverio pusėje pateikiamoms žiniatinklio programoms kurti.

Taip yra todėl, kad jame yra funkcijų, kurios leidžia dirbti tiek su priekine, tiek su galine programos dalimi iš vieno projekto katalogo. Nebūtinai turite nustatyti atskirą galinio projekto aplanką, kad galėtumėte įdiegti serverio funkcijas, ypač mažos apimties programoms.

instagram viewer

Tačiau, nepaisant to, kad Next.js tvarko tam tikras vidines funkcijas, kad sukurtumėte didelio masto, visos krūvos programas, galbūt norėsite ją sujungti su specialia vidinės sistemos sistema, tokia kaip Express.

Kai kurios pagrindinės funkcijos, suteikiančios „Next.js“ visą krūvą, yra šios:

  • Serverio atvaizdavimas: „Next.js“ teikia integruotą serverio atvaizdavimo galimybių palaikymą. Iš esmės tai reiškia, kad kai klientas siunčia HTTP užklausas serveriui, serveris apdoroja užklausas ir atsako pateikdamas reikiamą HTML turinį kiekvienam puslapiui, kuris turi būti pateiktas naršyklėje.
  • Maršruto parinkimas: Next.js naudoja puslapiais pagrįstą maršruto parinkimo sistemą, kad nustatytų ir tvarkytų skirtingus maršrutus, tvarkytų vartotojų įvestis ir sukurtų dinamiškus puslapius, nepasikliaujant trečiųjų šalių bibliotekomis. Be to, jį lengva padidinti, nes pridėti naujų maršrutų yra taip paprasta, kaip į puslapių katalogą įtraukti naują puslapį, pvz., about.js.
  • API galutiniai taškai: „Next.js“ teikia integruotą palaikymą serverio pusės galimybėms, kurios naudojamos kuriant API galinius taškus, kurie valdo HTTP užklausas ir grąžina duomenis. Tai leidžia lengvai sukurti pagrindines funkcijas, nereikia nustatyti atskiro serverio naudojant specialią pagrindinę sistemą, pvz., Express. Tačiau svarbu pažymėti, kad Next.js pirmiausia yra priekinė žiniatinklio sistema.

Sukurkite MongoDB duomenų bazę

Pradėti, sukurti MongoDB duomenų bazę. Arba galite greitai sukurti MongoDB duomenų bazę nemokamai konfigūruoti MongoDB klasterį debesyje. Sukūrę ir paleidę duomenų bazę, nukopijuokite duomenų bazės ryšio URI eilutę.

Šio projekto kodą rasite čia GitHub saugykla.

Sukurkite Next.js projektą

Sukurkite katalogą naujam projektui ir cd tuo susidomėjęs:

mkdir nextjs-projektas
cd nextjs-projektas

Tada įdiekite Next.js:

npx Create-next-app nextjs-mongodb

Kai diegimo procesas bus baigtas, įdiekite „Mongoose“ kaip priklausomybę.

npm įdiegti mongoose

Galiausiai savo projekto šakniniame kataloge sukurkite naują .env failą, kuriame bus jūsų duomenų bazės ryšio eilutė.

NEXT_PUBLIC_MONGO_URI = "duomenų bazės URI ryšio eilutė"

Sukonfigūruokite duomenų bazės ryšį

Viduje src kataloge, sukurkite naują aplanką ir pavadinkite jį utils. Šiame aplanke sukurkite naują failą pavadinimu dbConfig.js ir pridėkite prie jo šį kodą:

importuoti mangustas iš"mangustas";
konst prisijungti Mongo = async () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
eksportuotinumatytas prisijungti Mongo;

Apibrėžkite duomenų modelius

Duomenų modeliai apibrėžia duomenų, kurie bus saugomi, struktūrą, įskaitant duomenų tipus ir ryšius tarp duomenų.

„MongoDB“ saugo duomenis į JSON panašiuose dokumentuose, nes tai yra a NoSQL duomenų bazė. „Mongoose“ suteikia galimybę apibrėžti, kaip duomenys iš Next.js klientų turėtų būti saugomi ir pasiekiami iš duomenų bazės.

Src kataloge sukurkite naują aplanką ir pavadinimą modeliuose. Šiame aplanke sukurkite naują failą pavadinimu userModel.js, ir pridėkite žemiau esantį kodą:

importuoti { Schema, modelis, modeliai } iš"mangustas";
konst userSchema = naujas Schema({
 vardas: Styga,
 paštas: {
 tipas: Styga,
 reikalingas: tiesa,
 Unikalus: tiesa,
 },
});


konst Vartotojas = modeliai. Vartotojas || modelis('Vartotojas', vartotojoSchema);
eksportuotinumatytas Vartotojas;

Sukurkite API galutinius taškus

Skirtingai nuo kitų priekinių sistemų, Next.js teikia integruotą API valdymo palaikymą. Tai supaprastina API kūrimo procesą, nes galite jas apibrėžti tiesiogiai Next.js projekte, užuot nustatę atskirą serverį.

Kai apibrėžiate API maršrutus puslapių/api kataloge, Next.js sugeneruoja API galinius taškus kiekvienam šio katalogo failui. Pavyzdžiui, jei kuriate userV1/user.js, Next.js sukurs galinį tašką, pasiekiamą adresu http://localhost: 3000/api/userV1/user.

Viduje puslapiai/api, sukurkite naują aplanką ir pavadinkite jį userV1. Šiame aplanke sukurkite naują failą pavadinimu user.jsir pridėkite žemiau esantį kodą:

importuoti prisijungti Mongo iš„../../../utils/dbConfig“;
importuoti Vartotojas iš„../../../models/userModel“;
/**
 * @param {importuoti('Kitas').NextApiRequest} req
 * @param {importuoti('Kitas').NextApiResponse} res
 */
eksportuotinumatytasasyncfunkcijavartotojo API(req, res) {
bandyti {
konsolė.log(„PRISIJUNGIMAS PRIE MONGO“);
laukti prisijungti Mongo ();
konsolė.log(„PRISIJUNGTA PRIE MONGO“);
jeigu (req.metod „PASKELBTI“) {
konsolė.log('KURIAMAS DOKUMENTAS');
konst sukurtasVartotojas = laukti User.create (req.body);
konsolė.log(„SUKURTAS DOKUMENTAS“);
 res.json({sukurtasVartotojas });
 } Kitasjeigu (req.metod „GAUTI“) {
konsolė.log(DOKUMENTŲ ATVEŽIMAS);
konst fetchedUsers = laukti User.find({});
konsolė.log('ATGAUTI DOKUMENTAI');
 res.json({ fetchedUsers });
 } Kitas {
mestinaujasKlaida(`Nepalaikomas HTTP metodas: ${req.method}`);
 }
 } sugauti (klaida) {
konsolė.log (klaida);
 res.json({ klaida });
 }
}

Šis kodas įgyvendina API galutinį tašką, skirtą vartotojo duomenims saugoti ir gauti iš MongoDB duomenų bazės. Ji apibrėžia a vartotojo API funkcija, kuri užima du parametrus: req ir res. Tai atitinkamai reiškia gaunamą HTTP užklausą ir siunčiamą HTTP atsakymą.

Funkcijos viduje kodas prisijungia prie MongoDB duomenų bazės ir patikrina gaunamos užklausos HTTP metodą.

Jei metodas yra POST užklausa, kodas sukuria naują vartotojo dokumentą duomenų bazėje, naudodamas sukurti metodas. Ir atvirkščiai, jei tai yra a GAUTI užklausą, kodas paima visus vartotojo dokumentus iš duomenų bazės.

API galinių taškų naudojimas

Pridėkite žemiau esantį kodą prie pages/index.js failas:

  • Pateikite POST užklausą API galutiniam taškui, kad duomenys būtų saugomi duomenų bazėje.
    importuoti stiliai iš„@/styles/Home.module.css“;
    importuoti { useState } iš'reaguoti';
    eksportuotinumatytasfunkcijaNamai() {
    konst [vardas, setName] = useState('');
    konst [email, setEmail] = useState('');
    konst [usersResults, setUsersResults] = useState([]);
    

    konst CreateUser = async () => {
    bandyti {
    konst sukurtasVartotojas = laukti atnešti („/api/userV1/user“, {
     metodas: „PASKELBTI“,
     antraštės: {
    'Turinio tipas': „application/json“,
     },
     kūnas: JSON.stringify({
     vardas,
     paštas,
     }),
     }).tada ((res) => res.json());
    konsolė.log(„SUKURTAS DOKUMENTAS“);
    

     setName('');
     setEmail('');
    konsolė.log (createdUser);
     } sugauti (klaida) {
    konsolė.log (klaida);
     }
     };
  • Apibrėžkite funkciją, skirtą vartotojo duomenims gauti, pateikiant HTTP užklausas į GET galutinį tašką.
    konst displayUsers = async () => {
    bandyti {
    konsolė.log(DOKUMENTŲ ATVEŽIMAS);
    konst fetchedUsers = laukti atnešti („/api/userV1/user“).tada ((res) =>
     res.json()
     );
    konsolė.log('ATGAUTI DOKUMENTAI');

     setUsersResults (fetchedUsers);
    konsolė.log (naudotojų rezultatai)

     } sugauti (klaida) {
    konsolė.log (klaida);
     }
     };
  • Galiausiai atvaizduokite formos elementą su teksto įvesties laukais ir pateikite bei parodykite vartotojo duomenų mygtukus.
    grąžinti (
     <>

Galiausiai eikite į priekį ir sukite kūrimo serverį, kad atnaujintumėte pakeitimus ir pereitumėte prie http://localhost: 3000 savo naršyklėje.

npm paleisti dev

„Next.js“ naudojimas programoje

Next.js yra puiki galimybė kurti šaunias žiniatinklio programas, nesvarbu, ar dirbate su šalutiniu projektu, ar didelio masto žiniatinklio sprendimu. Jis siūlo daugybę funkcijų ir galimybių, kurios supaprastina našių ir keičiamo dydžio produktų kūrimo procesą.

Nors tai pirmiausia yra patikima kliento sistema, taip pat galite pasinaudoti jos serverio galimybėmis, kad greitai sukurtumėte pagrindinę paslaugą.