Hello everyone,

I'm working with a dynamic route ([id]/page.tsx) in Next.js

'use client'

import { useRouter } from 'next/router';

export default function Users() {
    const router = useRouter();
    const userId = router.query.id;

    return (
        <div>
            <h1>User ID: {userId}</h1>
        </div>
    );
}

but I've encountered this error:

1 of 1 unhandled error
Next.js is up to date

Unhandled Runtime Error
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

Source
app\gallery\[id]\page.tsx (6:28) @ useRouter

  4 | 
  5 | export default function Users() {
> 6 | const router = useRouter();
    |                        ^
  7 | const userId = router.query.id;
  8 | 
  9 | return (

I understand from the Next.js documentation that when working within the app directory, we need to migrate to the new hooks (usePathname, useSearchParams) imported from next/navigation instead of using useRouter from next/router.

I also found some information suggesting that due to concurrent rendering, router.events no longer makes sense as navigation can be cancelled without detection. The proposed solution was to listen for page changes like this:

'use client'
import {usePathname, useSearchParams} from 'next/navigation'

function useNavigationEvent() {
   const pathname = usePathname()
   const searchParams = useSearchParams()
   useEffect(() => {
      const url = pathname + searchParams.toString()
      sendSomewhere(url)
   }, [pathname, searchParams])
}

However, I'm finding it hard to locate comprehensive information on next/navigation. I'm uncertain whether I should be using this module or if I should stick with next/router.

Also, I'm curious about what a default dynamic route template would look like, especially with regards to how the user ID is handled in the code I've posted.

Any guidance would be greatly appreciated!