Detalles de las Rutas API

Aquí hay información esencial que deberías conocer sobre las Rutas API.

No consultes una Ruta API desde getStaticProps o getStaticPaths

No deberías consultar una Ruta API desde getStaticProps o getStaticPaths. En su lugar, escribe tu código del lado del servidor directamente en getStaticProps o getStaticPaths (o llama a una función auxiliar).

La razón es: getStaticProps y getStaticPaths se ejecutan únicamente en el servidor y nunca en el cliente. Además, estas funciones no se incluyen en el paquete JS para el navegador. Esto significa que puedes escribir código como consultas directas a la base de datos sin enviarlas a los navegadores. Lee la documentación sobre Escribir código del lado del servidor para aprender más.

Un buen caso de uso: Manejo de entrada de formularios

Un buen caso de uso para las Rutas API es el manejo de entrada de formularios. Por ejemplo, puedes crear un formulario en tu página y hacer que envíe una solicitud POST a tu Ruta API. Luego puedes escribir código para guardarlo directamente en tu base de datos. El código de la Ruta API no será parte de tu paquete cliente, por lo que puedes escribir código del lado del servidor de manera segura.

export default function handler(req, res) {
  const email = req.body.email;
  // Luego guarda el email en tu base de datos, etc...
}

Modo de Vista Previa

La Generación Estática es útil cuando tus páginas obtienen datos de un CMS sin interfaz. Sin embargo, no es ideal cuando estás escribiendo un borrador en tu CMS y quieres previsualizar el borrador inmediatamente en tu página. Querrías que Next.js renderice estas páginas en tiempo de solicitud en lugar de en tiempo de compilación y que obtenga el contenido del borrador en lugar del contenido publicado. Querrías que Next.js evite la Generación Estática solo para este caso específico.

Next.js tiene una función llamada Modo de Vista Previa para resolver el problema anterior, y utiliza Rutas API. Para aprender más sobre esto, consulta nuestra documentación sobre Modo de Vista Previa.

Rutas API Dinámicas

Las Rutas API pueden ser dinámicas, al igual que las páginas regulares. Consulta nuestra documentación sobre Rutas API Dinámicas para aprender más.

¡Eso es todo!

En la siguiente y última lección básica, hablaremos sobre cómo desplegar tu aplicación Next.js en producción.