Manejadores de rutas

Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 37 de 47.

Los componentes de servidor cubren la mayoría de las necesidades de datos, porque ya se ejecutan en el servidor. Pero a veces el navegador tiene que solicitar datos más tarde, después de un clic, después de que una casilla de búsqueda se estabilice, y para eso necesitas un endpoint al que llamar.

Una carpeta con un route.js en ella se convierte exactamente en eso. Misma regla de enrutamiento que las páginas, diferente archivo especial:

app/
    api/
        dishes/
            route.js     ->  /api/dishes

Dentro, exportas una función que lleva el nombre del método HTTP:

import { dishes } from '../../../lib/dishes.js';

export async function GET() {
    return Response.json(dishes);
}

Response.json(...) es la respuesta completa: serializa el valor y establece el tipo de contenido JSON. También puedes exportar POST, PUT, DELETE desde el mismo archivo.

Después, la otra mitad del cliente es código de navegador ordinario:

const res = await fetch('/api/dishes');
const data = await res.json();

Dos cosas para tener claras. Una carpeta puede contener un page.jsx o un route.js, nunca ambos: ambos reclamarían la misma URL. Y route.js no es un componente: devuelve un Response, no JSX.

Recurre a un controlador de rutas cuando el navegador necesite datos bajo demanda o cuando algo externo a tu aplicación necesite realizar una llamada. Si un componente del servidor puede simplemente leer los datos durante el renderizado, déjalo hacerlo.

Desafío

Intermedio

Construye una API pequeña y llámala desde el navegador.

En app/api/dishes/route.js, exporta una async function GET que devuelva dishes como JSON.
En components/DishLoader.jsx, termina loadDishes: obtén /api/dishes, lee el cuerpo JSON y almacena los nombres de los platos con setNames.

Al hacer clic en #load-btn, se deben rellenar los cuatro nombres en #dish-list.

Pruébalo tú mismo

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}