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.