مسیریابی پیشرفته و هوک‌های عملکرد در Next.js — راهنمای توسعه‌دهنده برای App Router

Next.js مجموعه‌ای غنی از هوک‌های کلاینت و ابزارهای کش و ناوبری را در اختیار توسعه‌دهندگان قرار می‌دهد. از خواندن پارامترهای مسیر تا گزارش Web Vitals و مدیریت کش، این مقاله مهم‌ترین ابزارهای App Router را با مثال‌های کاربردی معرفی می‌کند.

useParamsuseRouterupdateTaguseLinkStatus

~3 دقیقه مطالعه • بروزرسانی ۱۰ آبان ۱۴۰۴

۱. useParams — خواندن پارامترهای داینامیک مسیر


از useParams() برای دسترسی به پارامترهای داینامیک URL در کامپوننت‌های کلاینت استفاده کنید.

'use client'
import { useParams } from 'next/navigation'

const params = useParams<{ tag: string; item: string }>()
// URL: /shop/shoes/nike-air-max-97
// params: { tag: 'shoes', item: 'nike-air-max-97' }

۲. usePathname — دریافت مسیر فعلی


usePathname() مسیر فعلی URL را برمی‌گرداند. برای جلوگیری از mismatch در SSR، آن را درون <Suspense> قرار دهید.


۳. useSearchParams — خواندن پارامترهای کوئری


از useSearchParams() برای خواندن query string استفاده کنید. خروجی آن یک آبجکت URLSearchParams فقط‌خواندنی است.


۴. useRouter — ناوبری برنامه‌نویسی‌شده


useRouter() امکان ناوبری دستی را در کامپوننت‌های کلاینت فراهم می‌کند.

  • push(): افزودن مسیر به history
  • replace(): جایگزینی مسیر فعلی
  • refresh(): بارگذاری مجدد مسیر
  • prefetch(): پیش‌بارگذاری مسیر

۵. useSelectedLayoutSegment(s) — خواندن سگمنت‌های فعال


برای ساخت breadcrumb یا تب‌های پویا، از useSelectedLayoutSegment() یا useSelectedLayoutSegments() استفاده کنید.


۶. useReportWebVitals — گزارش Web Vitals


برای گزارش معیارهایی مانند FCP، LCP و CLS از useReportWebVitals() استفاده کنید. توصیه می‌شود این هوک را در یک کامپوننت مجزا در layout اصلی قرار دهید.


۷. useLinkStatus — بازخورد ناوبری در لینک‌ها


useLinkStatus() وضعیت pending لینک را بررسی می‌کند و برای نمایش انیمیشن‌های subtle مفید است.


۸. unauthorized — مدیریت خطای 401 (آزمایشی)


unauthorized() خطای 401 را پرتاب کرده و صفحه unauthorized.tsx را نمایش می‌دهد. برای فعال‌سازی، authInterrupts را در next.config.js روشن کنید.


۹. unstable_cache — کش عملیات سنگین


unstable_cache() نتایج توابع سنگین مانند کوئری‌های دیتابیس را کش می‌کند. از tags و revalidate برای کنترل دقیق استفاده کنید.


۱۰. updateTag — بازسازی آنی کش


updateTag() در Server Actions برای باطل‌کردن فوری کش پس از mutation استفاده می‌شود.


۱۱. unstable_noStore — غیرفعال‌سازی کش


unstable_noStore() از کش‌شدن مسیر جلوگیری می‌کند و رندر داینامیک را تضمین می‌کند.


۱۲. unstable_rethrow — حفظ رفتار خطاهای Next.js


برای حفظ رفتار notFound() یا redirect() درون try/catch از unstable_rethrow() استفاده کنید.


۱۳. userAgent — تشخیص دستگاه و مرورگر


در Route Handlerها از userAgent() برای تشخیص نوع دستگاه و بازنویسی مسیر استفاده کنید.


جمع‌بندی


Hook / APIPurposeContext
useParams()Read dynamic route paramsClient Components
usePathname()Get current pathnameClient Components
useSearchParams()Read query stringsClient Components
useRouter()Programmatic navigationClient Components
useLinkStatus()Inline feedback for linksClient Components
useReportWebVitals()Report performance metricsClient Components
unauthorized()Custom 401 error handlingServer Components
unstable_cache()Memoize expensive operationsServer Components
updateTag()Invalidate cache after mutationServer Actions
unstable_noStore()Disable cachingServer Components
unstable_rethrow()Preserve error behaviorServer Components
userAgent()Detect device/browser infoRoute Handlers

نوشته و پژوهش شده توسط دکتر شاهین صیامی