Rotas Dinâmicas

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

Um menu com quarenta pratos não precisa de quarenta pastas. Você quer que /menu/pizza, /menu/pasta e /menu/tiramisu sejam a mesma página exibindo dados diferentes.

É isso que os colchetes em um nome de pasta significam:

app/
    menu/
        [slug]/
            page.jsx     ->  /menu/pizza
                         ->  /menu/pasta
                         ->  /menu/anything-at-all

Uma pasta normal corresponde ao seu próprio nome. Uma pasta [entre colchetes] corresponde a qualquer segmento e lembra o que correspondeu. A palavra dentro dos colchetes é o nome pelo qual você a lerá de volta: [slug] fornece slug, [id] fornece id.

O Next passa esse valor para a página como uma prop chamada params:

// app/menu/[slug]/page.jsx
export default async function Dish({ params }) {
    const { slug } = await params;

    return <h1>{slug}</h1>;
}

Três coisas acontecem nesse pequeno arquivo:

A página recebe uma prop params. Toda página recebe uma, e para uma rota dinâmica ela contém os segmentos correspondentes.
params é uma Promise no Next 15, então você usa await nela. É por isso que o componente é async. O Capítulo 5 explica por que as páginas podem ser assim.
A desestruturação extrai slug, cujo nome vem diretamente da pasta [slug].

Visite /menu/pasta e slug é "pasta". Um arquivo, cada prato.

Desafio

Fácil

A pasta dinâmica já está lá: app/menu/[slug]/page.jsx responde a qualquer URL em /menu. O problema é que ela exibe pizza não importa qual prato você pediu.

Torne o componente async.
Leia o segmento correspondente com const { slug } = await params;.
Renderize slug dentro do <h1 id="dish"> em vez do texto codificado diretamente.

Os testes visitam dois pratos diferentes e esperam dois títulos diferentes.

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