Link component interpolation error nextjs

Solution 1:

Another possible solution could be redirect using the router.push function:

const myRedirectFunction = function () {

    if (typeof window !== 'undefined') {
        router.push({
            pathname: router.pathname,
            query: {...router.query, myqueryparam: 'myvalue'},
        })
    }

}


return (
  <>
    <button onClick={() => {myRedirectFunction()}}> Continue </button>
  </>

)

It is important to include ...router.query because there is where the [dynamic] current value is included, so we need to keep it.

Reference: https://github.com/vercel/next.js/blob/master/errors/href-interpolation-failed.md

Solution 2:

I got the same issue when trying to redirect user to locale. I did it in useEffect. After investigate I discovered that on first render router.query is empty, so it's missing required field id. I fix it by using router.isReady

export const useUserLanguageRoute = () => {
  const router = useRouter()

  useEffect(() => {
    const {
      locales = [],
      locale,
      asPath,
      defaultLocale,
      pathname,
      query,
      isReady // here it is
    } = router

    const browserLanguage = window.navigator.language.slice(0, 2)

    const shouldChangeLocale =
      isReady && // and here I use it
      locale !== browserLanguage
      && locale === defaultLocale
      && locales.includes(browserLanguage)

    if (shouldChangeLocale) {
      router.push(
        {
          pathname,
          query,
        },
        asPath,
        { locale: browserLanguage }
      )
    }
  }, [router])
}