Tutustu Mongoosen voimaan ja siihen, kuinka voit käyttää sitä yksinkertaisen verkkosovelluksen tietojen hallintaan.
Next.js on monipuolinen täyden pinon JavaScript-kehys, joka on rakennettu Reactin päälle ja tukee sen pääominaisuuksia, kuten JSX: ää, komponentteja ja koukkuja. Jotkut Next.js: n ydinominaisuuksista ovat tiedostopohjainen reititys, CSS JS: ssä ja palvelinpuolen renderöinti.
Yksi merkittävä Next.js: n ominaisuus on sen kyky integroitua saumattomasti eri taustateknologioihin, kuten Mongooseen, mikä mahdollistaa tietojen helpon hallinnan tehokkaasti.
Mongoosen avulla voit helposti määrittää suorituskykyisen REST API: n Next.js-sovelluksesta tietojen tallentamiseksi ja hakemiseksi MongoDB-tietokannasta.
Next.js: Full-stack JavaScript Framework
Toisin kuin React, Next.js: ää pidetään täyden pinon verkkokehyksenä, koska se tarjoaa täydellisen ratkaisun palvelinpuolen renderöityjen verkkosovellusten rakentamiseen.
Tämä johtuu siitä, että se tarjoaa ominaisuuksia, jotka mahdollistavat työskentelyn sekä sovelluksen etu- että takapäässä yhdestä projektihakemistosta. Sinun ei välttämättä tarvitse perustaa erillistä taustaprojektikansiota palvelinpuolen toiminnallisuuden toteuttamiseksi, etenkään pienimuotoisissa sovelluksissa.
Kuitenkin niin paljon kuin Next.js käsittelee joitain taustatoimintoja, suuren mittakaavan täyden pinon sovellusten rakentamiseksi kannattaa ehkä yhdistää se erityiseen taustajärjestelmään, kuten Express.
Jotkut ydinominaisuuksista, jotka antavat Next.js: lle sen täyden pinon ominaisuudet, ovat:
- Palvelinpuolen renderöinti: Next.js tarjoaa sisäänrakennetun tuen palvelinpuolen renderöintiominaisuuksille. Pohjimmiltaan se tarkoittaa sitä, että kun asiakas lähettää HTTP-pyynnöt palvelimelle, palvelin käsittelee pyynnöt ja vastaa vaaditulla HTML-sisällöllä jokaiselle selaimella hahmonnettavalle sivulle.
- Reititys: Next.js käyttää sivupohjaista reititysjärjestelmää erilaisten reittien määrittämiseen ja hallitsemiseen, käyttäjien syötteiden käsittelemiseen ja dynaamisten sivujen luomiseen ilman, että sinun tarvitsee luottaa kolmannen osapuolen kirjastoihin. Lisäksi sitä on helppo skaalata, koska uusien reittien lisääminen on yhtä helppoa kuin uuden sivun, kuten about.js, lisääminen sivujen hakemistoon.
- API-päätepisteet: Next.js tarjoaa sisäänrakennetun tuen palvelinpuolen ominaisuuksille, joita käytetään luomaan API-päätepisteitä, jotka hallitsevat HTTP-pyyntöjä ja palauttavat tietoja. Tämän ansiosta taustatoimintojen rakentaminen on helppoa ilman erillistä palvelinta käyttämällä erityistä taustajärjestelmää, kuten Express. On kuitenkin tärkeää huomata, että Next.js on ensisijaisesti käyttöliittymän verkkokehys.
Luo MongoDB-tietokanta
Aloita perustaa MongoDB-tietokanta. Vaihtoehtoisesti voit nopeasti luoda MongoDB-tietokannan MongoDB-klusterin määrittäminen pilveen ilmaiseksi. Kun tietokanta on valmis, kopioi tietokantayhteyden URI-merkkijono.
Löydät tämän projektin koodin tästä GitHub-arkisto.
Määritä Next.js-projekti
Luo hakemisto uudelle projektille ja CD siihen:
mkdir nextjs-projekti
cd nextjs-projektiAsenna sitten Next.js:
npx create-next-app nextjs-mongodbKun asennusprosessi on valmis, asenna Mongoose riippuvuutena.
npm asentaa mongooseLuo lopuksi projektisi juurihakemistoon uusi .env-tiedosto tietokantayhteysmerkkijonoa varten.
NEXT_PUBLIC_MONGO_URI = "tietokannan URI-yhteysmerkkijono"Määritä tietokantayhteys
Vuonna src hakemistoon, luo uusi kansio ja anna sille nimi käyttö. Luo tähän kansioon uusi tiedosto nimeltä dbConfig.js ja lisää siihen seuraava koodi:
tuonti mungo alkaen'mungo';konst yhdistä Mongo = asynk () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
viedäoletuksena yhdistä Mongo;
Määritä tietomallit
Tietomallit määrittelevät tallennettavien tietojen rakenteen, mukaan lukien tietotyypit ja tietojen väliset suhteet.
MongoDB tallentaa tiedot JSON-tyyppisiin asiakirjoihin, koska se on a NoSQL-tietokanta. Mongoose tarjoaa tavan määrittää, kuinka Next.js-asiakkaiden tiedot tallennetaan ja miten niitä käytetään tietokannasta.
Luo src-hakemistoon uusi kansio ja nimi malleihin. Luo tähän kansioon uusi tiedosto nimeltä userModel.js, ja lisää alla oleva koodi:
tuonti { Kaavio, malli, mallit } alkaen'mungo';konst userSchema = Uusi Schema({
nimi: merkkijono,
sähköposti: {
tyyppi: merkkijono,
edellytetään: totta,
ainutlaatuinen: totta,
},
});konst Käyttäjä = mallit. Käyttäjä || malli("Käyttäjä", userSchema);
viedäoletuksena Käyttäjä;
Luo API-päätepisteet
Toisin kuin muut käyttöliittymäkehykset, Next.js tarjoaa sisäänrakennetun tuen API-hallintaan. Tämä yksinkertaistaa API: iden luontiprosessia, koska voit määrittää ne suoraan Next.js-projektissa erillisen palvelimen perustamisen sijaan.
Kun olet määrittänyt API-reitit pages/api-hakemistossa, Next.js luo API-päätepisteet jokaiselle tämän hakemiston tiedostolle. Jos esimerkiksi luot userV1/user.js, Next.js luo päätepisteen, joka on käytettävissä osoitteessa http://localhost: 3000/api/userV1/user.
Sisällä sivut/api, luo uusi kansio ja anna sille nimi userV1. Luo tähän kansioon uusi tiedosto nimeltä user.jsja lisää alla oleva koodi:
tuonti yhdistä Mongoon alkaen'../../../utils/dbConfig';
tuonti Käyttäjä alkaen'../../../models/userModel';/**
* @param {tuonti('Seuraava').NextApiRequest} req
* @param {tuonti('Seuraava').NextApiResponse} res
*/
viedäoletuksenaasynktoimintouserAPI(req, res) {
yrittää {
konsoli.Hirsi("YHTEYTTÄ MONGOON");
odottaa yhdistäMongo();
konsoli.Hirsi('YHDISTETTY MONGOON');
jos (tarvittava menetelmä 'LÄHETTÄÄ') {
konsoli.Hirsi('LUODAAN ASIAKIRJAA');
konst luotuKäyttäjä = odottaa User.create (req.body);
konsoli.Hirsi('LUOTI ASIAKIRJA');
res.json({ CreatedUser });
} muujos (tarvittava menetelmä 'SAADA') {
konsoli.Hirsi('ASIAKIRJOJEN NOUDAT');
konst fetchedUsers = odottaa User.find({});
konsoli.Hirsi('HAEDUT ASIAKIRJAT');
res.json({ fetchedUsers });
} muu {
heittääUusiVirhe(`Tuettu HTTP-menetelmä: ${req.method}`);
}
} ottaa kiinni (virhe) {
konsoli.log (virhe);
res.json({ virhe });
}
}
Tämä koodi toteuttaa API-päätepisteen käyttäjätietojen tallentamiseksi ja hakemiseksi MongoDB-tietokannasta. Se määrittelee a userAPI toiminto, joka ottaa kaksi parametria: req ja res. Nämä edustavat vastaavasti saapuvaa HTTP-pyyntöä ja lähtevää HTTP-vastausta.
Toiminnon sisällä koodi muodostaa yhteyden MongoDB-tietokantaan ja tarkistaa saapuvan pyynnön HTTP-menetelmän.
Jos menetelmä on POST-pyyntö, koodi luo uuden käyttäjädokumentin tietokantaan käyttämällä luoda menetelmä. Päinvastoin, jos se on a SAADA pyynnöstä koodi hakee kaikki käyttäjäasiakirjat tietokannasta.
Sovellusliittymän päätepisteiden käyttäminen
Lisää alla oleva koodi pages/index.js tiedosto:
- Tee POST-pyyntö API-päätepisteelle tietojen tallentamiseksi tietokantaan.
tuonti tyylejä alkaen'@/styles/Home.module.css';
tuonti { useState } alkaen'reagoi';viedäoletuksenatoimintoKoti() {
konst [nimi, setName] = useState('');
konst [email, setEmail] = useState('');
konst [usersResults, setUsersResults] = useState([]);konst createUser = asynk () => {
yrittää {
konst luotuKäyttäjä = odottaa hae('/api/userV1/user', {
menetelmä: 'LÄHETTÄÄ',
otsikot: {
'Sisältötyyppi': "sovellus/json",
},
runko: JSON.stringify({
nimi,
sähköposti,
}),
}).sitten((res) => res.json());
konsoli.Hirsi('LUOTI ASIAKIRJA');setName('');
setEmail('');konsoli.log (createdUser);
} ottaa kiinni (virhe) {
konsoli.log (virhe);
}
}; - Määritä toiminto, joka hakee käyttäjätiedot tekemällä HTTP-pyyntöjä GET-päätepisteeseen.
konst displayUsers = asynk () => {
yrittää {
konsoli.Hirsi('ASIAKIRJOJEN NOUDAT');
konst fetchedUsers = odottaa hae('/api/userV1/user').sitten((res) =>
res.json()
);
konsoli.Hirsi('HAEDUT ASIAKIRJAT');
setUsersResults (fetchedUsers);
konsoli.log (usersResults)
} ottaa kiinni (virhe) {
konsoli.log (virhe);
}
}; - Lopuksi renderöi lomakeelementti tekstinsyöttökentillä ja lähetä ja näytä käyttäjätiedot -painikkeet.
palata (
<>
Jatka lopuksi kehityspalvelinta päivittääksesi muutokset ja siirtyäksesi siihen http://localhost: 3000 selaimessasi.
npm run devNext.js: n käyttäminen sovelluksissa
Next.js on loistava vaihtoehto upeiden verkkosovellusten rakentamiseen, olitpa sitten sivuprojektissa tai laajamittaisessa verkkoratkaisussa. Se tarjoaa joukon ominaisuuksia ja ominaisuuksia, jotka virtaviivaistavat tehokkaiden ja skaalautuvien tuotteiden luomisprosessia.
Vaikka se on ensisijaisesti vankka asiakaspuolen kehys, voit myös hyödyntää sen palvelinpuolen ominaisuuksia luodaksesi nopeasti taustapalvelun.
