instrumentation-client.js و مسیرهای قابل‌جای‌گذاری در Next.js — نظارت زودهنگام و ناوبری هوشمند

۱. instrumentation-client.js — نظارت قبل از تعامل

این فایل در مرحله‌ای خاص از چرخه اجرای اپلیکیشن اجرا می‌شود:

• بعد از بارگذاری HTML
• قبل از hydration توسط React
• قبل از تعامل کاربر

نمونه کد:

// instrumentation-client.ts
performance.mark('app-init')
console.log('Analytics initialized')

window.addEventListener('error', (event) => {
  reportError(event.error)
})

ردیابی ناوبری:

export function onRouterTransitionStart(url, navigationType) {
  console.log(`Navigation started: ${navigationType} to ${url}`)
  performance.mark(`nav-start-${Date.now()}`)
}

بهینه‌سازی عملکرد:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry instanceof PerformanceNavigationTiming) {
      console.log('Time to Interactive:', entry.loadEventEnd - startTime)
    }
  }
})

observer.observe({ entryTypes: ['navigation'] })

بارگذاری polyfillها:

import './lib/polyfills'

if (!window.ResizeObserver) {
  import('./lib/polyfills/resize-observer').then((mod) => {
    window.ResizeObserver = mod.default
  })
}

۲. مسیرهای قابل‌جای‌گذاری — نمایش محتوا بدون تغییر زمینه

با استفاده از مسیرهای قابل‌جای‌گذاری، می‌توان محتواهایی مانند مودال‌ها را از مسیرهای دیگر درون layout فعلی نمایش داد.

مثال:

نمایش عکس در مودال از مسیر /photo/123 درون صفحه /feed بدون تغییر URL اصلی.

قواعد نام‌گذاری:

• (.): سطح فعلی
• (..): یک سطح بالاتر
• (..)(..): دو سطح بالاتر
• (...): از ریشه app

ساختار پوشه:

برای جای‌گذاری مسیر photo درون feed، پوشه‌ای با نام (..)photo بسازید.

۳. کاربردهای عملی مسیرهای قابل‌جای‌گذاری

• مودال عکس در گالری
• مودال ورود در navbar
• سبد خرید در کنار صفحه

مزایا:

• URL قابل اشتراک‌گذاری برای مودال
• حفظ زمینه هنگام refresh
• بستن مودال با ناوبری عقب
• باز کردن مجدد مودال با ناوبری جلو

جمع‌بندی

فایل instrumentation-client.js به شما امکان می‌دهد تا قبل از تعامل کاربر، ابزارهای نظارتی و تحلیلی را راه‌اندازی کنید. مسیرهای قابل‌جای‌گذاری نیز تجربه ناوبری پویا و مودال‌های قابل اشتراک‌گذاری را فراهم می‌کنند. ترکیب این دو قابلیت، اپلیکیشن شما را هم هوشمندتر و هم کاربرپسندتر می‌کند.