Comment utiliser les routes d'API Next.js

Apprenez cette technique puissante fournie par Next.js pour créer un point de terminaison d'API dans une application Next.js

En plus de créeritinéraires de page, ce qui signifie que les pages sont servies au navigateur sous forme de pages Web, Next.js peut créerRoutes API.

C'est une fonctionnalité très intéressante car cela signifie que Next.js peut être utilisé pour créer une interface pour les données qui sont stockées et récupérées par Next.js lui-même, en transférant JSON via des requêtes de récupération.

Les routes API vivent sous le/pages/api/dossier et sont mappés au/apipoint final.

Cette fonction esttrèsutile lors de la création d'applications.

Dans ces routes, nous écrivons du code Node.js (plutôt que du code React). C'est un changement de paradigme, vous passez du frontend au backend, mais de manière très transparente.

Dites que vous avez un/pages/api/comments.jsfichier, dont le but est de renvoyer les commentaires d'un article de blog au format JSON.

Supposons que vous ayez une liste de commentaires stockés dans uncomments.jsondéposer:

[
  {
    "comment": "First"
  },
  {
    "comment": "Nice post"
  }
]

Voici un exemple de code, qui renvoie au client la liste des commentaires:

import comments from './comments.json'
export default (req, res) => {
res.status(200).json(feeds)
}

Il écoutera sur le/api/commmentsURL des requêtes GET, et vous pouvez essayer de l'appeler à l'aide de votre navigateur:

Les routes API peuvent également utiliserroutage dynamiquecomme des pages, utilisez le[]syntaxe pour créer une route API dynamique, comme/pages/api/comments/[id].jsqui récupérera les commentaires spécifiques à un identifiant de publication.

À l'intérieur de[id].jsvous pouvez récupérer leidvaleur en le recherchant dans lereq.queryobjet:

import comments from '../comments.json'
export default (req, res) => {
res.status(200).json({ post: req.query.id, comments })
}

Voici, vous pouvez voir le code ci-dessus en action:

Dans les pages dynamiques, vous devez importeruseRouterdenext/router, puis récupérez l'objet routeur en utilisantconst router = useRouter(), et ensuite nous pourrions obtenir leidvaleur en utilisantrouter.query.id.

Côté serveur, tout est plus simple, car la requête est attachée à l'objet de requête.

Si vous effectuez une requête POST, tout fonctionne de la même manière - tout passe par cette exportation par défaut.

Pour séparer POST de GET et d'autres méthodes HTTP (PUT, DELETE), recherchez lereq.methodévaluer:

export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break
    case 'POST':
      //...
      break
    default:
      res.status(405).end() //Method Not Allowed
      break
  }
}

En plus dereq.queryetreq.methodnous l'avons déjà vu, nous avons accès aux cookies en référençantreq.cookies, le corps de la requête dansreq.body.

Sous les capots, tout est propulsé parMicro, une bibliothèque qui alimente des microservices HTTP asynchrones, créée par la même équipe qui a construit Next.js.

Vous pouvez utiliser n'importe quel middleware Micro dans nos routes API pour ajouter plus de fonctionnalités.

Téléchargez mon gratuitManuel Next.js

Comment utiliser les routes d'API Next.js

Apprenez cette technique puissante fournie par Next.js pour créer un point de terminaison d'API dans une application Next.js

Plus de prochains tutoriels: