default.js در Next.js — مدیریت مسیرهای موازی و داینامیک با عشق و دقت

۱. default.js چیست؟

در مسیرهای موازی، Next.js هنگام ناوبری نرم (soft navigation) وضعیت فعال هر slot را حفظ می‌کند. اما در ناوبری سخت (hard navigation)، این وضعیت قابل بازیابی نیست. در این حالت، فایل default.js به‌عنوان fallback برای slotهایی که با URL فعلی مطابقت ندارند، رندر می‌شود.

مثال:

اگر مسیر /settings را باز کنیم، slot @team صفحه تنظیمات را نمایش می‌دهد، اما slot @analytics چون صفحه‌ای ندارد، باید فایل default.js داشته باشد تا خطا ندهد.

بازگرداندن 404 به‌صورت دستی:

// app/@team/default.js
import { notFound } from 'next/navigation'

export default function Default() {
  notFound()
}

۲. دریافت پارامترهای داینامیک در default.js

پارامترها به‌صورت params به کامپوننت ارسال می‌شوند و باید با async/await یا use() خوانده شوند.

// app/[artist]/@sidebar/default.js
export default async function Default({ params }) {
  const { artist } = await params
}

۳. مسیرهای داینامیک در Next.js

برای ساخت مسیرهای داینامیک، نام پوشه را داخل براکت قرار دهید:

// app/blog/[slug]/page.tsx
export default async function Page({ params }) {
  const { slug } = await params
  return <div>My Post: {slug}</div>
}

۴. استفاده در کامپوننت‌های کلاینتی

در کامپوننت‌های کلاینتی، می‌توان از use() یا useParams() برای دریافت پارامترها استفاده کرد.

'use client'
import { use } from 'react'

export default function BlogPostPage({ params }) {
  const { slug } = use(params)
  return <p>{slug}</p>
}

۵. مسیرهای catch-all و optional catch-all

برای دریافت چند بخش از URL:

• catch-all: [...slug] → فقط مسیرهایی که پارامتر دارند
• optional catch-all: [[...slug]] → شامل مسیر بدون پارامتر هم می‌شود

مثال:

// app/shop/[[...slug]]/page.js
// /shop → { slug: undefined }
// /shop/clothes → { slug: ['clothes'] }
// /shop/clothes/tops → { slug: ['clothes', 'tops'] }

۶. تایپ پارامترها در TypeScript

برای تایپ دقیق‌تر، از PageProps یا RouteContext استفاده کنید. همچنین می‌توانید با assertValidLocale مقدار را اعتبارسنجی کرده و نوع آن را محدود کنید.

function assertValidLocale(value: string): asserts value is Locale {
  if (!isValidLocale(value)) notFound()
}

۷. استفاده از generateStaticParams

برای ساخت مسیرهای استاتیک در زمان build:

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then(res => res.json())
  return posts.map(post => ({ slug: post.slug }))
}

درخواست‌های fetch در این تابع به‌صورت خودکار deduplicate می‌شوند تا سرعت build افزایش یابد.

جمع‌بندی

فایل default.js در Next.js نقش حیاتی در مدیریت مسیرهای موازی و fallback دارد. با استفاده از پارامترهای داینامیک، مسیرهای catch-all، و قابلیت‌های TypeScript، می‌توانید اپلیکیشنی پویا، سریع و قابل اعتماد بسازید.