Otkrijte snagu Mongoosea i kako ga možete koristiti za upravljanje podacima za jednostavnu web-aplikaciju.
Next.js je svestran JavaScript okvir s punim nizom koji je izgrađen na Reactu, podržavajući njegove glavne značajke kao što su JSX, komponente i kuke. Neke od temeljnih značajki Next.js uključuju usmjeravanje temeljeno na datotekama, CSS u JS-u i prikazivanje na strani poslužitelja.
Jedna značajna sposobnost Next.js-a je njegova sposobnost besprijekorne integracije s različitim pozadinskim tehnologijama kao što je Mongoose, što vam omogućuje jednostavno i učinkovito upravljanje podacima.
S Mongooseom možete jednostavno definirati učinkovit REST API iz Next.js aplikacije za pohranjivanje i dohvaćanje podataka iz MongoDB baze podataka.
Next.js: Full-Stack JavaScript Framework
Za razliku od Reacta, Next.js se smatra full-stack web frameworkom jer pruža cjelovito rješenje za izgradnju web aplikacija koje se prikazuju na strani poslužitelja.
To je zato što nudi značajke koje omogućuju rad na prednjem i stražnjem dijelu aplikacije iz jednog direktorija projekta. Ne morate nužno postaviti zasebnu pozadinsku mapu projekta za implementaciju funkcionalnosti na strani poslužitelja, posebno za male aplikacije.
Međutim, koliko god Next.js upravlja nekim pozadinskim funkcijama, za izgradnju velikih aplikacija s punim nizom, možda biste ga željeli kombinirati s namjenskim pozadinskim okvirom kao što je Express.
Neke od temeljnih značajki koje Next.js-u daju njegove pune mogućnosti uključuju:
- Iscrtavanje na strani poslužitelja: Next.js pruža ugrađenu podršku za mogućnosti iscrtavanja na strani poslužitelja. U biti to znači da nakon što klijent pošalje HTTP zahtjev poslužitelju, poslužitelj obrađuje zahtjeve i odgovara potrebnim HTML sadržajem za svaku stranicu koja se prikazuje u pregledniku.
- Usmjeravanje: Next.js koristi sustav usmjeravanja temeljen na stranicama za definiranje i upravljanje različitim rutama, rukovanje korisničkim unosima i stvaranje dinamičkih stranica bez oslanjanja na biblioteke trećih strana. Osim toga, lako ga je povećati jer je dodavanje novih ruta jednako jednostavno kao i dodavanje nove stranice kao što je about.js u direktorij stranica.
- API krajnje točke: Next.js pruža ugrađenu podršku za mogućnosti na strani poslužitelja koje se koriste za stvaranje API krajnjih točaka koje upravljaju HTTP zahtjevima i vraćaju podatke. To olakšava izgradnju pozadinske funkcionalnosti bez potrebe za postavljanjem zasebnog poslužitelja pomoću namjenskog pozadinskog okvira kao što je Express. Međutim, važno je napomenuti da je Next.js prvenstveno front-end web okvir.
Postavite MongoDB bazu podataka
Započeti, postaviti MongoDB bazu podataka. Alternativno, možete brzo pokrenuti MongoDB bazu podataka besplatno konfiguriranje MongoDB klastera u oblaku. Nakon što svoju bazu podataka pokrenete, kopirajte niz URI veze s bazom podataka.
Ovdje možete pronaći kod ovog projekta GitHub spremište.
Postavite Next.js projekt
Napravite imenik za novi projekt i CD u njega:
mkdir nextjs-projekt
cd nextjs-projektZatim instalirajte Next.js:
npx create-next-app nextjs-mongodbNakon završetka postupka instalacije, instalirajte Mongoose kao ovisnost.
npm instalirajte mongooseNa kraju, u korijenskom direktoriju vašeg projekta stvorite novu .env datoteku koja će sadržavati vaš niz veze s bazom podataka.
NEXT_PUBLIC_MONGO_URI = "niz veze URI baze podataka"Konfigurirajte vezu s bazom podataka
u src imenik, stvorite novu mapu i dajte joj naziv utils. Unutar ove mape stvorite novu datoteku pod nazivom dbConfig.js i dodajte mu sljedeći kod:
uvoz mungos iz'mungos';konst spojiMongo = asinkroni () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
izvozzadano spojiMongo;
Definirajte podatkovne modele
Podatkovni modeli definiraju strukturu podataka koji će biti pohranjeni, uključujući vrste podataka i odnose između podataka.
MongoDB pohranjuje podatke u dokumente slične JSON-u budući da je NoSQL baza podataka. Mongoose pruža način definiranja kako se podaci iz Next.js klijenata trebaju pohranjivati i kako im se pristupa iz baze podataka.
U direktoriju src kreirajte novu mapu i dajte joj naziv models. Unutar ove mape stvorite novu datoteku pod nazivom userModel.js, i dodajte kod ispod:
uvoz { Shema, model, modeli } iz'mungos';konst korisnička shema = novi Shema({
Ime: Niz,
email: {
tip: Niz,
potreban: pravi,
jedinstveno: pravi,
},
});konst Korisnik = modeli. Korisnik || model('Korisnik', korisnička shema);
izvozzadano Korisnik;
Stvorite krajnje točke API-ja
Za razliku od drugih front-end okvira, Next.js pruža ugrađenu podršku za upravljanje API-jem. Ovo pojednostavljuje proces stvaranja API-ja budući da ih možete definirati izravno u projektu Next.js umjesto postavljanja zasebnog poslužitelja.
Nakon što definirate API rute unutar pages/api direktorija, Next.js generira API krajnje točke za svaku od datoteka u ovom direktoriju. Na primjer, ako stvorite userV1/user.js, Next.js će stvoriti krajnju točku dostupnu na http://localhost: 3000/api/korisnikV1/korisnik.
Unutar stranice/api, stvorite novu mapu i nazovite je userV1. Unutar ove mape stvorite novu datoteku pod nazivom korisnik.js, i dodajte kod u nastavku:
uvoz spojiMongo iz'../../../utils/dbConfig';
uvoz Korisnik iz'../../../models/userModel';/**
* @param {uvoz('Sljedeći').NextApiRequest} req
* @param {uvoz('Sljedeći').NextApiResponse} res
*/
izvozzadanoasinkronifunkcijauserAPI(zahtjev, res) {
probati {
konzola.log('POVEZIVANJE NA MONGO');
čekati spojiMongo();
konzola.log('POVEZAN S MONGO');
ako (potrebna metoda 'POST') {
konzola.log('STVARANJE DOKUMENTA');
konst createdUser = čekati User.create (req.body);
konzola.log('KREIRANI DOKUMENT');
res.json({stvorenKorisnik});
} drugoako (potrebna metoda 'DOBITI') {
konzola.log('DOHVAĆANJE DOKUMENTA');
konst fetchedUsers = čekati User.find({});
konzola.log('PREUZETI DOKUMENTI');
res.json({fetchedUsers});
} drugo {
bacanjenoviGreška(`Nepodržana HTTP metoda: ${req.method}`);
}
} ulov (pogreška) {
konzola.log (greška);
res.json({greška});
}
}
Ovaj kod implementira API krajnju točku za pohranu i dohvaćanje korisničkih podataka iz MongoDB baze podataka. Definira a userAPI funkcija koja uzima dva parametra: zahtijevati i res. Oni predstavljaju dolazni HTTP zahtjev i odlazni HTTP odgovor.
Unutar funkcije, kod se povezuje s MongoDB bazom podataka i provjerava HTTP metodu dolaznog zahtjeva.
Ako je metoda POST zahtjev, kod stvara novi korisnički dokument u bazi podataka pomoću stvoriti metoda. Nasuprot tome, ako je a DOBITI zahtjev, kod dohvaća sve korisničke dokumente iz baze podataka.
Konzumiranje krajnjih točaka API-ja
Dodajte donji kod u stranice/index.js datoteka:
- Napravite POST zahtjev API krajnjoj točki za pohranu podataka u bazu podataka.
uvoz stilovi iz'@/styles/Home.module.css';
uvoz {useState} iz'reagirati';izvozzadanofunkcijaDom() {
konst [ime, setName] = useState('');
konst [e-pošta, setEmail] = useState('');
konst [usersResults, setUsersResults] = useState([]);konst createUser = asinkroni () => {
probati {
konst createdUser = čekati dohvati ('/api/userV1/user', {
metoda: 'POST',
zaglavlja: {
'Content-Type': 'application/json',
},
tijelo: JSON.stringify({
Ime,
email,
}),
}).zatim((res) => res.json());
konzola.log('KREIRANI DOKUMENT');setName('');
setEmail('');konzola.log (stvorenKorisnik);
} ulov (pogreška) {
konzola.log (greška);
}
}; - Definirajte funkciju za dohvaćanje korisničkih podataka slanjem HTTP zahtjeva GET krajnjoj točki.
konst displayUsers = asinkroni () => {
probati {
konzola.log('DOHVAĆANJE DOKUMENTA');
konst fetchedUsers = čekati dohvati ('/api/userV1/user').zatim((res) =>
res.json()
);
konzola.log('PREUZETI DOKUMENTI');
setUsersResults (fetchedUsers);
konzola.log (korisniciRezultati)
} ulov (pogreška) {
konzola.log (greška);
}
}; - Na kraju, generirajte element obrasca s poljima za unos teksta i gumbe za slanje i prikaz korisničkih podataka.
povratak (
<>
Na kraju, samo naprijed i zavrtite razvojni poslužitelj da ažurirate promjene i navigirate do njega http://localhost: 3000 u vašem pregledniku.
npm run devKorištenje Next.js u aplikacijama
Next.js je fantastična opcija za izradu cool web aplikacija, bilo da radite na sporednom projektu ili velikom web rješenju. Nudi niz značajki i mogućnosti koje usmjeravaju proces stvaranja učinkovitih i skalabilnih proizvoda.
Iako je prvenstveno robustan okvir na strani klijenta, također možete iskoristiti njegove mogućnosti na strani poslužitelja za brzo pokretanje pozadinske usluge.
