Upptäck kraften i Mongoose och hur du kan använda den för att hantera data för en enkel webbapp.
Next.js är ett mångsidigt JavaScript-ramverk i full stack som är byggt ovanpå React och stödjer dess huvudfunktioner som JSX, komponenter och krokar. Några av Next.js kärnfunktioner inkluderar filbaserad routing, CSS i JS och rendering på serversidan.
En betydande förmåga hos Next.js är dess förmåga att sömlöst integrera med olika backend-teknologier som Mongoose, vilket gör att du enkelt kan hantera data effektivt.
Med Mongoose kan du enkelt definiera ett fungerande REST API från en Next.js-applikation för att lagra och hämta data från en MongoDB-databas.
Next.js: Ett JavaScript-ramverk i full stack
Till skillnad från React anses Next.js vara ett webbramverk i full stack eftersom det ger en komplett lösning för att bygga renderade webbapplikationer på serversidan.
Detta beror på att det erbjuder funktioner som gör det möjligt att arbeta på både front-end och back-end av en applikation från en enda projektkatalog. Du behöver inte nödvändigtvis ställa in en separat back-end-projektmapp för att implementera funktionalitet på serversidan, särskilt för småskaliga applikationer.
Men så mycket som Next.js hanterar viss backend-funktionalitet, för att bygga storskaliga, full-stack-applikationer, kanske du vill kombinera det med ett dedikerat backend-ramverk som Express.
Några av kärnfunktionerna som ger Next.js dess fullstackfunktioner inkluderar:
- Server-side rendering: Next.js tillhandahåller inbyggt stöd för server-side rendering kapacitet. I huvudsak betyder det att när en klient väl skickar HTTP-förfrågningar till en server, bearbetar servern förfrågningarna och svarar med det nödvändiga HTML-innehållet för varje sida som ska renderas i webbläsaren.
- Routing: Next.js använder ett sidbaserat routingsystem för att definiera och hantera olika rutter, hantera användarinmatningar och skapa dynamiska sidor utan att behöva förlita sig på tredjepartsbibliotek. Dessutom är det lätt att skala upp eftersom det är lika enkelt att lägga till nya rutter som att lägga till en ny sida som about.js i sidornas katalog.
- API-slutpunkter: Next.js tillhandahåller inbyggt stöd för funktioner på serversidan som används för att skapa API-slutpunkter som hanterar HTTP-förfrågningar och returnerar data. Detta gör det enkelt att bygga backend-funktionalitet utan att behöva konfigurera en separat server med ett dedikerat backend-ramverk som Express. Det är dock viktigt att notera att Next.js främst är ett front-end webbramverk.
Konfigurera en MongoDB-databas
För att starta, skapa en MongoDB-databas. Alternativt kan du snabbt snurra upp en MongoDB-databas genom konfigurera ett MongoDB-kluster i molnet gratis. När du har din databas igång kopierar du databasanslutningens URI-sträng.
Du kan hitta detta projekts kod i denna GitHub-förråd.
Konfigurera ett Next.js-projekt
Skapa en katalog för ett nytt projekt och CD Gillar det:
mkdir nextjs-project
cd nextjs-projektInstallera sedan Next.js:
npx create-next-app nextjs-mongodbNär installationsprocessen är klar, installera Mongoose som ett beroende.
npm installera mongooseSlutligen, i rotkatalogen för ditt projekt, skapa en ny .env-fil för att hålla din databasanslutningssträng.
NEXT_PUBLIC_MONGO_URI = "databas URI-anslutningssträng"Konfigurera databasanslutningen
I den src katalog, skapa en ny mapp och namnge den utils. Inuti den här mappen skapar du en ny fil som heter dbConfig.js och lägg till följande kod:
importera mungo från'mungo';konst connectMongo = asynkron () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
exporterastandard connectMongo;
Definiera datamodellerna
Datamodeller definierar strukturen för de data som kommer att lagras, inklusive typerna av data och relationerna mellan data.
MongoDB lagrar data i JSON-liknande dokument eftersom det är en NoSQL-databas. Mongoose tillhandahåller ett sätt att definiera hur data från Next.js-klienter ska lagras och nås från databasen.
Skapa en ny mapp och namn i modeller i src-katalogen. Inuti den här mappen skapar du en ny fil som heter userModel.js, och lägg till koden nedan:
importera { Schema, modell, modeller } från'mungo';konst userSchema = ny Schema({
namn: Sträng,
e-post: {
typ: Sträng,
nödvändig: Sann,
unik: Sann,
},
});konst Användare = modeller. Användare || modell('Användare', userSchema);
exporterastandard Användare;
Skapa API-slutpunkter
Till skillnad från andra front-end-ramverk ger Next.js inbyggt stöd för API-hantering. Detta förenklar processen att skapa API: er eftersom du kan definiera dem direkt i Next.js-projektet istället för att sätta upp en separat server.
När du väl har definierat API-rutter i katalogen pages/api, genererar Next.js API-slutpunkter för var och en av filerna i den här katalogen. Om du till exempel skapar userV1/user.js kommer Next.js att skapa en slutpunkt som är tillgänglig på http://localhost: 3000/api/userV1/user.
Inuti sidor/api, skapa en ny mapp och namnge den userV1. Inuti den här mappen skapar du en ny fil som heter user.js, och lägg till koden nedan:
importera ansluta Mongo från'../../../utils/dbConfig';
importera Användare från'../../../models/userModel';/**
* @param {importera('Nästa').NextApiRequest} req
* @param {importera('Nästa').NextApiResponse} res
*/
exporterastandardasynkronfungeraanvändar-API(req, res) {
Prova {
trösta.logga("ANSLUTAR TILL MONGO");
vänta connectMongo();
trösta.logga("ANSLUTEN TILL MONGO");
om (req.metod 'POSTA') {
trösta.logga("SKAPA DOKUMENT");
konst skapadAnvändare = vänta User.create (req.body);
trösta.logga("SKAPT DOKUMENT");
res.json({ createdUser });
} annanom (req.metod 'SKAFFA SIG') {
trösta.logga("HÄMTA DOKUMENT");
konst hämtadeUsers = vänta User.find({});
trösta.logga("HÄMTADE DOKUMENT");
res.json({ fetchedUsers });
} annan {
kastanyFel(`HTTP-metod som inte stöds: ${req.method}`);
}
} fånga (fel) {
trösta.log (fel);
res.json({ error });
}
}
Denna kod implementerar en API-slutpunkt för att lagra och hämta användardata från en MongoDB-databas. Den definierar en användar-API funktion som tar två parametrar: req och res. Dessa representerar den inkommande HTTP-förfrågan respektive utgående HTTP-svar.
Inuti funktionen ansluter koden till MongoDB-databasen och kontrollerar HTTP-metoden för den inkommande begäran.
Om metoden är en POST-begäran, skapar koden ett nytt användardokument i databasen med hjälp av skapa metod. Omvänt, om det är en SKAFFA SIG begäran hämtar koden alla användardokument från databasen.
Konsumerar API-ändpunkterna
Lägg till koden nedan till pages/index.js fil:
- Gör en POST-begäran till API-slutpunkten för att lagra data i databasen.
importera stilar från'@/styles/Home.module.css';
importera { useState } från'reagera';exporterastandardfungeraHem() {
konst [namn, setName] = useState('');
konst [email, setEmail] = useState('');
konst [usersResults, setUsersResults] = useState([]);konst createUser = asynkron () => {
Prova {
konst skapadAnvändare = vänta hämta('/api/userV1/user', {
metod: 'POSTA',
rubriker: {
'Innehållstyp': 'applikation/json',
},
kropp: JSON.stringify({
namn,
e-post,
}),
}).sedan((res) => res.json());
trösta.logga("SKAPT DOKUMENT");Ange namn('');
setEmail('');trösta.log (createdUser);
} fånga (fel) {
trösta.log (fel);
}
}; - Definiera en funktion för att hämta användardata genom att göra HTTP-förfrågningar till GET-slutpunkten.
konst displayUsers = asynkron () => {
Prova {
trösta.logga("HÄMTA DOKUMENT");
konst hämtadeUsers = vänta hämta('/api/userV1/user').sedan((res) =>
res.json()
);
trösta.logga("HÄMTADE DOKUMENT");
setUsersResults (fetchedUsers);
trösta.log (usersResults)
} fånga (fel) {
trösta.log (fel);
}
}; - Till sist, rendera ett formulärelement med textinmatningsfält och skicka in och visa användardataknappar.
lämna tillbaka (
<>
Slutligen, fortsätt och snurra upp utvecklingsservern för att uppdatera ändringarna och navigera till http://localhost: 3000 i din webbläsare.
npm kör devAnvänder Next.js i applikationer
Next.js är ett fantastiskt alternativ för att bygga coola webbapplikationer, oavsett om du arbetar med ett sidoprojekt eller en storskalig webblösning. Den erbjuder en rad funktioner och möjligheter som effektiviserar processen för att skapa prestanda och skalbara produkter.
Även om det i första hand är ett robust ramverk på klientsidan, kan du också använda dess serversida-funktioner för att snabbt skapa en backend-tjänst.
