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 le pasa a tu página el segmento de la URL a través de params. En Next 15 hay un detalle que vale la pena 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 necesitan ser esperadas y ambas solo están disponibles para componentes de servidor async, una razón más por la que la página que acabas de escribir tenía que ser async.

¿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 que haya terminado de determinar las partes que sí dependen.

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