Aguardando Parâmetros de Rota

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

Uma rota dinâmica passa o segmento da URL para a sua página por meio de params. No Next 15, há um detalhe importante que vale a pena memorizar:

params é uma promise.

// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
    const { slug } = await params;
    // /menu/carbonara  ->  slug === 'carbonara'
}

Esqueça o await e nada quebra, o que é exatamente o que torna isso traiçoeiro. Desestruturar uma Promise apenas dá undefined:

const { slug } = params;   // undefined
const dish = await getDish(slug);   // não busca nada

A página ainda é renderizada. Ela está apenas em branco, ou cheia de fallbacks, e você sai procurando na sua camada de dados por um bug que nunca esteve lá.

A mesma regra se aplica a searchParams. Ambos são promises, ambos precisam ser aguardados e ambos estão disponíveis apenas para componentes de servidor async, mais um motivo pelo qual a página que você acabou de escrever teve que ser async.

Por que usar promises afinal? Para que o Next.js possa começar a renderizar as partes da sua página que não dependem da URL antes mesmo de terminar de processar as partes que dependem.

Desafio

Fácil

app/menu/[slug]/page.jsx está quase certo, mas ele nunca aguarda por params com await, então cada prato retorna como Unknown dish.

Use await em params antes da desestruturação: const { slug } = await params;

lib/data.js e a página inicial estão bloqueados. Visitar /menu/carbonara deve exibir Carbonara em #dish-name e seu preço em #dish-price.

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