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 . |