not-found.js

يستخدم ملف not-found لعرض واجهة المستخدم عند استدعاء دالة notFound داخل مقطع مسار. بالإضافة إلى تقديم واجهة مستخدم مخصصة، سيقوم Next.js بإرجاع رمز حالة HTTP 200 للاستجابات المُجراة (streamed)، و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>
  )
}

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

الخصائص (Props)

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

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

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

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

export default async function NotFound() {
  const headersList = 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 = 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.