مسیریابی پیشرفته و هوک‌های عملکرد در 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

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

مقالات مرتبط

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

Next.js با معرفی قابلیت‌های آزمایشی جدید، امکان کنترل دقیق‌تر دسترسی و کش داده‌ها را فراهم کرده است. تابع unauthorized برای مدیریت خطای 401 و هدایت کاربران به صفحه ورود، unstable_cache برای کش هوشمند عملیات سنگین، updateTag برای بازسازی آنی داده‌ها، و useLinkStatus برای نمایش وضعیت ناوبری استفاده می‌شوند. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات مهم بررسی می‌کند.

ادامه

redirect و refresh در Next.js — ریدایرکت‌های هوشمند و تازه‌سازی مسیر در Server Actions

تابع redirect در Next.js برای هدایت کاربر به مسیر جدید استفاده می‌شود و بسته به نوع استفاده، پاسخ HTTP با وضعیت 307 یا 303 ارسال می‌کند. این تابع در Server Components، Client Components، Route Handlers و Server Actions قابل استفاده است. تابع refresh نیز برای تازه‌سازی مسیر کلاینت از درون Server Action استفاده می‌شود. این مقاله نحوه استفاده از هر دو تابع را با مثال‌های کاربردی و نکات مهم توضیح می‌دهد.

ادامه

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

ادامه

headers، ImageResponse، notFound و permanentRedirect در Next.js — مدیریت درخواست‌ها، تولید تصویر، خطا و ریدایرکت

Next.js ابزارهای قدرتمندی برای مدیریت درخواست‌ها و پاسخ‌ها در کامپوننت‌های سروری فراهم کرده است. تابع headers برای خواندن هدرهای HTTP ورودی، ImageResponse برای تولید تصاویر داینامیک، notFound برای نمایش صفحه خطای 404، و permanentRedirect برای ریدایرکت دائمی کاربران استفاده می‌شوند. این مقاله نحوه استفاده از هر یک را با مثال‌های کاربردی توضیح می‌دهد.

ادامه

راهنمای کامل استفاده از metadata و generateMetadata در Next.js

در نسخه‌های مدرن Next.js، مدیریت metadata صفحات بسیار قدرتمندتر و ساده‌تر شده است. metadata به‌صورت خودکار در تگ <head> صفحات تزریق می‌شود و نقش مهمی در SEO، اشتراک‌گذاری اجتماعی و تجربه کاربری دارد. این مقاله دو روش اصلی تعریف metadata را بررسی می‌کند: استفاده از آبجکت ثابت metadata و تابع داینامیک generateMetadata.

ادامه

generateStaticParams در Next.js — تولید مسیرهای داینامیک به‌صورت استاتیک در زمان build

تابع generateStaticParams در Next.js برای تولید مسیرهای داینامیک به‌صورت استاتیک در زمان build استفاده می‌شود. این تابع جایگزین getStaticPaths در Pages Router است و به شما اجازه می‌دهد مسیرهایی مانند [slug] یا [id] را از قبل تولید کنید. همچنین می‌توان مسیرهای چندگانه، catch-all، یا مسیرهای وابسته به والد را با این روش مدیریت کرد. این مقاله نحوه استفاده از generateStaticParams را با مثال‌های مختلف توضیح می‌دهد

ادامه