Páginas Não Encontradas

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 9 de 47.

Uma rota dinâmica é generosa até demais. app/menu/[slug]/page.jsx corresponde a /menu/pizza, e corresponde a /menu/asdfgh com a mesma facilidade, depois renderiza uma página de dish para um dish que não existe.

O Next.js oferece as duas metades da solução.

1. A tela 404. Um arquivo chamado not-found.jsx, do mesmo clube de nomes de arquivos especiais que page.jsx e layout.jsx:

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

Coloque-o em app/not-found.jsx e ele cobre todo o app: cada URL que não corresponder a nada cai aqui, em vez de no 404 padrão integrado.

2. O gatilho. Às vezes, a URL corresponde a uma rota, mas os dados não existem. Esse é o caso de /menu/asdfgh, e apenas o seu código pode saber. Chame 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>;
}

O notFound() não retorna um valor e você não o retorna: chamá-lo interrompe a página imediatamente e exibe o not-found.jsx mais próximo. Tudo após o if pode presumir com segurança que o prato existe, e é por isso que a verificação de proteção (guard) fica no topo.

Desafio

Médio

/menu/sushi atualmente renderiza uma página de prato para um prato que não está no menu. Feche essa lacuna.

Crie app/not-found.jsx. Exporte por padrão (default) um componente que retorna um <h1> com id="not-found-title" e o texto exato Dish not found.
Em app/menu/[slug]/page.jsx, importe notFound de next/navigation.
Se slug não estiver no array dishes, chame notFound() antes de renderizar qualquer coisa.

/menu/pizza ainda deve funcionar.

Experimente você mesmo

import './globals.css';

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

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