سیستم مسیریابی NextJs

قسمت دوم – مسیر‌یابی در Next.js 15: قدرت App Router و ساختار پوشه‌ها

در قسمت قبلی درباره‌ی ویژگی‌های کلی Next.js 15 صحبت کردیم. حالا وقتشه یکی از مهم‌ترین ویژگی‌های این فریمورک یعنی سیستم مسیر‌یابی جدید یا همون App Router رو دقیق‌تر بررسی کنیم. این سیستم از نسخه 13 معرفی شد و حالا در نسخه 15 بسیار کامل‌تر و پایدارتر شده.

📁 پوشه `app/`: نقطه شروع همه چیز

در ساختار جدید، به‌جای استفاده از پوشه pages/، همه‌ی صفحات و مسیرها داخل پوشه‌ی app/ تعریف می‌شن. در این مدل، هر فولدر داخل app/ یک مسیر (route) محسوب می‌شه.

app/
├── page.tsx        ← صفحه اصلی مسیر
├── layout.tsx      ← لایه مشترک بین زیرصفحات
├── loading.tsx     ← صفحه لودینگ هنگام بارگذاری async
├── error.tsx       ← هندل ارورهای این مسیر
├── about/
│   └── page.tsx    ← مسیر /about
├── blog/
│   ├── layout.tsx  ← لایه‌ی مخصوص به مسیر blog
│   └── [slug]/
│       └── page.tsx ← مسیر داینامیک /blog/[slug]

✅ هر فولدر می‌تونه شامل یک یا چند فایل خاص باشه که هرکدوم نقش مهمی در تجربه کاربری دارن.

📄 `page.tsx`: فایل اصلی صفحه

همونطور که از اسمش پیداست، این فایل محتوای اصلی هر صفحه رو نمایش می‌ده. مثلاً:

// app/about/page.tsx
export default function AboutPage() {
  return <h1>درباره ما</h1>;
}

📄 `layout.tsx`: چارچوب (Layout) مشترک

با این فایل می‌تونیم ساختار مشترک بین صفحات یک مسیر رو تعریف کنیم، مثل هدر، سایدبار یا فوتر.

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

همچنین می‌تونیم در لایه‌های پایین‌تر هم layout.tsx داشته باشیم و این لایه‌ها به‌صورت تو در تو (nested layouts) عمل می‌کنن.

📄 `loading.tsx`: نمایش هنگام بارگذاری async

اگر صفحه‌ای از داده‌های async استفاده کنه، Next.js به‌صورت خودکار قبل از بارگذاری داده‌ها، loading.tsx رو نمایش می‌ده.

export default function Loading() {
  return <p>در حال بارگذاری...</p>;
}

📄 `error.tsx`: مدیریت خطاهای مسیر

در صورت بروز خطا در مسیر خاصی، مثل خطای fetch یا باگ کد، error.tsx اجرا می‌شه.

'use client'; // این فایل باید حتماً کلاینتی باشه

export default function ErrorPage({ error, reset }) {
  return (
    <div>
      <h2>خطایی رخ داده!</h2>
      <button onClick={reset}>تلاش مجدد</button>
    </div>
  );
}

📄 فایل‌های داینامیک: `[param]`

برای ایجاد مسیرهایی با پارامترهای داینامیک (مثل /blog/[slug]) از سینتکس [] استفاده می‌کنیم:

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }) {
  return <div>پست: {params.slug}</div>;
}

📄 Route Handlers: ساخت API مستقیم در مسیرها

در App Router می‌تونیم مستقیماً داخل مسیرها فایل‌هایی مثل route.ts یا route.js بسازیم و با استفاده از متدهایی مثل GET, POST, DELETE به‌صورت API عمل کنیم.

// app/api/contact/route.ts
export async function POST(req: Request) {
  const body = await req.json();
  // ذخیره یا پردازش داده
  return new Response('درخواست با موفقیت دریافت شد');
}

⚙️ نکات مهم:

فایل‌های خاص (layout, page, error, ...) فقط در پوشه‌های مسیردهی استفاده می‌شن.
اگر داخل فولدر app/blog/[slug]/ فایل layout.tsx قرار بدی، فقط برای اون مسیر اعمال می‌شه.
اگر یک فولدر فقط layout.tsx داشته باشه، خودش صفحه نیست، ولی چارچوب فرزندانش رو مشخص می‌کنه.

🧠 جمع‌بندی

App Router در Next.js 15 با ساختاری ساده ولی قدرتمند، به ما اجازه می‌ده مسیرها، صفحات، APIها، و حتی تجربه کاربری در زمان بارگذاری یا خطا رو با دقت مدیریت کنیم.
ساختار پوشه‌ای باعث شده توسعه و نگهداری پروژه‌های بزرگ بسیار راحت‌تر بشه و همه چیز به شکل ماژولار دربیاد.

سیستم مسیریابی NextJs

قسمت دوم – مسیر‌یابی در Next.js 15: قدرت App Router و ساختار پوشه‌ها

📁 پوشه app/: نقطه شروع همه چیز

📄 page.tsx: فایل اصلی صفحه

📄 layout.tsx: چارچوب (Layout) مشترک

📄 loading.tsx: نمایش هنگام بارگذاری async

📄 error.tsx: مدیریت خطاهای مسیر

📄 فایل‌های داینامیک: [param]