How to synchronize next.js router path with the URL in the address bar of the embedded app?

Shopify Apps
1

Hello, I am developing a shopify embedded app with next.js.

I am implementing page transitions with the Link component in Polaris. When I press the link, it transitions in the app and the view is rendered without any problem, but the address bar of the browser is not updated.
How can I synchronize the next router path with the URL in the address bar?

I found out that RoutePropagator has that role, but it did not work well with next router.

import {
  Provider,
  useAppBridge,
  RoutePropagator,
} from '@shopify/app-bridge-react'
import Link from 'next/link'

︙

const CustomLinkComponent = ({
  children,
  url,
  ...rest
}: LinkLikeComponentProps) => {
  return (
    
      {children}
    
  )
}

const App = ({ Component, pageProps }: Props) => {
  const { query, route } = useRouter()
  let host = Array.isArray(query.host) ? query.host[0] : query.host || null

  if (!host) {
    host = Buffer.from(`${query.shop}/admin`).toString('base64')
  }

  return (
      
  )
}

Thanks!

2

What is not working for Next router?

I used this tutorial and got it working. Just make sure to import the useEffect hook from react (the code forgets to do so)