ملف not-found.js

يُستخدم ملف not-found لعرض واجهة المستخدم عند استدعاء دالة notFound داخل جزء من المسار. بالإضافة إلى تقديم واجهة مستخدم مخصصة، سيقوم Next.js بإرجاع رمز حالة HTTP 200 للاستجابات المُتدفقة، و404 للاستجابات غير المُتدفقة.

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}
import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

المراجع

الخصائص (Props)

لا تقبل مكونات not-found.js أي خصائص.

معلومة مفيدة: بالإضافة إلى التقاط أخطاء notFound() المتوقعة، فإن ملف app/not-found.js الرئيسي يتعامل أيضًا مع أي عناوين URL غير متطابقة لتطبيقك بالكامل. هذا يعني أن المستخدمين الذين يزورون عنوان URL غير مدعوم في تطبيقك سيشاهدون واجهة المستخدم التي يتم تصديرها بواسطة ملف app/not-found.js.

أمثلة

جلب البيانات (Data Fetching)

بشكل افتراضي، not-found هو مكون خادم (Server Component). يمكنك تحديده كـ async لجلب وعرض البيانات:

import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const headersList = await headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  )
}
import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const headersList = await headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  )
}

إذا كنت بحاجة إلى استخدام خطافات (hooks) مكون العميل مثل usePathname لعرض المحتوى بناءً على المسار، يجب عليك جلب البيانات من جانب العميل بدلاً من ذلك.

سجل الإصدارات

الإصدارالتغييرات
v13.3.0ملف app/not-found الرئيسي يتعامل مع عناوين URL غير المتطابقة عالميًا.
v13.0.0تم تقديم not-found.