Détails sur les routes API

Voici quelques informations essentielles que vous devriez connaître sur les routes API.

Ne pas récupérer une route API depuis getStaticProps ou getStaticPaths

Vous ne devriez pas récupérer une route API depuis getStaticProps ou getStaticPaths. Écrivez plutôt votre code côté serveur directement dans getStaticProps ou getStaticPaths (ou appelez une fonction d'aide).

Voici pourquoi : getStaticProps et getStaticPaths s'exécutent uniquement côté serveur et ne s'exécuteront jamais côté client. De plus, ces fonctions ne seront pas incluses dans le bundle JS pour le navigateur. Cela signifie que vous pouvez écrire du code tel que des requêtes directes à la base de données sans les envoyer aux navigateurs. Consultez la documentation Écrire du code côté serveur pour en savoir plus.

Un bon cas d'utilisation : Gérer les saisies de formulaire

Un bon cas d'utilisation pour les routes API est la gestion des saisies de formulaire. Par exemple, vous pouvez créer un formulaire sur votre page et le faire envoyer une requête POST à votre route API. Vous pouvez ensuite écrire du code pour enregistrer directement les données dans votre base de données. Le code de la route API ne fera pas partie de votre bundle client, vous pouvez donc écrire en toute sécurité du code côté serveur.

export default function handler(req, res) {
  const email = req.body.email;
  // Ensuite, enregistrez l'email dans votre base de données, etc...
}

Mode prévisualisation

La Génération statique est utile lorsque vos pages récupèrent des données depuis un CMS headless. Cependant, ce n'est pas idéal lorsque vous rédigez un brouillon sur votre CMS headless et que vous souhaitez prévisualiser immédiatement ce brouillon sur votre page. Vous voudriez que Next.js rende ces pages au moment de la requête plutôt qu'au moment de la construction et qu'il récupère le contenu du brouillon plutôt que le contenu publié. Vous voudriez que Next.js contourne la Génération statique uniquement pour ce cas spécifique.

Next.js dispose d'une fonctionnalité appelée Mode prévisualisation pour résoudre le problème ci-dessus, et elle utilise les routes API. Pour en savoir plus, consultez notre documentation sur le Mode prévisualisation.

Routes API dynamiques

Les routes API peuvent être dynamiques, tout comme les pages classiques. Consultez notre documentation sur les Routes API dynamiques pour en savoir plus.

C'est tout !

Dans la prochaine et dernière leçon de base, nous parlerons de comment déployer votre application Next.js en production.