Páginas no encontradas

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 9 de 47.

Una ruta dinámica es generosa en exceso. app/menu/[slug]/page.jsx coincide con /menu/pizza, y coincide con /menu/asdfgh con la misma facilidad, después renderiza una página de plato para un plato que no existe.

Next.js te ofrece ambas partes de la solución.

1. La pantalla 404. Un archivo llamado not-found.jsx, del mismo club de nombres de archivo especiales que page.jsx y layout.jsx:

// app/not-found.jsx
export default function NotFound() {
    return <h1>We don't have that</h1>;
}

Colócalo en app/not-found.jsx y cubrirá toda la aplicación: cualquier URL que no coincida con nada terminará aquí, en lugar de en la página 404 integrada común.

2. El disparador. A veces la URL coincide con una ruta pero los datos no existen. Ese es el caso de /menu/asdfgh, y solo tu código puede saberlo. Llama a notFound():

import { notFound } from 'next/navigation';

const dishes = ['pizza', 'pasta'];

export default async function Dish({ params }) {
    const { slug } = await params;

    if (!dishes.includes(slug)) {
        notFound();
    }

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

notFound() no retorna un valor y no lo retornas: llamarlo detiene la página justo ahí y muestra el not-found.jsx más cercano. Todo lo que esté después del if puede asumir con seguridad que el dish es real, por lo que la guardia va al principio.

Desafío

Intermedio

Actualmente /menu/sushi muestra una página de plato para un plato que no está en el menú. Soluciona este problema.

Crea app/not-found.jsx. Exporta por defecto un componente que devuelva un <h1> con id="not-found-title" y el texto exacto Dish not found.
En app/menu/[slug]/page.jsx, importa notFound desde next/navigation.
Si slug no está en el arreglo dishes, llama a notFound() antes de renderizar cualquier cosa.

/menu/pizza debe seguir funcionando.

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