404(Not Found) 페이지

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨. 47개 중 9번째.

동적 라우트는 지나치게 관대합니다. app/menu/[slug]/page.jsx는 /menu/pizza와 일치하고, /menu/asdfgh와도 똑같이 아무렇지 않게 일치한 다음, 존재하지 않는 dish에 대한 dish 페이지를 렌더링합니다.

Next.js는 이 해결책의 두 가지 측면을 모두 제공합니다.

1. 404 화면. page.jsx 및 layout.jsx과 같은 특별한 파일 이름 그룹에 속하는 not-found.jsx라는 이름의 파일입니다:

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

app/not-found.jsx에 넣으면 전체 app에 적용됩니다. 아무것도 일치하지 않는 모든 URL은 기본 제공되는 단순한 404 페이지 대신 이곳으로 이동합니다.

2. 트리거. URL이 경로와 일치하지만 데이터가 존재하지 않는 경우가 있습니다. 이것이 /menu/asdfgh의 경우이며, 이를 판단할 수 있는 것은 오직 여러분의 코드뿐입니다. 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()는 값을 반환하지 않으며 이를 반환하지도 않습니다. 이를 호출하면 바로 그 지점에서 페이지 실행이 중지되고 가장 가까운 not-found.jsx가 표시됩니다. if 뒤의 모든 코드는 dish가 실제로 존재한다고 안전하게 가정할 수 있으므로, 이 검사는 맨 위에 배치됩니다.

챌린지

중급

/menu/sushi는 현재 메뉴에 없는 요리의 요리 페이지를 렌더링합니다. 이 문제를 해결하세요.

app/not-found.jsx 파일을 완성하세요. id="not-found-title"과 정확한 텍스트 Dish not found가 포함된 <h1>을 반환하는 컴포넌트를 기본 내보내기 하세요.
app/menu/[slug]/page.jsx에서 next/navigation으로부터 notFound를 가져오세요.
slug이 dishes 배열에 없으면 렌더링하기 전에 notFound()를 호출하세요.

/menu/pizza는 계속 작동해야 합니다.

직접 해보기

import './globals.css';

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

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