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.

Recurra a un manejador de rutas (route handler) cuando el navegador necesite datos a petición, o cuando algo fuera de su aplicación necesite realizar una llamada. Si un componente de servidor puede simplemente leer los datos mientras se renderiza, permítale hacerlo.

Desafío

Intermedio

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

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

Al hacer clic en #load-btn se debe llenar #dish-list con los cuatro nombres.

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>
    );
}