Cómo crear rutas de API dinámicas en Next.js
Next.js es un marco de trabajo basado en React que permite a los desarrolladores crear aplicaciones web full-stack mediante la extensión de las últimas características de React. Next te ayuda a añadir funcionalidades y optimizaciones adicionales a tus aplicaciones de React, como generación de sitios estáticos (SSG), renderizado del lado del servidor (SSR), división y agrupación automática de código, y rutas de API dinámicas.
Next.js es un marco de trabajo basado en React que permite a los desarrolladores crear aplicaciones web de stack completo mediante la extensión de las últimas características de React.
Next te ayuda a añadir características adicionales y optimizaciones a tus aplicaciones de React, como la generación estática de sitios (SSG), renderizado del lado del servidor (SSR), división y agrupación automática de código, y rutas de API dinámicas.
En este artículo, aprenderás sobre las rutas de API dinámicas en Next.js: qué son, cómo crearlas y cómo ampliar sus funcionalidades.
¿Qué son las rutas de API?
Antes de saber qué es una ruta de API, debes saber qué es una ruta y qué es una API.
Una ruta es una ruta única de carpetas anidadas. Next.js utiliza un enrutador de páginas para navegar por las diversas páginas en una aplicación web. Cada archivo en el directorio de páginas de un código de aplicación de Next.js representa una página en la aplicación web.
Por ejemplo, si creas un archivo checkout.js en tu carpeta de páginas y visitas la URL: “dominio-de-tu-aplicación/checkout” en tu navegador, verás el contenido del archivo checkout.js renderizado.
Una API (acrónimo de interfaz de programación de aplicaciones) sirve como un medio de comunicación entre dos computadoras o piezas de software. En una aplicación web, una API facilita la comunicación entre el cliente y el servidor.
Una ruta de API es una URL que dirige las solicitudes entrantes del cliente al recurso de servidor apropiado que manejará las solicitudes.
Las rutas de API en Next.js te permiten crear puntos finales de API como funciones sin servidor de Node.js. Estos puntos finales te permiten hacer solicitudes HTTPS y comunicarte con una base de datos.
Cómo crear una ruta de API
Para crear una ruta de API, crearás una carpeta llamada API en tu carpeta de páginas. Cualquier archivo dentro del directorio /pages/api se tratará como una ruta de API en lugar de una página.
Por ejemplo, puedes crear una carpeta llamada API en tu carpeta de páginas y luego crear un archivo llamado start.js dentro de ella con el siguiente código:
// pages/api/start.jsexport default function handler(req, res) { res.status(200).json({ message: 'Solicitud exitosa' });}Ahora has creado una ruta de API. Puedes acceder a esta ruta de API a través de esta URL: /api/start. Puedes usarla para manejar una solicitud HTTP y enviar la respuesta de vuelta al cliente.
El argumento de solicitud es una instancia de un mensaje entrante HTTP junto con algunos middleware preconstruidos. El argumento de respuesta es una instancia de una respuesta del servidor HTTP junto con algunas funciones auxiliares.
Puedes crear una ruta de API para manejar solo un método HTTP. Para hacerlo, deberás crear un nuevo archivo llamado get.js. Luego puedes agregar este código al archivo:
// pages/api/get.jsexport default function handler(req, res) { if (req.method === 'GET') { res.status(200).json({ message: 'Esta es una solicitud GET' }); } else { res.status(405).json({ message: 'Método no permitido' }); }}Esta ruta de API se puede acceder a través de esta URL: /api/get y solo manejará solicitudes HTTP get.
También puedes crear una ruta de API para manejar más de un método HTTP. Para hacerlo, crea un nuevo archivo llamado all.js y coloca este código en él:
// pages/api/all.jsfunction handler(req, res) { if (req.method === 'GET') { // Manejar solicitud GET res.status(200).json({ message: 'Esta es una solicitud GET' }); } else if (req.method === 'POST') { // Manejar solicitud POST res.status(200).json({ message: 'Esta es una solicitud POST' }); } else if (req.method === 'PUT') { // Manejar solicitud PUT res.status(200).json({ message: 'Esta es una solicitud PUT' }); } else if (req.method === 'DELETE') { // Manejar solicitud DELETE res.status(200).json({ message: 'Esta es una solicitud DELETE' }); }}Esta ruta de API se puede acceder a través de esta URL: /api/all y puede manejar cuatro métodos HTTP (GET, POST, PUT y DELETE).
Cómo crear rutas de API dinámicas
Next.js permite a los desarrolladores crear rutas dinámicas. Las rutas dinámicas son rutas cuyos nombres de segmentos no se conocen de antemano. Se crean a partir de datos dinámicos.
Una ruta de API dinámica es una forma de ruta dinámica que te permite crear puntos finales de API con segmentos dinámicos en la ruta.
Estos segmentos se completan en el momento de la solicitud o se pregeneran en el momento de la construcción. También pueden ser almacenados en caché por el navegador, lo que puede mejorar el rendimiento de las páginas con acceso frecuente. Esto las convierte en una buena opción para aplicaciones que esperan mucho tráfico.
Sintaxis de rutas dinámicas
Existe una sintaxis particular para crear rutas de API dinámicas en Next.js. Next.js te permite crear rutas de API dinámicas envolviendo el nombre del archivo entre corchetes.
Para crear una ruta de API dinámica para una API de biblioteca que obtiene datos de autor con IDs dinámicos, puedes empezar creando una nueva carpeta llamada authors y luego crear un archivo llamado [id].js y agregar el siguiente código:
// api/authors/[id].jsexport default function handler(req, res) { const { id } = req.query; if (req.method === 'GET') { res.status(200).json({ id, message: 'Datos de autor obtenidos exitosamente' }); }}La ruta de API para el código anterior será /author/[id], y si se pasa este parámetro { id: '234' }, coincidirá con la URL: /author/234.
Puedes hacer que tu ruta de API dinámica maneje diferentes métodos HTTP. Para hacerlo, borra el código en la carpeta [id].js y en su lugar, coloca este código:
// api/authors/[id].jsexport default function handler(req, res) { const { id } = req.query; if (req.method === 'GET') { res.status(200).json({ id, message: 'Datos de autor obtenidos exitosamente' }); } else if (req.method === 'POST') { res.status(200).json({ id, message: 'Datos de autor enviados exitosamente' }); } else if (req.method === 'PUT') { res.status(200).json({ id, message: 'Datos de autor actualizados exitosamente' }); } else if (req.method === 'DELETE') { res.status(200).json({ id, message: 'Datos de autor eliminados exitosamente' }); }}Segmentos para capturar todo
También puedes pasar subparámetros a tus rutas de API dinámicas. Para hacer esto, debes ampliar tu ruta de API dinámica para capturar todos los segmentos posteriores que se le pasen añadiendo tres puntos antes del nombre del archivo entre corchetes. Esto garantizará que las rutas de API puedan recibir más de un subparámetro.
Para crear una ruta de API dinámica que capture todos los segmentos, crea una carpeta llamada store y crea un archivo en la carpeta store llamado [...gadgets].js. Luego agrega el siguiente código:
// api/store/[...gadgets].jsexport default function handler(req, res) { const { gadget } = req.query; if (req.method === 'GET') { res.status(200).json({ id, message: 'Datos obtenidos exitosamente' }); }}La ruta de API para el código anterior será pages/api/store/[...gadgets].js. Si se le pasa este parámetro { gadget: ['phones', 'iphones', 'iphone15'] }, coincidirá con las URLs: /store/phones o /store/phones/iphones o /store/phones/iphones/iphone15.
Segmentos opcionales para capturar todo
Puedes hacer que los segmentos de captura de todo de las rutas de API dinámicas sean opcionales. Al hacerlo, no solo podrán coincidir con todos los segmentos posteriores de la ruta de la URL, sino también con la ruta principal de la URL.
Para hacer que los segmentos posteriores opcionales de captura de todo vistos en la sección anterior sean opcionales, agrega un corchete cuadrado al nombre del archivo de la siguiente manera: [[...store]].js]. Los segmentos opcionales de captura de todo no solo podrán coincidir con las URLs: /store/phones o /store/phones/iphones o /store/phones/iphones/iphone15 solas, sino también con URLs como /store.
Conclusión
Este artículo te ha ayudado a comprender las rutas de API dinámicas en Next.js, incluyendo qué son, cómo se usan y cómo crearlas.
Leave a Reply