مقدمه‌ای بر تحول در مسیریابی Next.js 14

با ورود Next.js 14، معماری اپلیکیشن‌های وب تغییر بنیادینی یافته است. اگر از نسخه های قدیمی‌تر استفاده می‌کردید، احتمالاً با Pages Router آشنایی داشتید. اما در نسخه جدید، تمرکز اصلی بر روی App Router است که بر پایه React Server Components (RSC) بنا شده است. این تغییر تنها یک جابجایی در نام پوشه‌ها نیست، بلکه یک پارادایم جدید برای مدیریت وضعیت، رندرینگ و بارگذاری داده‌هاست.

"App Router به توسعه‌دهندگان اجازه می‌دهد تا ساختار درختی بسیار پیچیده‌ای از رابط کاربری را با مدیریت بهینه منابع و افزایش سرعت لودینگ پیاده‌سازی کنند."

ساختار پوشه‌بندی و سیستم فایل-محور (File-system Routing)

در Next.js 14، سیستم مسیریابی بر اساس ساختار پوشه‌ها در دایرکتوری app عمل می‌کند. برخلاف مدل قدیمی، هر پوشه می‌تواند یک بخش از مسیر (Route Segment) باشد، اما برای اینکه یک مسیر قابل دسترس باشد، حتماً باید شامل یک فایل page.js باشد.

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

برای تسلط بر مسیریاب، باید با نقش هر فایل در ساختار پوشه‌ها آشنا باشید:

  • page.js: این فایل محتوای اصلی مسیر را تعریف می‌کند. بدون این فایل، پوشه صرفاً یک بخش از مسیر خواهد بود اما خود صفحه نمایش داده نمی‌شود.
  • layout.js: این فایل برای تعریف ساختارهای مشترک (مانند هدر و فوتر) استفاده می‌شود. ویژگی مهم Layoutها این است که هنگام جابجایی بین زیرمسیرها، دوباره رندر نمی‌شوند و وضعیت (State) خود را حفظ می‌کنند.
  • template.js: مشابه Layout است، اما با این تفاوت که در هر بار ناوبری، یک نمونه جدید از آن ساخته می‌شود. این برای زمانی که نیاز به انیمیشن‌های ورود یا ریست کردن وضعیت دارید، عالی است.
  • loading.js: به صورت خودکار از React Suspense استفاده می‌کند تا در حین بارگذاری داده‌ها، یک وضعیت انتظار به کاربر نشان دهد.
  • error.js: یک مرز خطا (Error Boundary) ایجاد می‌کند که از فروپاشی کل اپلیکیشن در صورت بروز خطا در یک بخش جلوگیری می‌کند.

مسیرهای پویا (Dynamic Routes)

در بسیاری از اپلیکیشن‌ها، ما نیاز داریم صفحاتی داشته باشیم که بر اساس شناسه یا نام محصول تغییر کنند. در Next.js 14، این کار با استفاده از براکت [] در نام پوشه انجام می‌شود.

// ساختار پوشه برای محصول: app/products/[id]/page.js

در مثال بالا، کاربر می‌تواند با آدرس‌هایی مثل /products/1 یا /products/iphone به صفحه دسترسی داشته باشد. پارامتر id به صورت خودکار در دسترس کامپوننت صفحه قرار می‌گیرد.

مسیرهای Catch-all و Optional Catch-all

گاهی نیاز داریم تمام مسیرهای زیرمجموعه یک پوشه را مدیریت کنیم. برای این کار از سه نقطه استفاده می‌کنیم:

  • Catch-all Segments: با استفاده از [...slug]، تمام بخش‌های مسیر گرفته می‌شوند. مثلاً /shop/clothes/tops/t-shirts همگی تحت یک مسیر قرار می‌گیرند.
  • Optional Catch-all Segments: با استفاده از [[...slug]]، حتی اگر هیچ پارامتری وجود نداشته باشد، مسیر اصلی هم شامل می‌شود.

ناوبری پیشرفته: Link Component و useRouter

برای جابجایی بین صفحات، دو روش اصلی در Next.js وجود دارد. روش اول و پیشنهادی، استفاده از کامپوننت <Link> است. این کامپوننت باعث می‌شود انتقال بین صفحات بدون رفرش شدن کل صفحه انجام شود (Client-side Navigation) و همچنین قابلیت Prefetching دارد؛ یعنی به محض اینکه لینک در معرض دید کاربر قرار می‌گیرد، Next.js محتوای آن صفحه را در پس‌زمینه لود می‌کند تا سرعت انتقال فوق‌العاده شود.

import Link from 'next/link';

درباره ما

روش دوم، استفاده از هوک useRouter از کتابخانه next/navigation است. این روش برای ناوبری‌های برنامه‌ریزی شده (مانند انتقال کاربر پس از کلیک روی یک دکمه یا ثبت فرم) استفاده می‌شود. توجه داشته باشید که در App Router، حتماً باید از next/navigation استفاده کنید، نه next/router.

مسیرهای موازی و مسیرهای رهگیر (Parallel & Intercepting Routes)

این دو ویژگی، قدرتمندترین ابزارهای Next.js 14 برای ساخت رابط‌های کاربری پیچیده هستند.

Parallel Routes (مسیرهای موازی)

با استفاده از اسلات‌ها (Slots) که با علامت @ مشخص می‌شوند، می‌توانید چندین صفحه را به طور همزمان در یک Layout نمایش دهید. این قابلیت برای ساخت داشبوردهایی که چندین بخش مستقل دارند (مثلاً بخش اخبار و بخش پروفایل در یک صفحه) بسیار کاربردی است.

Intercepting Routes (مسیرهای رهگیر)

این ویژگی به شما اجازه می‌دهد مسیر یک صفحه را در یک زمینه خاص "رهگیری" کنید. یک مثال کلاسیک، باز شدن یک پست اینستاگرام در یک مودال (Modal) هنگام کلیک روی آن در صفحه اصلی است، در حالی که اگر کاربر صفحه را رفرش کند، پست در یک صفحه کامل باز می‌شود. این کار با استفاده از پوشه‌هایی مثل (.)، (..) و (...) انجام می‌شود.

مدیریت امنیت و Middleware

در Next.js 14، Middleware

... ادامه مقاله در وبسایت AUAZ.ir