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, então renderiza uma página de prato para um prato que não existe.

Next.js oferece as duas partes da solução.

1. A tela 404. Um arquivo chamado not-found.jsx, do mesmo grupo de nomes de arquivo 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: toda URL que não corresponde a nada chega aqui, em vez de aparecer no 404 integrado simples.

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

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 depois do if pode presumir com segurança que o prato existe, e é por isso que a verificação fica no início.

Desafio

Médio

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

Complete o arquivo app/not-found.jsx. Exporte um componente como padrão que retorne 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>
    );
}