Next.js یکی از محبوب‌ترین فریمورک‌های مبتنی بر React است که به توسعه‌دهندگان امکانات زیادی برای ساخت وب‌سایت‌ها و اپلیکیشن‌های سریع و بهینه ارائه می‌دهد. یکی از ویژگی‌های برجسته‌ی Next.js، سیستم Routing (مسیریابی) پیشرفته‌ی آن است که امکان مدیریت مسیریابی و نمایش صفحات را به‌طور ساده و کارآمد فراهم می‌کند. در این مقاله، انواع Routing در Next.js را به‌طور دقیق بررسی می‌کنیم و نحوه‌ی استفاده از آن‌ها را به‌خوبی شرح می‌دهیم.

1. مسیریابی مبتنی بر فایل‌ها (File-based Routing)

یکی از ویژگی‌های اصلی Next.js که آن را از بسیاری از فریمورک‌های دیگر متمایز می‌کند، مسیریابی مبتنی بر فایل‌ها است. در این نوع مسیریابی، هر فایل جاوااسکریپت (یا TypeScript) که در پوشه‌ی pages ایجاد شود، به‌طور خودکار به یک مسیر (route) در اپلیکیشن تبدیل می‌شود. این ویژگی باعث ساده‌تر شدن فرآیند مسیریابی می‌شود زیرا نیازی به تعریف مسیرها به‌صورت دستی در فایل‌های جاوااسکریپت نیست.

مثال:

فرض کنید شما سه فایل زیر را در پوشه‌ی pages دارید:

/pages
   └── index.js
   └── about.js
   └── contact.js

• فایل index.js به مسیر / متصل می‌شود.
• فایل about.js به مسیر /about متصل می‌شود.
• فایل contact.js به مسیر /contact متصل می‌شود.

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

2. مسیریابی پویا (Dynamic Routing)

علاوه بر مسیریابی ثابت، Next.js از مسیریابی پویا نیز پشتیبانی می‌کند. این قابلیت زمانی مفید است که بخواهید مسیرهایی ایجاد کنید که پارامترهای پویا داشته باشند، مانند صفحات محصولات یا کاربران که با شناسه‌های مختلفی تولید می‌شوند.

نحوه پیاده‌سازی:

برای تعریف یک مسیر پویا، باید از یک نام پوشه یا فایل داخل [] استفاده کنید. به‌عنوان مثال:

/pages
   └── product
      └── [id].js

در اینجا، [id].js یک مسیر پویا ایجاد می‌کند که به هر چیزی بعد از /product/ اجازه‌ی شناسایی می‌دهد، مثلاً /product/1 یا /product/42. در داخل این فایل می‌توانید با استفاده از useRouter پارامترها را استخراج کنید:

import { useRouter } from 'next/router';

const Product = () => {
  const router = useRouter();
  const { id } = router.query;

  return <div>Product ID: {id}</div>;
};

export default Product;

3. مسیریابی تو در تو (Nested Routing)

Next.js از مسیریابی تو در تو نیز پشتیبانی می‌کند. شما می‌توانید پوشه‌هایی داخل پوشه‌ی pages ایجاد کنید که ساختار سلسله‌مراتبی را برای مسیرها فراهم کنند.

مثال:

فرض کنید ساختار پوشه‌ها به‌صورت زیر است:

/pages
   └── blog
       └── index.js
       └── [id].js

• فایل index.js به مسیر /blog متصل می‌شود.
• فایل [id].js به مسیر /blog/[id] متصل می‌شود.

بنابراین، مسیر /blog نمایش‌دهنده‌ی صفحه‌ی اصلی وبلاگ خواهد بود و مسیر /blog/123 نمایش‌دهنده‌ی صفحه‌ای خاص از وبلاگ با شناسه‌ی 123 خواهد بود.

4. مسیریابی Catch-all

در برخی مواقع، نیاز دارید که همه‌ی مسیرهای ممکن را تحت یک فایل مدیریت کنید. Next.js این امکان را با استفاده از مسیریابی Catch-all فراهم می‌کند.

نحوه پیاده‌سازی:

برای ایجاد یک مسیر Catch-all، از [...] استفاده کنید. به‌عنوان مثال:

/pages
   └── docs
      └── [...slug].js

در اینجا، فایل [...slug].js تمام مسیرهایی که با /docs شروع می‌شوند را می‌پوشاند. مثلاً /docs/intro و /docs/guide/getting-started هردو به این فایل متصل می‌شوند.

داخل این فایل می‌توانید پارامترهای مسیر را به‌صورت آرایه دریافت کنید:

import { useRouter } from 'next/router';

const Docs = () => {
  const router = useRouter();
  const { slug } = router.query;

  return <div>Doc Path: {slug.join('/')}</div>;
};

export default Docs;

5. مسیریابی API

Next.js امکان ایجاد APIهای سمت سرور را با استفاده از فایل‌های داخل پوشه‌ی api/ ارائه می‌دهد. هر فایل داخل این پوشه به یک مسیر API تبدیل می‌شود. این ویژگی به شما این امکان را می‌دهد که به‌سرعت APIهای موردنیاز را ایجاد و به آن‌ها دسترسی داشته باشید.

مثال:

فرض کنید فایل زیر در مسیر pages/api/ ایجاد شده است:

/pages
   └── api
      └── hello.js

کد داخل فایل hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World!' });
}

این فایل به مسیر /api/hello متصل می‌شود و با درخواست‌های HTTP به این مسیر پاسخ می‌دهد.

این نوع از مسیریابی، در مقایسه با استفاده از فریمورک‌های API مثل Express.js، بسیار سریع‌تر و ساده‌تر پیاده‌سازی می‌شود.

6. مسیریابی سفارشی (Custom Routing)

اگرچه Next.js سیستم مسیریابی خودکار و پویا را فراهم می‌کند، اما شما می‌توانید مسیرهای سفارشی نیز تنظیم کنید. این کار با استفاده از next.config.js و تابع redirects یا rewrites امکان‌پذیر است.

Redirects:

شما می‌توانید مسیرها را به مسیرهای دیگری هدایت (redirect) کنید:

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ];
  },
};

در این مثال، تمام درخواست‌های /old-blog/:slug به مسیر /blog/:slug هدایت می‌شوند.

Rewrites:

همچنین می‌توانید مسیرها را به مسیرهای دیگر بدون تغییر URL در مرورگر کاربر بازنویسی (rewrite) کنید:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about-us',
        destination: '/about',
      },
    ];
  },
};

در این مثال، درخواست به مسیر /about-us به‌صورت پنهانی به مسیر /about هدایت می‌شود.