Découvrez la puissance de Mongoose et comment vous pouvez l'utiliser pour gérer les données d'une simple application Web.
Next.js est un framework JavaScript polyvalent à pile complète qui est construit sur React, prenant en charge ses principales fonctionnalités telles que JSX, les composants et les crochets. Certaines des principales fonctionnalités de Next.js incluent le routage basé sur les fichiers, le CSS dans JS et le rendu côté serveur.
Une capacité importante de Next.js est sa capacité à s'intégrer de manière transparente à diverses technologies backend telles que Mongoose, vous permettant de gérer facilement et efficacement les données.
Avec Mongoose, vous pouvez facilement définir une API REST performante à partir d'une application Next.js pour stocker et récupérer des données à partir d'une base de données MongoDB.
Next.js: un framework JavaScript à pile complète
Contrairement à React, Next.js est considéré comme un framework Web complet car il fournit une solution complète pour créer des applications Web rendues côté serveur.
En effet, il offre des fonctionnalités qui permettent de travailler à la fois sur le front-end et le back-end d'une application à partir d'un seul répertoire de projet. Vous n'avez pas nécessairement besoin de configurer un dossier de projet principal distinct pour implémenter des fonctionnalités côté serveur, en particulier pour les applications à petite échelle.
Cependant, dans la mesure où Next.js gère certaines fonctionnalités back-end, pour créer des applications complètes à grande échelle, vous souhaiterez peut-être le combiner avec un framework back-end dédié comme Express.
Certaines des fonctionnalités de base qui donnent à Next.js ses capacités de pile complète incluent :
- Rendu côté serveur: Next.js fournit une prise en charge intégrée des capacités de rendu côté serveur. Cela signifie essentiellement qu'une fois qu'un client envoie des requêtes HTTP à un serveur, le serveur traite les requêtes et répond avec le contenu HTML requis pour chaque page à afficher sur le navigateur.
- Routage: Next.js utilise un système de routage basé sur les pages pour définir et gérer différentes routes, gérer les entrées des utilisateurs et créer des pages dynamiques sans avoir à s'appuyer sur des bibliothèques tierces. De plus, il est facile d'évoluer puisque l'ajout de nouvelles routes est aussi simple que l'ajout d'une nouvelle page telle que about.js, au répertoire des pages.
- Points de terminaison API: Next.js fournit une prise en charge intégrée des fonctionnalités côté serveur qui sont utilisées pour créer des points de terminaison API qui gèrent les requêtes HTTP et renvoient des données. Cela facilite la création de fonctionnalités back-end sans avoir à configurer un serveur séparé à l'aide d'un framework back-end dédié comme Express. Cependant, il est important de noter que Next.js est principalement un framework Web frontal.
Configurer une base de données MongoDB
Pour commencer, mettre en place une base de données MongoDB. Alternativement, vous pouvez rapidement créer une base de données MongoDB en configurer gratuitement un cluster MongoDB dans le cloud. Une fois que votre base de données est opérationnelle, copiez la chaîne URI de connexion à la base de données.
Vous pouvez trouver le code de ce projet dans ce Référentiel GitHub.
Configurer un projet Next.js
Créez un répertoire pour un nouveau projet et CD dans ça:
projet mkdir nextjs
cd nextjs-projetInstallez ensuite Next.js :
npx créer-next-app nextjs-mongodbUne fois le processus d'installation terminé, installez Mongoose en tant que dépendance.
npm installer la mangousteEnfin, dans le répertoire racine de votre projet, créez un nouveau fichier .env pour contenir votre chaîne de connexion à la base de données.
NEXT_PUBLIC_MONGO_URI = "chaîne de connexion URI de la base de données"Configurer la connexion à la base de données
Dans le src répertoire, créez un nouveau dossier et nommez-le utilitaires. Dans ce dossier, créez un nouveau fichier appelé dbConfig.js et ajoutez-y le code suivant :
importer mangouste depuis'mangouste';constante connectMongo = asynchrone () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI );
exporterdéfaut connectMongo ;
Définir les modèles de données
Les modèles de données définissent la structure des données qui seront stockées, y compris les types de données et les relations entre les données.
MongoDB stocke les données dans des documents de type JSON puisqu'il s'agit d'un Base de données NoSQL. Mongoose fournit un moyen de définir comment les données des clients Next.js doivent être stockées et accessibles à partir de la base de données.
Dans le répertoire src, créez un nouveau dossier et nommez-le dans models. Dans ce dossier, créez un nouveau fichier appelé userModel.js, et ajoutez le code ci-dessous :
importer { Schéma, modèle, modèles } depuis'mangouste';constante userSchema = nouveau Schéma({
nom: Chaîne,
e-mail: {
taper: Chaîne,
requis: vrai,
unique: vrai,
},
});constante Utilisateur = modèles. Utilisateur || modèle('Utilisateur', userSchema);
exporterdéfaut Utilisateur;
Créer les points de terminaison de l'API
Contrairement à d'autres frameworks frontaux, Next.js fournit une prise en charge intégrée de la gestion des API. Cela simplifie le processus de création d'API puisque vous pouvez les définir directement dans le projet Next.js au lieu de configurer un serveur séparé.
Une fois que vous avez défini les routes d'API dans le répertoire pages/api, Next.js génère des points de terminaison d'API pour chacun des fichiers de ce répertoire. Par exemple, si vous créez userV1/user.js, Next.js créera un point de terminaison accessible à http://localhost: 3000/api/utilisateurV1/utilisateur.
À l'intérieur de pages/API, créez un nouveau dossier et nommez-le userV1. Dans ce dossier, créez un nouveau fichier appelé utilisateur.js, et ajoutez le code ci-dessous :
importer connectMongo depuis'../../../utils/dbConfig';
importer Utilisateur depuis'../../../models/userModel';/**
* @param {importer('suivant').NextApiRequest} demande
* @param {importer('suivant').NextApiResponse} res
*/
exporterdéfautasynchronefonctionuserAPI(demande, résolution) {
essayer {
console.enregistrer("CONNEXION À MONGO");
attendre connectMongo();
console.enregistrer("CONNECTÉ À MONGO");
si (méthode requise 'POSTE') {
console.enregistrer('CRÉATION D'UN DOCUMENT');
constante utilisateur créé = attendre User.create (req.body);
console.enregistrer('DOCUMENT CRÉÉ');
res.json({ crééUtilisateur });
} autresi (méthode requise 'OBTENIR') {
console.enregistrer('RÉCUPÉRATION DE DOCUMENTS');
constante utilisateurs récupérés = attendre Utilisateur.find({});
console.enregistrer('DOCUMENTS RÉCUPÉRÉS');
res.json({ fetchedUsers });
} autre {
lancernouveauErreur(`Méthode HTTP non prise en charge: ${req.méthode}`);
}
} attraper (erreur) {
console.log (erreur);
res.json({ erreur });
}
}
Ce code implémente un point de terminaison API pour stocker et récupérer des données utilisateur à partir d'une base de données MongoDB. Il définit une userAPI fonction qui prend deux paramètres: demande et résolution. Ceux-ci représentent respectivement la requête HTTP entrante et la réponse HTTP sortante.
Dans la fonction, le code se connecte à la base de données MongoDB et vérifie la méthode HTTP de la requête entrante.
Si la méthode est une requête POST, le code crée un nouveau document utilisateur dans la base de données à l'aide de la créer méthode. A l'inverse, s'il s'agit d'un OBTENIR requête, le code récupère tous les documents utilisateur de la base de données.
Consommer les points de terminaison de l'API
Ajoutez le code ci-dessous au pages/index.js déposer:
- Envoyez une requête POST au point de terminaison de l'API pour stocker les données dans la base de données.
importer modes depuis'@/styles/Accueil.module.css';
importer { useState } depuis'réagir';exporterdéfautfonctionMaison() {
constante [nom, setName] = useState('');
constante [email, setEmail] = useState('');
constante [usersResults, setUsersResults] = useState([]);constante créerutilisateur = asynchrone () => {
essayer {
constante utilisateur créé = attendre aller chercher('/api/utilisateurV1/utilisateur', {
méthode: 'POSTE',
en-têtes: {
'Type de contenu': 'application/json',
},
corps: JSON.stringify({
nom,
e-mail,
}),
}).alors((résolution) => res.json());
console.enregistrer('DOCUMENT CRÉÉ');setNom('');
setEmail('');console.log (createdUser);
} attraper (erreur) {
console.log (erreur);
}
}; - Définissez une fonction pour récupérer les données utilisateur en envoyant des requêtes HTTP au point de terminaison GET.
constante displayUsers = asynchrone () => {
essayer {
console.enregistrer('RÉCUPÉRATION DE DOCUMENTS');
constante utilisateurs récupérés = attendre aller chercher('/api/utilisateurV1/utilisateur').alors((résolution) =>
res.json()
);
console.enregistrer('DOCUMENTS RÉCUPÉRÉS');
setUsersResults (fetchedUsers);
console.log (utilisateursRésultats)
} attraper (erreur) {
console.log (erreur);
}
}; - Enfin, rendez un élément de formulaire avec des champs de saisie de texte et soumettez et affichez des boutons de données utilisateur.
retour (
<>
Enfin, lancez le serveur de développement pour mettre à jour les modifications et accédez à http://localhost: 3000 dans votre navigateur.
npm run devUtilisation de Next.js dans les applications
Next.js est une option fantastique pour créer des applications Web intéressantes, que vous travailliez sur un projet parallèle ou sur une solution Web à grande échelle. Il offre une gamme de fonctionnalités et de capacités qui rationalisent le processus de création de produits performants et évolutifs.
Bien qu'il s'agisse principalement d'un framework côté client robuste, vous pouvez également utiliser ses capacités côté serveur pour lancer rapidement un service backend.
