Intro

I dived into the issue to find a workaround, unfortunately, I couldn't find it and I was stuck on the issue for over a week. And I reached out to the author to get some help, but he also didn't have any good ideas for the issue. However, he has a best friend working for Vercel and we decided to wait for his help.

Issue

The issue happens because Next js router.events was deprecated after version 13, and our project is working on Next js v14. Now, it's time to refactor the existing code, but the latest version 14 doesn't come with router.events method and many people are struggling with this issue and complaining. You can refer to this.

Challenge

The latest Next js is updated, and now users can listen for page changes by composing other Client Component hooks like usePathname and useSearchParams instead of using router.events.

'use client'

import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export function NavigationEvents() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    const url = `${pathname}?${searchParams}`
    console.log(url)
    // You can now use the current URL
    // ...
  }, [pathname, searchParams])

  return null
}

Also, some people suggested their workaround(https://www.npmjs.com/package/nextjs13-router-events), but there was no luck, and couldn't fix the issue.

End

As I dig into the issue and time goes by, I feel frustrated a bit and stressed out. It makes me feel like this is my limit, so I try to stop looking into this issue for a while, I'll be waiting for good ideas from the author and will get back to the issue later on.