معرفی و استفاده از App Router در Next.js

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

یکی از مواردی که App Router را از سایر روش‌های مسیریابی متمایز می‌کند، قابلیت ادغام کامل با سایر قسمت‌های Next.js مانند data fetching، pages و API routes است. این بدین معناست که شما می‌توانید صفحات و API خود را به راحتی با توجه به نیاز پروژه خود، ساختار دهی کنید.

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

در ادامه، قدم به قدم نحوه تنظیم و استفاده از App Router را بررسی خواهیم کرد. این بخش شامل توضیحات دقیق و نمونه‌ کدهایی است که می‌توانید در پروژه‌های خود به کار ببرید. با ما همراه باشید تا با یادگیری این بخش ارزشمند، مهارت خود در توسعه وب‌ اپلیکیشن‌های مدرن را ارتقاء دهید.

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  const handleNavigation = () => {
    router.push('/new-page');
  };

  return (
    <div>
      <button onClick={handleNavigation}>Go to New Page</button>
    </div>
  );
};

export default MyComponent;

در خط import { useRouter } from 'next/router';، ما از هوک useRouter که بخشی از کتابخانه next/router است، استفاده می‌کنیم تا به مسیریاب برنامه دسترسی پیدا کنیم.
در کامپوننت MyComponent، با تعریف const router = useRouter();، نمونه‌ای از مسیریاب Next.js را برای مدیریت مسیریابی دریافت می‌کنیم.
تابع handleNavigation که در کامپوننت تعریف شده است، از متد router.push استفاده می‌کند تا کاربر را به مسیر جدید /new-page هدایت کند.
در قسمت رندر، دکمه‌ای تعریف شده است که با کلیک بر روی آن، تابع handleNavigation اجرا می‌شود و کاربر را به صفحه جدید می‌برد.
کد کامپوننت به صورت پیش‌فرض از طریق export default MyComponent; صادر می‌شود تا بتوانیم آن را به راحتی در سایر بخش‌های پروژه استفاده کنیم.