Ontdek de kracht van Mongoose en hoe u deze kunt gebruiken om gegevens te beheren voor een eenvoudige webapp.
Next.js is een veelzijdig full-stack JavaScript-framework dat bovenop React is gebouwd en de belangrijkste functies zoals JSX, componenten en hooks ondersteunt. Enkele van de kernfuncties van Next.js zijn onder meer op bestanden gebaseerde routering, CSS in JS en server-side rendering.
Een belangrijke mogelijkheid van Next.js is de mogelijkheid om naadloos te integreren met verschillende backend-technologieën zoals Mongoose, waardoor u eenvoudig gegevens efficiënt kunt beheren.
Met Mongoose kunt u eenvoudig een performante REST API definiëren vanuit een Next.js-toepassing om gegevens op te slaan en op te halen uit een MongoDB-database.
Next.js: een full-stack JavaScript-framework
In tegenstelling tot React wordt Next.js beschouwd als een full-stack webframework omdat het een complete oplossing biedt voor het bouwen van server-side gerenderde webapplicaties.
Het biedt namelijk features die het mogelijk maken om vanuit één projectdirectory zowel aan de front-end als back-end van een applicatie te werken. U hoeft niet per se een aparte back-end projectmap in te stellen om server-side functionaliteit te implementeren, vooral voor kleinschalige toepassingen.
Hoezeer Next.js ook een aantal back-endfunctionaliteit afhandelt, om grootschalige, full-stack-applicaties te bouwen, wilt u het misschien combineren met een speciaal backend-framework zoals Express.
Enkele van de kernfuncties die Next.js zijn full-stack-mogelijkheden geven, zijn onder meer:
- Server-side rendering: Next.js biedt ingebouwde ondersteuning voor server-side rendering-mogelijkheden. In wezen betekent dit dat zodra een client HTTP-verzoeken naar een server verzendt, de server de verzoeken verwerkt en reageert met de vereiste HTML-inhoud voor elke pagina die in de browser moet worden weergegeven.
- Routering: Next.js gebruikt een op pagina's gebaseerd routeringssysteem om verschillende routes te definiëren en te beheren, gebruikersinvoer af te handelen en dynamische pagina's te maken zonder afhankelijk te zijn van bibliotheken van derden. Bovendien is het eenvoudig op te schalen, omdat het toevoegen van nieuwe routes net zo eenvoudig is als het toevoegen van een nieuwe pagina, zoals about.js, aan de directory van de pagina's.
- API-eindpunten: Next.js biedt ingebouwde ondersteuning voor server-side mogelijkheden die worden gebruikt om API-eindpunten te maken die HTTP-verzoeken beheren en gegevens retourneren. Dit maakt het eenvoudig om back-endfunctionaliteit te bouwen zonder een aparte server op te zetten met behulp van een speciaal backend-framework zoals Express. Het is echter belangrijk op te merken dat Next.js in de eerste plaats een front-end webframework is.
Zet een MongoDB-database op
Starten, een MongoDB-database opzetten. Als alternatief kunt u snel een MongoDB-database opstarten door het gratis configureren van een MongoDB-cluster in de cloud. Zodra uw database actief is, kopieert u de URI-tekenreeks voor de databaseverbinding.
U kunt de code van dit project hierin vinden GitHub-opslagplaats.
Zet een Next.js-project op
Maak een directory voor een nieuw project en CD erin:
mkdir nextjs-project
cd nextjs-projectInstalleer vervolgens Next.js:
npx create-next-app nextjs-mongodbNadat het installatieproces is voltooid, installeert u Mongoose als een afhankelijkheid.
npm installeer mangoestMaak ten slotte in de hoofdmap van uw project een nieuw .env-bestand om uw databaseverbindingsreeks op te slaan.
NEXT_PUBLIC_MONGO_URI = "database-URI-verbindingsreeks"Configureer de databaseverbinding
In de src map, maak een nieuwe map aan en geef deze een naam gebruikt. Maak in deze map een nieuw bestand met de naam dbConfig.js en voeg daar de volgende code aan toe:
importeren mangoest van'mangoest';const connectMongo = asynchroon () => mangoest.connect (proces.env. NEXT_PUBLIC_MONGO_URI);
exporterenstandaard verbindenMongo;
Definieer de gegevensmodellen
Gegevensmodellen definiëren de structuur van de gegevens die worden opgeslagen, inclusief de soorten gegevens en de relaties tussen de gegevens.
MongoDB slaat gegevens op in JSON-achtige documenten omdat het een NoSQL-database. Mongoose biedt een manier om te definiëren hoe de gegevens van Next.js-clients moeten worden opgeslagen en benaderd vanuit de database.
Maak in de map src een nieuwe map en naam in modellen. Maak in deze map een nieuw bestand met de naam userModel.js, en voeg onderstaande code toe:
importeren { Schema, model, modellen } van'mangoest';const gebruikerSchema = nieuw Schema({
naam: Snaar,
e-mail: {
type: Snaar,
vereist: WAAR,
uniek: WAAR,
},
});const Gebruiker = modellen. Gebruiker || model('Gebruiker', gebruikersSchema);
exporterenstandaard Gebruiker;
Maak de API-eindpunten
In tegenstelling tot andere front-end frameworks biedt Next.js ingebouwde ondersteuning voor API-beheer. Dit vereenvoudigt het proces van het maken van API's, omdat u ze rechtstreeks in het Next.js-project kunt definiëren in plaats van een aparte server op te zetten.
Nadat u de API-routes in de directory pages/api hebt gedefinieerd, genereert Next.js API-eindpunten voor elk van de bestanden in deze directory. Als u bijvoorbeeld userV1/user.js maakt, maakt Next.js een eindpunt dat toegankelijk is via http://localhost: 3000/api/gebruikerV1/gebruiker.
Binnen in de pagina's/api, maak een nieuwe map en noem deze userV1. Maak in deze map een nieuw bestand met de naam gebruiker.js, en voeg de onderstaande code toe:
importeren verbind Mongo van'../../../utils/dbConfig';
importeren Gebruiker van'../../../modellen/gebruikerModel';/**
* @param {importeren('volgende').NextApiRequest} verzoek
* @param {importeren('volgende').NextApiResponse} res
*/
exporterenstandaardasynchroonfunctiegebruikersAPI(req, res) {
poging {
troosten.log('VERBINDEN MET MONGO');
wachten connectMongo();
troosten.log('VERBONDEN MET MONGO');
als (vereist methode 'NA') {
troosten.log('DOCUMENT AANMAKEN');
const aangemaaktGebruiker = wachten Gebruiker.creëer (req.body);
troosten.log('GEMAAKT DOCUMENT');
res.json({ aangemaaktegebruiker});
} andersals (vereist methode 'KRIJGEN') {
troosten.log('DOCUMENTEN OPHALEN');
const opgehaalde gebruikers = wachten Gebruiker.zoeken({});
troosten.log('GEHAALDE DOCUMENTEN');
res.json({ opgehaalde gebruikers });
} anders {
gooiennieuwFout(`Niet-ondersteunde HTTP-methode: ${req.methode}`);
}
} vangst (fout) {
troosten.log (fout);
res.json({ fout});
}
}
Deze code implementeert een API-eindpunt voor het opslaan en ophalen van gebruikersgegevens uit een MongoDB-database. Het definieert een gebruikersAPI functie waaraan twee parameters moeten doorgegeven worden: aanv En res. Deze vertegenwoordigen respectievelijk het inkomende HTTP-verzoek en het uitgaande HTTP-antwoord.
Binnen de functie maakt de code verbinding met de MongoDB-database en controleert de HTTP-methode van het inkomende verzoek.
Als de methode een POST-verzoek is, maakt de code een nieuw gebruikersdocument in de database met behulp van de creëren methode. Omgekeerd, als het een KRIJGEN verzoek, haalt de code alle gebruikersdocumenten op uit de database.
De API-eindpunten verbruiken
Voeg onderstaande code toe aan de pagina's/index.js bestand:
- Maak een POST-verzoek aan het API-eindpunt om gegevens in de database op te slaan.
importeren stijlen van'@/styles/Home.module.css';
importeren { useState } van'Reageer';exporterenstandaardfunctieThuis() {
const [naam, setnaam] = useState('');
const [email, setEmail] = useState('');
const [usersResults, setUsersResults] = useState([]);const maakGebruiker = asynchroon () => {
poging {
const aangemaaktGebruiker = wachten ophalen('/api/gebruikerV1/gebruiker', {
methode: 'NA',
koppen: {
'Content-type': 'toepassing/json',
},
lichaam: JSON.stringify({
naam,
e-mailen,
}),
}).Dan((res) => res.json());
troosten.log('GEMAAKT DOCUMENT');setNaam('');
setEmail('');troosten.log (gecreëerde gebruiker);
} vangst (fout) {
troosten.log (fout);
}
}; - Definieer een functie om de gebruikersgegevens op te halen door HTTP-verzoeken te doen aan het GET-eindpunt.
const gebruikers weergeven = asynchroon () => {
poging {
troosten.log('DOCUMENTEN OPHALEN');
const opgehaalde gebruikers = wachten ophalen('/api/gebruikerV1/gebruiker').Dan((res) =>
res.json()
);
troosten.log('GEHAALDE DOCUMENTEN');
setUsersResults (opgehaalde gebruikers);
troosten.log (gebruikersresultaten)
} vangst (fout) {
troosten.log (fout);
}
}; - Geef ten slotte een formulierelement weer met tekstinvoervelden en verzend en geef gebruikersgegevensknoppen weer.
opbrengst (
<>
Ga ten slotte door en start de ontwikkelingsserver om de wijzigingen bij te werken en ernaartoe te navigeren http://localhost: 3000 in uw browser.
npm run devNext.js gebruiken in toepassingen
Next.js is een fantastische optie voor het bouwen van coole webapplicaties, of je nu aan een zijproject werkt of aan een grootschalige weboplossing. Het biedt een scala aan functies en mogelijkheden die het proces van het maken van performante en schaalbare producten stroomlijnen.
Hoewel het in de eerste plaats een robuust client-side framework is, kunt u ook de server-side mogelijkheden gebruiken om snel een backend-service op te zetten.