Are you trying to make something like a pop up? Saying "are you sure you want to quit the quiz?"

yes

I found this:

https://nextjs.org/docs/pages/api-reference/functions/use-router#routerevents

but it's for the Pages Router

If I switch to App Router I end up here:

https://nextjs.org/docs/app/api-reference/functions/use-router

but I can't find anything useful on that page

it says:

router.events has been replaced. See below.

it point to https://nextjs.org/docs/app/api-reference/functions/use-router#router-events

but I don't understand how that would help me?

You can listen for page changes by composing other Client Component hooks like usePathname and useSearchParams.

Eeeh, what!?

🤔

In the example they show, they give you the variable you need usePathname() & useSearchParams to listen for changes on those variables via a useEffect

instead of set functions like in the pages router, it's more customizable in the app router since you have full control over the event and can do whatever you please

Okay, I'm looking at that example right now.... but I don't really understand how I would write my useEffect

The useEffect with the pathname and searchParams in the dependency array, will run on component mount and then run after any changes to the pathname and/or searchParams, so whatever you want to do when those change you can do inside that useEffect so just write whatever logic you were planning to do when the change event happened

it think you make an instance of useRouter like this inside the root layout component

const router = useRouter();

then in the useEffect it should listen to changes on that instance

useEffect(function, [router])

in the function of the useEffect you can listen to router.events.on('routeChangeStart', callbackFunction)

where callbackFunction is the function that executes the logic of what you want to do when any route is about to change

@Chinese Alligator I think router.events.on('routeChangeStart', callbackFunction)is for the Pages Router. I'm using the App Router.

So I should do something like this?

'use client'
 
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
 
export function NavigationEvents() {
  const router = useRouter()
 
  useEffect(() => {
    // Do something when the route changes
  }, [router])
 
  return '...'
}

No, you shouldn't import the entire router, just use the usePathname() and useSearchParams() hooks provided by Next.js like they use in the documentation

And wrap the NavigationEvents component in Suspense when you render it to contain the client-side rendering

So I should wrap my entire Quiz component in a Suspense?

No, just the NavigationEvents, unless your Quiz component also calls useSearchParams

Okay.

The docs says: "Which can be imported into a layout."

And then they put the Suspense at the top of the component tree. So I should wrap all my providers etc and put the Suspense as far up in the tree as possible?

No, they don't put it at the top of the component tree, they render the NavigationEvents component in the root layout so that it is only mounted once and can listen to events for all routes, they wrap only that component in Suspense because it calls useSearchParams which causes client-side rendering up to the closest Suspense boundary.

By wrapping it in Suspense you ensure that only the NavigationEvents component is client-side rendered and not you entire layout in this case.

Suspense should only ever wrap the component that needs it, so ideally you want it to be as low in the tree as possible. (aka as close to the component that needs it)

Okay. So in the layout.tsx where my Quiz lives then?

Where are you rendering NavigationEvents ?

And not like this:

import { Providers } from "@/components/providers/providers";
import { inter } from "@/styles/fonts";
import type { Metadata } from "next";
import "@/styles/globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${inter.className} h-full antialiased`}>
        <Providers>{children} </Providers>
        <Suspense fallback={null}>
          <NavigationEvents />
        </Suspense>
      </body>
    </html>
  );
}

This is fine, it's rendered in the layout and the Suspense is only wrapping the NavigationEvents which is the component that needs it

What do you mean?

That is perfectly fine

In the example you just sent, you're rendering NavigationEvents inside your RootLayout component, which is perfectly fine

I was just wondering where you rendered it but then you sent code so it answered my question

Okay, but my Quizcomponent lives way further down the tree

So I should probably put the Suspense in the nearest layout.tsx?

That's fine, NavigationEvents need to be above the page where you Quiz component lives so that it can not be re-rendered when the Quiz component re-renders

This was just an example for what I was about to ask something. I've actually not put it anywhere because I'm still trying to understand this whole navigation-events.jsthing from the docs.

I'll try to explain what is happening.

The NavigationEvents component is calling usePathname() to read the path of the current url for example if the pathname is /quiz then pathname will equal quiz and useSearchParams is being called to read the searchParams of the current url for example /quiz?param=somesearchparam then searchParams.get('param') will equal somesearchparam.

In the useEffect you are creating a url variable using the pathname and searchParamsand based off that url variable you can do some custom logic whenever the url pathname or searchParams change.

You are rendering this in the RootLayout because it needs to be above all pages in your application to handle route change events without re-rendering and since you are calling a dynamic function useSearchParams() you must wrap the NavigationEvents component in Suspense to prevent the RootLayout from being client-side rendered since useSearchParams() cause client-side rendering up to the closest Suspense boundary.

So all that is happening is you are reading the URL and executing some logic in the useEffect when that URL changes.

Okay so I think the following is the minimum amount of code that I need in my navigation-events.ts:

"use client";

import { usePathname } from "next/navigation";
import { useEffect } from "react";

export function NavigationEvents() {
  const pathname = usePathname();

  useEffect(() => {
    console.log("NavigationEvents");
  }, [pathname]);

  return null;
}

And the reason I need to put my Suspensein the RootLayout in my case is because the user can click on any link in my app (sidebar left menu, sidebar right menu, app logo, etc) when she is on the Quiz component. Is that correct?

Yeah

Yeah this should work.

You don't even need the Suspense if you aren't going to call useSearchParams

The Suspense in this case is specifically used to prevent leaking CSR to the layout via useSearchParams

@Plague Got it, don't need to use Suspense! 👍

I still need to use <NavigationEvents />.

Where should I put it? In the layout.tsx closest to my <Quiz /> component? Or in the root layout.tsx (RootLayout)? Or in my <Quiz /> component?

Always in a layout, which layout depends on your usecase, but overall id just put it in the root layout

Yes. You should not be using useRouter for navigation events, I've only mentioned usePathname and useSearchParams for this

Thanks for all the help, @Plague