Next-translate: Mismatch server/client error when using Next trailingSlash and Link

Created on 2 Sep 2020  路  3Comments  路  Source: vinissimus/next-translate

I get a console error when i set trailingSlash: true inside the next config and using next-translate <Link>. With that setting, when I set a link like this:

<Link href="/saving">
    <a>{t('common:pages.saving')}</a>
</Link>

I get:

Warning: Prop `href` did not match. Server: "/saving" Client: "/saving/"
    in a (at header.tsx:60)
    in Link (created by Link)

Even adding the final / inside the href i get the same error. Here my i18n.json setting:

  "allLanguages": ["en", "it"],
  "defaultLanguage": "it",
  "defaultLangRedirect": "root",
  "currentPagesDir": "pages_",
  "finalPagesDir": "pages",
  "localesPath": "locales",
  "pages": {
    "*": [
      "common"
    ]
  }
}

All 3 comments

I'm going to put now this fix under the 0.17.3-canary.1 prerelease. It will be released on 0.17.3 soon

@aralroca I still have this issue even with 0.17.3-canary.3. My configuration:

{
  "allLanguages": ["en", "it"],
  "defaultLanguage": "it",
  "currentPagesDir": "pages_",
  "finalPagesDir": "pages",
  "localesPath": "locales",
  "pages": {
    "*": [
      "common"
    ]
  }
}

It seems to be an issue related to nextjs. I tried downgrading it to 9.4.0 and it works, so it needs more investigation.

Was this page helpful?
0 / 5 - 0 ratings