LogoENEnglish

loading.js و not-found.js در Next.js — رابط کاربری استریم‌شده، بازخورد فوری، و 404های دل‌نشین

Next.js با استفاده از فایل loading.js امکان نمایش رابط کاربری فوری هنگام بارگذاری را فراهم می‌کند و با فایل‌های not-found.js و global-not-found.js مدیریت خطاهای 404 را به‌صورت ظریف انجام می‌دهد. این مقاله نحوهٔ ساخت حالت‌های بارگذاری، صفحات 404 سفارشی، و بهینه‌سازی تجربه کاربری و SEO را آموزش می‌دهد.

loading.jsnot-found.jsglobal-not-found.jsSuspense

~3 دقیقه مطالعه • بروزرسانی ۷ آبان ۱۴۰۴

۱. 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 را بهبود می‌بخشند و اپلیکیشن شما را سریع، پاسخ‌گو و قابل اعتماد می‌سازند.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article