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 أي خصائص.
جلب البيانات (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>
)
}سجل الإصدارات
| الإصدار | التغييرات |
|---|---|
v13.3.0 | ملف app/not-found الأساسي يتعامل مع عناوين URL غير المتطابقة عالميًا. |
v13.0.0 | تم تقديم not-found. |