Cómo utilizar las rutas de la API de Next.js

Aprenda esta poderosa técnica proporcionada por Next.js para crear un punto final de API dentro de una aplicación Next.js

Además de crearrutas de la página, lo que significa que las páginas se envían al navegador como páginas web, Next.js puede crearRutas API.

Esta es una característica muy interesante porque significa que Next.js se puede usar para crear una interfaz para los datos que Next.js almacena y recupera, transfiriendo JSON a través de solicitudes de recuperación.

Las rutas API viven bajo el/pages/api/carpeta y se asignan a la/apipunto final.

Esta característica esmuyútil al crear aplicaciones.

En esas rutas, escribimos código Node.js (en lugar de código React). Es un cambio de paradigma, te mueves del frontend al backend, pero sin problemas.

Di que tienes un/pages/api/comments.jsarchivo, cuyo objetivo es devolver los comentarios de una publicación de blog como JSON.

Supongamos que tiene una lista de comentarios almacenados en uncomments.jsonexpediente:

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

Aquí hay un código de muestra, que devuelve al cliente la lista de comentarios:

import comments from './comments.json'

export default (req, res) => { res.status(200).json(feeds) }

Escuchará en el/api/commmentsURL para solicitudes GET, y puede intentar llamarla usando su navegador:

Las rutas API también pueden usarenrutamiento dinámicocomo páginas, use el[]sintaxis para crear una ruta API dinámica, como/pages/api/comments/[id].jsque recuperará los comentarios específicos de una identificación de publicación.

Dentro de[id].jspuedes recuperar elidvalor buscándolo dentro delreq.queryobjeto:

import comments from '../comments.json'

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

Aquí puede ver el código anterior en acción:

En páginas dinámicas, necesitaría importaruseRouterdesdenext/router, luego obtenga el objeto enrutador usandoconst router = useRouter(), y luego podríamos obtener elidvalor usandorouter.query.id.

En el lado del servidor, todo es más fácil, ya que la consulta se adjunta al objeto de la solicitud.

Si realiza una solicitud POST, todo funciona de la misma manera: todo pasa por esa exportación predeterminada.

Para separar POST de GET y otros métodos HTTP (PUT, DELETE), busque elreq.methodvalor:

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

Además dereq.queryyreq.methodya vimos, tenemos acceso a las cookies haciendo referenciareq.cookies, el cuerpo de la solicitud enreq.body.

Bajo el capó, todo esto es impulsado porMicro, una biblioteca que impulsa microservicios HTTP asincrónicos, creada por el mismo equipo que creó Next.js.

Puede hacer uso de cualquier Micro middleware en nuestras rutas API para agregar más funcionalidad.

Descarga mi gratisManual de Next.js


Más próximos tutoriales: