routeChangeStart

routeChangeStart is an event emitted by the Next.js Router when a client-side route transition begins. It signals that the application is about to navigate to a new URL, allowing developers to respond immediately. The event listener receives the target URL as a string argument, which is commonly used to show a loading indicator, start a progress bar, or send navigation analytics.

Typical usage involves subscribing to the event with Router.events.on('routeChangeStart', handler) and performing any needed actions in the handler. It is important to unsubscribe the listener when it is no longer needed (for example, when a component unmounts) to prevent memory leaks by calling Router.events.off('routeChangeStart', handler).

This event only fires for client-side transitions initiated by mechanisms such as next/link, router.push, or router.replace. It does not fire on the initial page load or during server-side navigations. routeChangeStart is often used in conjunction with routeChangeComplete and routeChangeError to manage UI state, such as hiding a loading indicator when the navigation finishes or handling errors if a transition fails. Note that routeChangeStart does not provide a built-in way to cancel a navigation; any cancellation or guard logic would need to be implemented by the developer in the handler, potentially with additional router APIs.