jparmar

The App Router in Next.js 15 does not expose a direct, official router.events API like the older Pages Router had (e.g., routeChangeStart). This change is due to the new architecture based on React Suspense and concurrent rendering, which makes the concept of a singular, synchronous "route start" event less applicable.

However, you can achieve similar functionality before a client-side route navigation begins using a few techniques, which generally involve leveraging client-side lifecycle hooks:

1. Custom Link Component (Recommended for Clicks)
The most common and controlled way to run logic before a route change initiated by a user click is to wrap the navigation in a Client Component (using use client) and add an onClick handler to the link or button.

You would typically create a wrapper component around next/link and use the useRouter from next/navigation for programmatic navigation:

JavaScript

jparmar

## **Architectural Analysis & Recommendations**

### **Current State - The Problem**

Your implementation has a fundamental architectural issue with Next.js 15 App Router:

**Pages Router (Legacy - Working):**
```javascript
Router.events.on('routeChangeStart', () => NProgress.start())  // ✅ Fires BEFORE navigation

jparmar

				<%== col_start({ :l => 12 }) %>
					<% contacts = [] %>
					<% c.contacts.each do |contact| %>
						<% contacts.push({ name: contact.name, mobile: contact.mobile, business_email: contact.business_email}) %>
					<% end %>
				<div class="cards">
					<% contacts.each do |contact| %>
						<div class="card">
							<div class="card_inner">
								<%