Espera de parámetros de ruta

Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 24 de 47.

Una ruta dinámica proporciona a tu página el segmento de la URL mediante params. En Next 15 hay un detalle importante que conviene memorizar:

params es una promesa.

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

Olvida el await y nada se rompe, que es exactamente lo que lo hace tan engañoso. Desestructurar una promesa solo te da undefined:

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

La página aún se renderiza. Simplemente está en blanco, o llena de valores de reserva, y terminas buscando en tu capa de datos un error que nunca estuvo allí.

La misma regla se aplica a searchParams. Ambas son promesas, ambas deben esperarse y ambas solo están disponibles para los componentes de servidor async, otra razón más por la que la página que acabas de escribir tenía que ser asíncrona.

¿Por qué usar promesas? Para que Next.js pueda empezar a renderizar las partes de tu página que no dependen de la URL antes de terminar de resolver las partes que sí dependen de ella.

Desafío

Fácil

app/menu/[slug]/page.jsx está casi bien, pero nunca hace await de params, por lo que cada plato vuelve como Unknown dish.

Espera params con await antes de desestructurar: const { slug } = await params;

lib/data.js y la página de inicio están bloqueadas. Visitar /menu/carbonara debe mostrar Carbonara en #dish-name y su precio en #dish-price.

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