Pagine non trovate

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 9 di 47.

Una route dinamica è generosa fino all’eccesso. app/menu/[slug]/page.jsx corrisponde a /menu/pizza e anche a /menu/asdfgh senza problemi, quindi mostra una pagina del piatto per un piatto che non esiste.

Next.js ti offre entrambe le parti della soluzione.

1. La schermata 404. Un file chiamato not-found.jsx, nella stessa categoria di nomi di file speciali di page.jsx e layout.jsx:

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

Inseriscilo in app/not-found.jsx e coprirà l’intera app: ogni URL che non corrisponde a nulla finirà qui, invece che nella semplice pagina 404 predefinita.

2. Il trigger. A volte l'URL corrisponde a una route, ma i dati non esistono. Questo è il caso di /menu/asdfgh, e solo il tuo codice può stabilirlo. Chiama 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() non restituisce un valore e non devi restituirlo: chiamarlo interrompe subito la pagina e mostra il file not-found.jsx più vicino. Tutto ciò che segue if può presumere tranquillamente che il piatto esista, ecco perché il controllo va all'inizio.

Sfida

Medio

/menu/sushi al momento mostra la pagina di un piatto che non è nel menu. Chiudi la falla.

Completa il file app/not-found.jsx. Esporta come predefinito un componente che restituisce un <h1> con id="not-found-title" e il testo esatto Dish not found.
In app/menu/[slug]/page.jsx, importa notFound da next/navigation.
Se slug non è nell’array dishes, chiama notFound() prima di visualizzare qualsiasi cosa.

/menu/pizza deve continuare a funzionare.

Provalo tu

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}