آموزش App Router در Next.js 14

معرفی App Router

Next.js 14 با معرفی App Router تحول بزرگی در ساخت اپلیکیشن‌های React ایجاد کرده است. این معماری جدید امکان استفاده از Server Components، Streaming و Layoutهای تو در تو را فراهم می‌کند.

ساختار پوشه‌ها

در App Router، هر پوشه یک مسیر (route) را مشخص می‌کند و فایل‌های page.js و layout.js نقش کلیدی دارند.

app/
  layout.js     # روت لایه اصلی
  page.js       # صفحه اصلی
  about/
    page.js     # مسیر /about
  blog/
    [slug]/
      page.js   # مسیر داینامیک /blog/...
      

Server vs Client Components

یکی از مهم‌ترین ویژگی‌های App Router، تفکیک Server و Client Components است. با استفاده از 'use client' می‌توانید کامپوننت‌های سمت کلاینت را مشخص کنید.

جمع‌بندی

App Router یک گام بزرگ به جلو در توسعه Next.js است و با یادگیری آن می‌توانید اپلیکیشن‌های سریع‌تر و بهینه‌تری بسازید.