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 demasiado permisiva. app/menu/[slug]/page.jsx coincide con /menu/pizza y también coincide felizmente con /menu/asdfgh, después muestra 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: toda URL que no coincida con nada llegará aquí, en lugar de mostrar el 404 integrado simple.

2. El desencadenador. 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 devuelve un valor y no haces return de él: llamarlo detiene la página justo ahí y muestra el not-found.jsx más cercano. Todo lo que está después de if puede asumir con seguridad que el plato existe, por eso la comprobación va al principio.

Desafío

Intermedio

/menu/sushi actualmente muestra una página de dish para un dish que no está en el menu. Cierra el hueco.

Completa el archivo app/not-found.jsx. Exporta un componente de forma predeterminada 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 mostrar cualquier elemento.

/menu/pizza todavía debe funcionar.

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