Manipuladores de Rota

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 37 de 47.

Componentes server cobrem a maioria das necessidades de dados, porque eles já rodam no servidor. Mas às vezes o navegador precisa pedir dados mais tarde, após um clique, após uma caixa de busca estabilizar, e para isso você precisa de um endpoint para chamar.

Uma pasta com um arquivo route.js dentro dela se torna exatamente isso. A mesma regra de roteamento das páginas, porém com um arquivo especial diferente:

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

Dentro, você exporta uma função com o nome do método HTTP:

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

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

Response.json(...) é a resposta completa: ela serializa o valor e define o tipo de conteúdo JSON. Você também pode exportar POST, PUT, DELETE a partir do mesmo arquivo.

Então a parte do cliente é um código de navegador comum:

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

Duas coisas para ter em mente. Uma pasta pode conter um page.jsx ou um route.js, nunca ambos: ambos reivindicariam a mesma URL. E route.js não é um componente: ele retorna um Response, não JSX.

Recorra a um route handler quando o navegador precisar de dados sob demanda, ou quando algo fora do seu app precisar fazer uma chamada. Se um server component puder apenas ler os dados enquanto renderiza, deixe que ele o faça.

Desafio

Médio

Crie uma pequena API e chame-a do navegador.

Em app/api/dishes/route.js, exporte uma async function GET que retorne dishes como JSON.
Em components/DishLoader.jsx, finalize loadDishes: busque /api/dishes, leia o corpo em JSON e armazene os nomes dos pratos com setNames.

Clicar em #load-btn deve preencher #dish-list com todos os quatro nomes.

Experimente você mesmo

import './globals.css';

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

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