App Router در Next.js چیست؟ راهنمای کامل مسیریابی مدرن در Next.js

فریمورک Next.js یکی از محبوب‌ترین ابزارها برای توسعه برنامه‌های React است. با معرفی App Router، این فریمورک تحول بزرگی در نحوه مدیریت مسیرها، دریافت داده‌ها و ساخت رابط‌های کاربری ایجاد کرده است. App Router که از نسخه 13 معرفی شد، معماری جدیدی را برای توسعه برنامه‌های مدرن وب ارائه می‌دهد.

App Router چیست؟

App Router سیستم جدید مسیریابی در Next.js است که بر پایه پوشه app کار می‌کند. در این روش، ساختار فایل‌ها و پوشه‌ها مستقیماً مسیرهای برنامه را مشخص می‌کنند و قابلیت‌های پیشرفته‌ای مانند Server Components، Layoutهای تو در تو و Streaming را فراهم می‌سازند.

ساختار ساده:

app/
├── page.js
├── about/
│   └── page.js
└── blog/
    └── page.js

Routes generated:

• / → Home page
• /about → About page
• /blog → Blog page

Key Benefits of App Router

1. Server Components به صورت پیش‌فرض

در App Router کامپوننت‌ها به صورت پیش‌فرض روی سرور اجرا می‌شوند که باعث بهبود عملکرد و کاهش حجم جاوااسکریپت سمت کاربر می‌شود.

2. Nested Layouts

یکی از مهم‌ترین قابلیت‌های App Router امکان تعریف Layoutهای تو در تو است.

مثال

export default function DashboardLayout({ children }) {
  return (
    <div>
      <nav>Dashboard Menu</nav>
      {children}
    </div>
  );
}

این Layout در تمام صفحات زیرمجموعه داشبورد اعمال خواهد شد.

3. Data Fetching ساده‌تر

دریافت داده‌ها مستقیماً داخل Server Componentها امکان‌پذیر است:

async function Posts() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return <div>{posts.length}</div>;
}

نیازی به getServerSideProps یا getStaticProps وجود ندارد.

4. Streaming و Suspense

App Router از React Suspense و Streaming پشتیبانی می‌کند که باعث بارگذاری سریع‌تر صفحات می‌شود.

فایل‌های مهم در App Router

page.js

نمایانگر یک صفحه در برنامه است.

layout.js

ساختار مشترک بین صفحات را تعریف می‌کند.

loading.js

در زمان بارگذاری داده‌ها نمایش داده می‌شود.

error.js

برای مدیریت خطاها استفاده می‌شود.

not-found.js

برای صفحات 404 سفارشی کاربرد دارد.

تفاوت App Router و Pages Router

App Router	Pages Router
app directory	pages directory
Server Components	Client-first approach
Nested Layouts	Limited layout support
Modern Data Fetching	getServerSideProps
Streaming Support	Limited support

چه زمانی از App Router استفاده کنیم؟

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

نتیجه‌گیری

App Router نسل جدید سیستم مسیریابی در Next.js است که توسعه برنامه‌های React را سریع‌تر، مقیاس‌پذیرتر و بهینه‌تر می‌کند. با استفاده از Server Components، Nested Layouts و Data Fetching مدرن، می‌توان اپلیکیشن‌های حرفه‌ای و قدرتمندی ایجاد کرد.