مثال لینک و مسیریابی

در نسخه‌های جدید Next.js، شما می‌توانید مستقیماً از متدهای بومی مرورگر یعنی window.history.pushState و window.history.replaceState برای به‌روزرسانی آدرس بار (URL) بدون رفرش شدن صفحه استفاده کنید.

نکته جذاب اینجاست که این متدهای بومی کاملاً با روتر داخلی Next.js یکپارچه (Integrate) شده‌اند. این یعنی به محض استفاده از آن‌ها، هوک‌های روتر مثل usePathname و useSearchParams متوجه تغییرات آدرس شده و خود را به‌روزرسانی می‌کنند.

چیزهایی که در این درس یاد می‌گیرید:

• کاربرد و نحوه استفاده از window.history.pushState برای افزودن تاریخچه جدید

• کاربرد و نحوه استفاده از window.history.replaceState برای جایگزینی تاریخچه فعلی

• نحوه همگام‌سازی مروگر با هوک‌های ناوبری Next.js

۱. متد window.history.pushState

زمانی از pushState استفاده می‌کنیم که می‌خواهیم یک آیتم یا آدرس جدید به پشته تاریخچه (History Stack) مرورگر اضافه شود. در این حالت، اگر کاربر روی دکمه Back (بازگشت) مرورگر کلیک کند، به حالت قبلی URL برمی‌گردد.

مثال کاربردی: فیلتر و مرتب‌سازی لیست محصولات

فرض کنید می‌خواهید دکمه‌هایی برای مرتب‌سازی محصولات (صعودی/نزولی) بسازید و این وضعیت را در URL ذخیره کنید تا کاربر با زدن دکمه Back مرورگر، به حالت مرتب‌سازی قبلی بازگردد:

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SortProducts() {
  const searchParams = useSearchParams()
 
  function updateSorting(sortOrder: string) {
    // ۱. کپی کردن پارامترهای فعلی URL
    const params = new URLSearchParams(searchParams.toString())
    
    // ۲. ست کردن پارامتر جدید یا تغییر پارامتر قبلی
    params.set('sort', sortOrder)
    
    // ۳. تزریق به تاریخچه مرورگر (آدرس جدید به هیستوری push می‌شود)
    window.history.pushState(null, '', `?${params.toString()}`)
  }
 
  return (
    <div className="flex gap-2">
      <button onClick={() => updateSorting('asc')}>مرتب‌سازی صعودی</button>
      <button onClick={() => updateSorting('desc')}>مرتب‌سازی نزولی</button>
    </div>
  )
}

۲. متد window.history.replaceState

زمانی از replaceState استفاده می‌کنیم که می‌خواهیم آدرس فعلی در پشته تاریخچه مرورگر را با آدرس جدید اوررایت (Jayeghazin) کنیم. در این حالت، رکورد جدیدی ثبت نمی‌شود و اگر کاربر دکمه Back مرورگر را بزند، به حالت قبل از این کلیک برنمی‌گردد (بلکه به کل از این صفحه خارج شده و به صفحه کاملاً قبلی هدایت می‌شود).

مثال کاربردی: تغییر زبان سایت (Locale Switcher)

تغییر زبان کل اپلیکیشن نمونه بارز استفاده از replaceState است؛ چون منطقی نیست که کاربر با زدن دکمه Back مرورگر، فقط زبان صفحه‌اش تغییر کند، بلکه تمایل دارد به صفحه قبلی وب‌سایت بازگردد:

'use client'
 
import { usePathname } from 'next/navigation'
 
export function LocaleSwitcher() {
  const pathname = usePathname()
 
  function switchLocale(locale: string) {
    // تولید آدرس جدید بر اساس زبان انتخابی (مثلاً en/about/ یا fr/about/)
    const newPath = `/${locale}${pathname}`
    
    // جایگزین کردن آدرس فعلی مرورگر بدون اضافه کردن ردیف جدید به هیستوری
    window.history.replaceState(null, '', newPath)
  }
 
  return (
    <div className="flex gap-2">
      <button onClick={() => switchLocale('en')}>English</button>
      <button onClick={() => switchLocale('fr')}>French</button>
    </div>
  )
}

خلاصه تفاوت‌ها (Quick Comparison)