ملف 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 . |