instrumentation-client.js and Intercepting Routes in Next.js — Early Monitoring and Smart Navigation

1. instrumentation-client.js — Monitoring Before Interaction

This file runs at a specific point in the app lifecycle:

• After the HTML document loads
• Before React hydration
• Before user interaction begins

Example:

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

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

Tracking Navigation:

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

Performance Monitoring:

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'] })

Loading Polyfills:

import './lib/polyfills'

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

2. Intercepting Routes — Displaying Content Without Changing Context

Intercepting Routes let you load content from another route inside the current layout — perfect for modals and overlays.

Example:

Display a photo modal from /photo/123 inside the /feed page without changing the main view.

Matching Rules:

• (.): same level
• (..): one level up
• (..)(..): two levels up
• (...): from root app directory

Folder Structure:

To intercept the photo route inside feed, create a folder named (..)photo.

3. Practical Use Cases for Intercepting Routes

• Photo modal in a gallery
• Login modal in a navbar
• Shopping cart in a side drawer

Benefits:

• Shareable URLs for modal content
• Preserve context on refresh
• Close modal with back navigation
• Reopen modal with forward navigation

Conclusion

The instrumentation-client.js file lets you set up monitoring and analytics before your app becomes interactive. Intercepting Routes enable dynamic overlays like modals without disrupting the user’s context. Together, they make your Next.js app smarter, faster, and more user-friendly.