`Error: No router instance found.` while publishing to Vercel. App works normally in local `yarn dev`

[seg-leonelsanches]

🐛 Bug Report

Error occurred prerendering page "/en-US/account/edit". Read more: https://nextjs.org/docs/messages/prerender-error
Error: No router instance found. you should only use "next/router" inside the client side of your app. https://nextjs.org/docs/messages/no-router-instance

This happens for each locale I implemented (in this project, en-US and pt-BR).

To Reproduce

• https://github.com/seg-leonelsanches/leos-guitar-shop-nextjs (https://github.com/seg-leonelsanches/leos-guitar-shop-nextjs/commit/410d37d3ebe89bfdbc99a386676914585b32bae0)
• Publish to a hobby instance in Vercel.
• Recommeded env variables:
  • NEXT_PUBLIC_SEGMENT_WRITE_KEY: Anything
  • NEXT_PUBLIC_GTM_ID: Anything
  • BACKEND_URL: Same as the deployment URL.

I implemented in every single page the following:

export async function getStaticProps({ locale }: { locale: any }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common", "footer"])),
      // Will be passed to the page component as props
    },
  };
}

Expected behavior

To publish normally. It works normally for localhost:3000:

• Just clone the project
• yarn
• yarn dev

Your Environment

• runtime version: v18.16.0
• i18next version: 14.0.0
• OS: Mac

[adrai]

have you checked other issues? https://github.com/vercel/next.js/issues/6713

You missed an useEffect in: https://github.com/seg-leonelsanches/leos-guitar-shop-nextjs/blob/main/pages/account/edit.tsx

[adrai]

btw: you can see that error also if you run yarn build... there is no need to deploy it to vercel to see the error

[seg-leonelsanches]

have you checked other issues? vercel/next.js#6713

You missed an useEffect in: https://github.com/seg-leonelsanches/leos-guitar-shop-nextjs/blob/main/pages/account/edit.tsx

Believe me or not, I did. Github search didn't help.

This solved my issue. Thank you!