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에 두면 앱 전체에 적용됩니다. 일치하는 항목이 없는 모든 URL은 기본 내장 404 페이지 대신 이곳으로 연결됩니다.

2. 트리거(trigger). 때로는 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()는 값을 반환하지 않으며 return할 필요도 없습니다. 이를 호출하면 그 즉시 페이지 실행이 중단되고 가장 가까운 not-found.jsx를 보여줍니다. if문 이후의 모든 코드는 안전하게 dish가 존재한다고 가정할 수 있으므로, 가드 구문(guard)을 최상단에 두는 것입니다.

챌린지

중급

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

app/not-found.jsx를 생성하세요. id="not-found-title" 속성과 정확한 텍스트 Dish not found를 가지는 <h1>을 반환하는 컴포넌트를 default로 export하세요.
app/menu/[slug]/page.jsx에서 next/navigation으로부터 notFound를 import하세요.
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>
    );
}