Next.js est un framework JavaScript polyvalent à pile complète qui est construit au-dessus de React, prenant en charge ses principales fonctionnalités telles que JSX, les composants et les crochets. Parmi les principales fonctionnalités de Next.js, on trouve le routage basé sur les fichiers, le CSS en JS et le rendu côté serveur.
Une capacité importante de Next.js est sa capacité à s’intégrer de manière transparente avec diverses technologies backend telles que Mongoose, ce qui vous permet de gérer facilement les données de manière efficace.
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 complet
Contrairement à React, Next.js est considéré comme un framework web complet car il fournit une solution complète pour construire des applications web rendues côté serveur.
Nextjs est un logiciel qui permet 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 créer un dossier de projet distinct pour implémenter les fonctionnalités côté serveur, en particulier pour les applications à petite échelle.
Cependant, même si Next.js gère certaines fonctionnalités back-end, pour construire des applications complètes à grande échelle, vous voudrez peut-être le combiner avec un framework back-end dédié comme Express.
Certaines des caractéristiques principales qui donnent à Next.js ses capacités de pile complète comprennent :
- Rendu côté serveur : Next.js fournit un support intégré pour les 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 à rendre sur le navigateur.
- Routage : Next.js utilise un système de routage basé sur les pages pour définir et gérer différents itinéraires, 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 à faire évoluer puisque l’ajout de nouvelles routes est aussi simple que l’ajout d’une nouvelle page telle que about.js, dans le répertoire des pages.
- Points d’extrémité API : Next.js fournit un support intégré pour les capacité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 permet de construire facilement des fonctionnalités back-end sans avoir à mettre en place un serveur séparé en utilisant un framework back-end dédié comme Express. Cependant, il est important de noter que Next.js est avant tout un framework web frontal.
Configurer une base de données MongoDB
Pour commencer, configurez une base de données MongoDB. Vous pouvez également créer rapidement une base de données MongoDB en configurant gratuitement un cluster MongoDB dans le nuage. 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 dépôt GitHub.
Mise en place d’un projet Next.js
Créer un répertoire pour un nouveau projet et cd en elle :
mkdir nextjs-project
cd nextjs-project Puis installez Next.js :
npx create-next-app nextjs-mongodb Une fois le processus d’installation terminé, installez Mongoose en tant que dépendance.
npm install mongoose Enfin, dans le répertoire racine de votre projet, créez un nouveau fichier .env qui contiendra votre chaîne de connexion à la base de données.
NEXT_PUBLIC_MONGO_URI = "database URI connection string" Configurer la connexion à la base de données
Dans la fenêtre src créer un nouveau dossier et le nommer utils. Dans ce dossier, créez un nouveau fichier appelé dbConfig.js et y ajouter le code suivant :
import mongoose from 'mongoose';
const connectMongo = async () => mongoose.connect(process.env.NEXT_PUBLIC_MONGO_URI);
export default 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’une base de données NoSQL. Mongoose permet de définir comment les données des clients Next.js doivent être stockées et accessibles depuis la base de données.
Dans le répertoire src, créez un nouveau dossier et nommez-le models. Dans ce dossier, créez un nouveau fichier appelé userModel.js, et ajoutez le code ci-dessous :
import { Schema, model, models } from 'mongoose';
const userSchema = new Schema({
name: String,
email: {
type: String,
required: true,
unique: true,
},
});
const User = models.User || model('User', userSchema);
export default User; Créer les points de terminaison de l’API
Contrairement à d’autres frameworks frontaux, Next.js fournit un support intégré pour la gestion des API. Cela simplifie le processus de création des API puisque vous pouvez les définir directement dans le projet Next.js au lieu de mettre en place un serveur séparé.
Une fois que vous avez défini les routes API dans le répertoire pages/api, Next.js génère des points d’extrémité API pour chacun des fichiers de ce répertoire. Par exemple, si vous créez userV1/user.js, Next.js créera un point d’accès à http://localhost:3000/api/userV1/user.
A l’intérieur du pages/apiCréez un nouveau dossier et nommez-le userV1. Dans ce dossier, créez un nouveau fichier appelé user.jset ajoutez le code ci-dessous :
import connectMongo from '../../../utils/dbConfig';
import User from '../../../models/userModel';
/**
* @param {import('next').NextApiRequest} req
* @param {import('next').NextApiResponse} res
*/
export default async function userAPI(req, res) {
try {
console.log('CONNECTING TO MONGO');
await connectMongo();
console.log('CONNECTED TO MONGO');
if (req.method === 'POST') {
console.log('CREATING DOCUMENT');
const createdUser = await User.create(req.body);
console.log('CREATED DOCUMENT');
res.json({ createdUser });
} else if (req.method === 'GET') {
console.log('FETCHING DOCUMENTS');
const fetchedUsers = await User.find({});
console.log('FETCHED DOCUMENTS');
res.json({ fetchedUsers });
} else {
throw new Error(`Unsupported HTTP method: ${req.method}`);
}
} catch (error) {
console.log(error);
res.json({ error });
}
} Ce code met en œuvre 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 un userAPI qui prend deux paramètres : req et res. Ces éléments représentent respectivement la requête HTTP entrante et la réponse HTTP sortante.
À l’intérieur de 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 fonction créer méthode. Inversement, s’il s’agit d’une méthode GET le code récupère tous les documents de l’utilisateur dans la base de données.
Consommer les points d’extrémité de l’API
Ajoutez le code ci-dessous au fichier pages/index.js fichier :
- Effectuer une requête POST au point de terminaison de l’API pour stocker les données dans la base de données.
import styles from '@/styles/Home.module.css';
import { useState } from 'react';
export default function Home() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [usersResults, setUsersResults] = useState([]);
const createUser = async () => {
try {
const createdUser = await fetch('/api/userV1/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name,
email,
}),
}).then((res) => res.json());
console.log('CREATED DOCUMENT');
setName('');
setEmail('');
console.log(createdUser);
} catch (error) {
console.log(error);
}
}; - Définir une fonction pour récupérer les données de l’utilisateur en effectuant des requêtes HTTP au point de terminaison GET.
const displayUsers = async () => {
try {
console.log('FETCHING DOCUMENTS');
const fetchedUsers = await fetch('/api/userV1/user').then((res) =>
res.json()
);
console.log('FETCHED DOCUMENTS');
setUsersResults(fetchedUsers);
console.log(usersResults)
} catch (error) {
console.log(error);
}
}; - Enfin, rendez un élément de formulaire avec des champs de saisie de texte et des boutons de soumission et d’affichage des données de l’utilisateur.
return (
<>
<main className={styles.main}>
<div className={styles.description}>
<div className={styles.form}>
<label>
Name:
<input type="text" value={name} onChange={(e) => { setName(e.target.value)}} />
</label>
<label>
Email:
<input type="email" value={email} onChange={(e) => { setEmail(e.target.value) }} />
</label>
<button onClick={createUser}>Submit data</button>
</div>
<div>
<button onClick={displayUsers}> Display user Data</button>
<div className={styles.description}>
{usersResults.fetchedUsers && usersResults.fetchedUsers.length > 0 && (
<ul>
{usersResults.fetchedUsers.map((user) => (
<li key={user._id}>
<p>{user.name}</p>
<p>({user.email})</p>
</li>
))}
</ul>
)}
</div>
</div>
</div>
</main>
</>
);
}
Enfin, démarrez le serveur de développement pour mettre à jour les modifications et naviguez vers http://localhost:3000 dans votre navigateur.
npm run dev Utilisation de Next.js dans les applications
Next.js est une option fantastique pour construire des applications web intéressantes, que vous travailliez sur un projet secondaire 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 avant tout d’un framework robuste côté client, vous pouvez également utiliser ses capacités côté serveur pour créer rapidement un service backend.
