דפים לא נמצאו

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 9 מתוך 47.

נתיב דינמי נדיב עד כדי הגזמה. app/menu/[slug]/page.jsx מתאים ל־/menu/pizza, והוא מתאים בשמחה לא פחות גם ל־/menu/asdfgh, ואז מציג דף מנה עבור מנה שלא קיימת.

Next.js מספק לך את שני חלקי הפתרון.

1. מסך 404. קובץ בשם not-found.jsx, באותה קבוצה של שמות קבצים מיוחדים כמו page.jsx ו-layout.jsx:

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

שים אותו ב־app/not-found.jsx, והוא מכסה את כל האפליקציה: כל כתובת 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 יכול להניח בבטחה שהמנה אמיתית, ולכן תנאי הבדיקה מופיע בראש.

אתגר

בינוני

/menu/sushi מציג כרגע דף של מנה שאינה בתפריט. סגרו את הפרצה.

השלימו את הקובץ app/not-found.jsx. ייצאו כברירת מחדל רכיב שמחזיר <h1> עם id="not-found-title" והטקסט המדויק Dish not found.
ב־app/menu/[slug]/page.jsx, ייבאו את notFound מתוך next/navigation.
אם 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>
    );
}