چگونه با Next.js مسیرها را تعریف کنیم؟

Next.js یک فریم‌ورک محبوب برای توسعه برنامه‌های React است و یکی از ویژگی‌های عالی آن، سیستم مسیریابی خودکار آن است. با استفاده از Next.js، شما می‌توانید به راحتی صفحات مختلفی برای اپلیکیشن خود ایجاد کنید بدون نیاز به تنظیمات اضافی. در این مطلب، می‌خواهیم به بررسی چگونگی تعریف و استفاده از مسیرها با استفاده از App Router در Next.js بپردازیم.

ابتدا باید یک فایل در یک دایرکتوری 'pages' در پروژه خود بسازید. نام فایل مورد نظر شما به آدرس URL متناظر خواهد بود. مثلاً اگر فایلی به نام about.js دارید، این صفحه به صورت خودکار در /about در دسترس خواهد بود. این ویژگی باعث می‌شود که ساختار اپلیکیشن شما بسیار ساده و سازماندهی شده باشد.

بخش مهمی از توسعه نرم‌افزار درک چگونگی کارکرد مسیرها به همراه پارامترها است. Next.js همچنین از مسیرهای داینامیک پشتیبانی می‌کند؛ به این معنا که شما می‌توانید فایل‌هایی با نام‌های شرایطی در براکت داشته باشید، مانند [id].js که به معنی مسیری با پارامتر است.

یک ویژگی قابل توجه دیگر استفاده از فایل _app.js است که برای سفارشی‌سازی کلیه صفحات استفاده می‌شود. این فایل به شما اجازه می‌دهد تا تغییرات در سطح برنامه برای تمامی صفحات اعمال کنید، مانند افزودن یک قالب عمومی یا تنظیم یک استایل سراسری.

همچنین شما می‌توانید از لینکی کردن استفاده کنید تا به راحتی بین صفحات مختلف جستجو کنید. Next.js با استفاده از کامپوننت Link از کتابخانه next/link به شما اجازه می‌دهد تا بتوانید لینک‌های داینامیک و قدرتمندی بسازید که SEO پسندی و سریع باشند.

در نهایت، اگر نیاز به مسیریابی پیچیده دارید، می‌توانید از API مسیریابی سفارشی استفاده کنید. این API به شما امکان ایجاد مسیرها و کنترل‌هایی فراتر از قابلیت‌های ابتدایی را می‌دهد که در پروژه‌های بزرگتر و پیچیده‌تر بسیار کارآمد است.

نمونه کد:

// لینک دادن بین صفحات مختلف
import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>خوش آمدید به سایت ما</h1>
      <Link href="/about">
        <a>درباره ما</a>
      </Link>
    </div>
  );
}

export default HomePage;

توضیح کد خط به خط: