Crea tu API Rest con Next.js

Crear una API Rest con Next.js es muy fácil. Simplemente sigue estos pasos:

1. Crea una carpeta llamada api dentro de la carpeta pages.
2. Define las rutas y métodos de tu API.
3. Utiliza next-connect y cors para manejar los diferentes métodos y la comunicación entre cliente y servidor.

A continuación, te presento un ejemplo detallado de cómo hacerlo. 🧐

📂 Estructura de archivos

pages
  api
    hello.js

⚠️ Recuerda que las rutas de las APIs de Next.js no son lo mismo que las Serverless API Functions que Vercel ofrece en su plataforma, aunque comparten algunas similitudes.

📝 Ejemplo de endpoint

// Creamos un archivo llamado 'data.js' dentro de la carpeta 'api' en la carpeta 'pages'
// Este archivo exporta una función anónima que maneja la solicitud HTTP GET para la ruta '/api/data'
export default (req, res) => {
  // Establecemos el código de estado de la respuesta HTTP en 200
  res.statusCode = 200;
  // Establecemos el tipo de contenido de la respuesta HTTP en 'application/json'
  res.setHeader("Content-Type", "application/json");
  // Enviamos como respuesta HTTP un objeto JSON que contiene la propiedad 'estamosEn' con el valor 'Medellín JS'
  res.end(JSON.stringify({ estamosEn: "Medellín JS" }));
};

📦 Instalación de dependencias

npm i next-connect cors

or

yarn add next-connect cors

🧰 Manejo de rutas y métodos con next-connect

// Importamos las bibliotecas 'next-connect' y 'cors'
import nc from "next-connect";
import cors from "cors";

// Creamos un objeto manejador de eventos de 'next-connect'
const handler = nc()
  // Agregamos el middleware de 'cors' al manejador de eventos
  .use(cors())
  // Establecemos el método HTTP GET y enviamos una respuesta con el texto "Hola Medellín JS"
  .get((req, res) => {
    res.send("Hola Medellín JS");
  })
  // Establecemos el método HTTP POST y enviamos una respuesta con un objeto JSON que contiene la propiedad 'hola' con el valor 'MedellinJS'
  .post((req, res) => {
    res.json({ hola: "MedellinJS" });
  })
  // Establecemos el método HTTP PUT y enviamos una respuesta con el texto "Hola Amigos"
  .put(async (req, res) => {
    res.end("Hola Amigos");
  });

// Exportamos el objeto manejador de eventos como el valor predeterminado del archivo
export default handler;

🎯 CRUD de comentarios para un blog

Rutas:

• Crear comentario: POST /api/comment
• Actualizar comentario: PATCH /api/comment/:id
• Eliminar comentario: DELETE /api/comment/:id
• Obtener un comentario: GET /api/comment/:id
• Obtener todos los comentarios: GET /api/comment/

Estructura de carpetas:

pages
  api
    comments
      [id].js
      index.js

📚 Conclusión

En este post, aprendimos cómo:

1. Crear una API Rest con Next.js.
2. Utilizar next-connect para manejar rutas y métodos en nuestra API.
3. Implementar un CRUD básico para administrar comentarios en un blog.

🏋️‍♀️ Ejercicios propuestos:

1. Practica creando una API Rest para administrar usuarios en una aplicación.
2. Implementa autenticación y autorización en tu API Rest.
3. Integra tu API Rest con una base de datos real.

🔖 Resumen:

1. Crear una API Rest con Next.js es muy fácil siguiendo las convenciones de la herramienta.
2. next-connect y cors nos permiten manejar rutas, métodos y comunicaciones entre cliente y servidor de manera eficiente.
3. Puedes aplicar estas técnicas para implementar un CRUD de comentarios en un blog o cualquier otro proyecto que tengas en mente.

👋 No dudes en dejar un comentario si te fue útil este artículo, si tienes alguna duda, o si deseas añadir