How to Migrate useNavigate in App Bridge React 4.x.x using Next.js?

[camerafi-dev]

Hello.

I want to use Navigation in Next.js,

But There are no contents React Hooks or React Components in docs(https://shopify.dev/docs/api/app-bridge-library/apis/navigation )
unlike previous-version docs(https://shopify.dev/docs/api/app-bridge/previous-versions/actions/navigation )

Only Remix version of the guide exists in that document.

(I don't have any plan using Remix.)

How to Migrate useNavigate in App Bridge React 4.x.x using Next.js?

Thank you.

[jaymitBeladiya]

Hi @camerafi-dev ,

Did you find a solution for it?

Thank you.

[umut-dev]

Hi @camerafi-dev,

I don't use Next.js but ended up here while looking for a solution for vanilla react.

There is a hook in the react-router-dom library. So this works for me:

import { Link } from "@shopify/polaris";
import { useNavigate } from "react-router-dom";
 
const navigate = useNavigate();
<Link onClick={() => navigate(`/page`)}>Page</Link>

And there is a similar hook in the Next.js docs. I didn't try this but seems like it should work for you:

import { Link } from "@shopify/polaris";
import { useRouter } from 'next/navigation'

const router = useRouter();
<Link onClick={() => router.push(`/page`)}>Page</Link>

Hope this helps.

Ps: @jaymitBeladiya I also posted a sample for your question on github.