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

جزء من قسم أساسيات 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 لا يطابق أي شيء سينتهي به المطاف here، بدلاً من العرض العادي المدمج لصفحة 404.

2. المُحفِّز (The 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. قم بعمل تصدير افتراضي (Default-export) لمكون يُرجع عنصر <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>
    );
}