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.

Use um manipulador de rotas quando o navegador precisar de dados sob demanda ou quando algo externo ao seu aplicativo precisar fazer uma chamada. Se um componente do servidor puder simplesmente ler os dados durante a renderização, deixe que ele faça isso.

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