صفحات غير موجودة

جزء من قسم أساسيات Next.js في رحلة React على Coddy. الدرس 9 من 47.

المسار الديناميكي متسامح إلى حدّ الخطأ. يطابق app/menu/[slug]/page.jsx المسار /menu/pizza، كما يطابق /menu/asdfgh بالسعادة نفسها، ثم يعرض صفحة dish لـ dish غير موجود.

يمنحك 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>
    );
}