۱. loading.js — رابط کاربری فوری با Suspense
فایل loading.js امکان نمایش رابط کاربری جایگزین را هنگام بارگذاری بخش‌های مسیر فراهم می‌کند. این فایل به‌صورت خودکار page.js و فرزندان آن را درون <Suspense> قرار می‌دهد.
// app/feed/loading.tsx
export default function Loading() {
return <p>در حال بارگذاری...</p>
}نکات مهم:
- استفاده از UI سبک مثل اسکلت یا spinner
- می‌تواند Server یا Client Component باشد
- پیش‌بارگذاری برای ناوبری سریع‌تر
- layoutهای مشترک در حین بارگذاری قابل تعامل باقی می‌مانند
استفاده دستی از Suspense:
// app/dashboard/page.tsx
import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
export default function Posts() {
return (
<section>
<Suspense fallback={<p>در حال بارگذاری فید...</p>}>
<PostFeed />
</Suspense>
<Suspense fallback={<p>در حال بارگذاری هوا...</p>}>
<Weather />
</Suspense>
</section>
)
}۲. SEO و رفتار استریم
- metadata: قبل از شروع استریم حل می‌شود
- کد وضعیت: همیشه 200 برای پاسخ‌های استریم‌شده
- Soft 404: با تگ
noindexدر HTML جلوگیری می‌شود
۳. not-found.js — صفحه 404 در سطح مسیر
فایل not-found.js برای نمایش UI سفارشی هنگام فراخوانی notFound() در یک segment استفاده می‌شود.
// app/not-found.tsx
import Link from 'next/link'
export default function NotFound() {
return (
<div>
<h2>یافت نشد</h2>
<p>منبع مورد نظر پیدا نشد</p>
<Link href="/">بازگشت به خانه</Link>
</div>
)
}استریم در برابر غیر استریم:
- استریم‌شده: وضعیت 200 + تگ
noindex - غیر استریم: وضعیت 404 واقعی
مثال async:
export default async function NotFound() {
const headersList = await headers()
const domain = headersList.get('host')
const data = await getSiteData(domain)
return (
<div>
<h2>یافت نشد: {data.name}</h2>
<p>منبع مورد نظر پیدا نشد</p>
<p><Link href="/blog">مشاهده همه پست‌ها</Link></p>
</div>
)
}۴. global-not-found.js — صفحه 404 سراسری
فایل global-not-found.js برای تعریف صفحه 404 سراسری برای مسیرهایی که با هیچ route مطابقت ندارند استفاده می‌شود.
// app/global-not-found.tsx
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function GlobalNotFound() {
return (
<html lang="en" className={inter.className}>
<body>
<h1>404 - صفحه یافت نشد</h1>
<p>این صفحه وجود ندارد.</p>
</body>
</html>
)
}فعال‌سازی در next.config.ts:
const nextConfig = {
experimental: {
globalNotFound: true,
},
}موارد استفاده:
- چند root layout مانند
(admin)و(shop) - segmentهای داینامیک سطح بالا مانند
[country]
جمع‌بندی
با استفاده از loading.js، not-found.js و global-not-found.js، Next.js امکان مدیریت رابط کاربری استریم‌شده و خطاهای 404 را به‌صورت حرفه‌ای فراهم می‌کند. این قابلیت‌ها تجربه کاربری، سرعت ناوبری، و SEO را بهبود می‌بخشند و اپلیکیشن شما را سریع، پاسخ‌گو و قابل اعتماد می‌سازند.