L'époque où vous deviez créer un backend séparé pour votre site Web est révolue. Avec le routage d'API basé sur des fichiers Next.js, vous pouvez vous simplifier la vie en écrivant votre API dans un projet Next.js.
Next.js est un méta-framework React avec des fonctionnalités qui simplifient le processus de création d'applications Web prêtes pour la production. Vous verrez comment créer une API REST dans Next.js et utiliser les données de cette API sur une page Next.js.
Créer un projet Next.js à l'aide de create-next-app
Vous pouvez créer un nouveau projet Next.js à l'aide de l'outil CLI create-next-app. Il installe les packages et les fichiers nécessaires pour vous aider à créer une application Next.js.
Exécutez cette commande dans un terminal pour créer un nouveau dossier Next.js appelé api-routes. Vous pouvez recevoir une invite pour installer create-next-app.
npx créer-suivant-app api-routes
Une fois la commande terminée, ouvrez le dossier api-routes pour commencer à créer les routes d'API.
Routage API dans Next.js
Les routes d'API s'exécutent sur le serveur et ont de nombreuses utilisations, telles que l'enregistrement de données utilisateur dans une base de données ou la récupération de données à partir d'une API sans augmenter le Erreur de stratégie CORS.
Dans Next.js, vous devez créer des routes d'API dans le dossier /pages/api. Next.js génère des points de terminaison d'API pour chacun des fichiers de ce dossier. Si vous ajoutez user.js à /pages/api, Next.js créera un point de terminaison à http://localhost: 3000/API/utilisateur.
Une route d'API Next.js de base a la syntaxe suivante.
exporterdéfautfonctiongestionnaire(demande, résolution) {
res.status (200).json({ nom: 'Jean Doe' })
}
Vous devez exporter la fonction de gestionnaire pour qu'elle fonctionne.
Création de routes d'API
Créez un nouveau fichier appelé todo.js dans le /pages/api dossier pour ajouter une route API pour les éléments todo.
Se moquer de la base de données Todo
Pour obtenir les tâches, vous devez créer un point de terminaison GET. Pour la simplicité. Ce tutoriel utilise un tableau d'éléments todo au lieu d'une base de données, mais n'hésitez pas à utiliser une base de données comme MongoDB ou MySQL.
Créez les éléments todo dans todo.js dans le dossier racine de votre application, puis ajoutez les données suivantes.
exporterconstante todos = [
{
identifiant: 1,
faire: "Faire quelque chose de gentil pour quelqu'un à qui je tiens",
complété: vrai,
ID utilisateur: 26,
},
{
identifiant: 2,
faire: "Mémorisez les cinquante états et leurs capitales",
complété: FAUX,
ID utilisateur: 48,
},
// autres choses à faire
];
Ces éléments à faire proviennent du site Web DummyJSON, un API REST pour les données fictives. Vous pouvez trouver les données exactes de ce Point de terminaison DummyJSON todos.
Ensuite, créez la route API dans /pages/api/todos.js et ajoutez la fonction de gestionnaire.
importer { todos } depuis "../../faire";exporterfonctiongestionnaire(demande, résolution) {
constante { méthode } = req ;
changer (méthode) {
cas "OBTENIR":
res.statut(200).json(todos);
casser;
cas "POSTE":
constante { todo, complete } = req.body ;
todos.pousser({
identifiant: todos.longueur + 1,
faire,
complété,
});
res.statut(200).json(todos);
casser;
défaut:
res.setHeader("Permettre", ["OBTENIR", "POSTE"]);
res.statut(405).fin(`Méthode ${méthode} Non autorisé`);
casser;
}
}
Cette route gère les points de terminaison GET et POST. Il renvoie toutes les tâches pour la requête GET et ajoute un élément todo à la base de données todo pour une requête POST. Pour les autres méthodes, le gestionnaire renvoie une erreur.
Consommer des routes d'API dans le frontend
Vous avez créé un point de terminaison d'API qui renvoie un objet JSON contenant un tableau de tâches.
Pour utiliser l'API, créez une fonction appelée fetchTodos qui récupère les données du point de terminaison de l'API. La fonction utilise la méthode fetch mais vous pouvez aussi utiliser Axios pour faire des requêtes API. Appelez ensuite cette fonction lorsque vous cliquez sur un bouton.
importer Diriger depuis "suivant/tête" ;
importer { useState } depuis "réagir";exporterdéfautfonctionMaison() {
constante [todos, settodos] = useState([]);constante fetchTodos = asynchrone () => {
constante réponse = attendre aller chercher("/api/todos" );
constante données = attendre réponse.json();
settodos (données);
};
retour (
<div className={styles.container}>
<Diriger>
<titre>Créer l'application suivante</title>
<méta nom="description" contenu="Généré par créer l'application suivante" />
<lien rel="icône" href="/favicon.ico" />
</Head>
<principal>
<bouton onClick={fetchTodos}>Obtenir des tâches</button>
<ul>
{todos.map((todo) => {
retour (
<li
style={{ couleur: `${todo.completed? "vert": "rouge"}` }}
clé={todo.id}
>
{todo.todo} :{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
La liste de cet extrait affiche les éléments de tâche lorsqu'ils sont récupérés.
Pour le point de terminaison POST, créez une nouvelle fonction appelée saveTodo qui envoie une requête POST à l'API. La requête de récupération stocke le nouvel élément todo dans le corps et renvoie tous les éléments todo, y compris le nouveau. La fonction saveTodo les stocke ensuite dans l'état todos.
constante saveTodo = asynchrone () => {
constante réponse = attendre aller chercher("/api/todos", {
méthode: "POSTE",
corps: JSON.stringify (nouveauTodo),
en-têtes: {
"Type de contenu": "application/json",
},
});
constante données = attendre réponse.json();
settodos (données);
};
Ensuite, créez un formulaire avec une barre de saisie de texte pour recevoir le nouvel élément de tâche. La fonction de gestionnaire de soumission de ce formulaire appellera la fonction saveTodo.
importer Diriger depuis "suivant/tête" ;
importer { useReducer, useState } depuis "réagir";
importer modes depuis "../styles/Accueil.module.css" ;exporterdéfautfonctionMaison() {
constante [todos, settodos] = useState([]);constante [newTodo, setnewTodo] = useState({
faire: "",
complété: FAUX,
});constante fetchTodos = asynchrone () => {
// récupèreTodos
};
constante saveTodo = asynchrone (e) => {
constante réponse = attendre aller chercher("/api/todos", {
méthode: "POSTE",
corps: JSON.stringify (nouveauTodo),
en-têtes: {
"Type de contenu": "application/json",
},
});constante données = attendre réponse.json();
settodos (données);
};constante handleChange = (e) => {
setnewTodo({
faire: e.cible.valeur,
});
};constante handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
faire: '',
});
};retour (
<div className={styles.container}>
<Diriger>
<titre>Créer l'application suivante</title>
<méta nom="description" contenu="Généré par créer l'application suivante" />
<lien rel="icône" href="/favicon.ico" />
</Head>
<principal>
// Récupère les éléments todo lorsqu'on clique dessus
<bouton onClick={fetchTodos}>Obtenir des tâches</button>
// Enregistre un nouvel élément de tâche lorsqu'il est soumis
<formulaire onSubmit={handleSubmit}>
<type d'entrée="texte" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// liste les éléments à faire}
</ul>
</main>
</div>
);
}
Le gestionnaire ajoute une nouvelle tâche à la base de données chaque fois qu'un utilisateur soumet le formulaire. De plus, cette fonction met à jour la valeur todos en utilisant les données reçues de l'API qui à son tour ajoute le nouvel élément todo à la liste.
Le routage d'API n'est qu'une des forces de Next.js
Vous avez vu comment créer et utiliser une route d'API Next.js. Vous pouvez désormais créer une application complète sans quitter votre dossier de projet Next.js. Le routage d'API est l'un des nombreux avantages offerts par Next.js.
Next.js offre également des optimisations de performances telles que le fractionnement du code, le chargement différé et la prise en charge CSS intégrée. Si vous créez un site Web qui doit être rapide et convivial pour le référencement, vous devriez envisager Next.js.
