Internationalized links are broken

[medihack]

What is the problem?

When internationalization is enabled links generated with the Link component should include the correct current locale. Say in a new blitz project with enabled i18n and de locale, when visiting http://localhost:3000/de the link to projects on the start page should link to http://localhost:3000/de/projects. But this is not true anymore with current Blitz as it links to http://localhost:3000/projects and a warning is printed on the console: Warning: Prop href did not match. Server: "/projects" Client: "/de/projects" (full trace below).

I could reproduce the error with at least Blitz versions >= 0.34.x. It worked correctly with Blitz 0.33.0.

Paste all your error logs here:

Warning: Prop `href` did not match. Server: "/projects" Client: "/de/projects"
    at a
    at Link (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623143129008:2918:19)
    at p
    at div
    at main
    at div
    at Home
    at WithSuperJSON (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623143129008:8426:42)
    at BlitzInnerRoot (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623143129008:866:5)
    at Layout (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623143129008:2001:20)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623143129008:5800:37)
    at Suspense
    at App (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623143129008:2683:25)
    at Hydrate (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623143129008:11295:23)
    at QueryClientProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623143129008:11370:21)
    at BlitzProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623143129008:645:21)
    at BlitzOuterRoot (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623143129008:897:34)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1623143129008:158:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1623143129008:274:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1623143129008:8170:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1623143129008:8659:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1623143129008:8795:25)
overrideMethod @ react_devtools_backend.js:2560
printWarning @ react-dom.development.js:66
error @ react-dom.development.js:42
warnForPropDifference @ react-dom.development.js:9276
diffHydratedProperties @ react-dom.development.js:10081
hydrateInstance @ react-dom.development.js:10921
prepareToHydrateHostInstance @ react-dom.development.js:15354
completeWork @ react-dom.development.js:21685
completeUnitOfWork @ react-dom.development.js:25908
performUnitOfWork @ react-dom.development.js:25880
workLoopConcurrent @ react-dom.development.js:25855
renderRootConcurrent @ react-dom.development.js:25817
performConcurrentWorkOnRoot @ react-dom.development.js:25126
workLoop @ scheduler.development.js:253
flushWork @ scheduler.development.js:226
performWorkUntilDeadline @ scheduler.development.js:516

Paste all relevant code snippets here:

No code snippets needed, see config in steps reproduction.

What are detailed steps to reproduce this?

1. Create a new blitz project.
2. Enable i18n by pasting this option in blitz.config.ts:

  i18n: {
    localeDetection: false,
    locales: ["en", "de"],
    defaultLocale: "en",
  },

3. Start the dev server
4. Visit http://localhost:3000/de
5. Watch the console and view the projects link

Or simply clone this repository https://github.com/medihack/blitz_v0.37.0
It also demonstrates the problem with a newly created page and a route manifest.

Run blitz -v and paste the output here:

Linux 5.4 | linux-x64 | Node: v14.17.0

blitz: 0.37.0 (global)
blitz: 0.37.0 (local)

  Package manager: yarn 
  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 2.86 GB / 12.42 GB
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 2.24.1 => 2.24.1 
    blitz: 0.37.0 => 0.37.0 
    prisma: 2.24.1 => 2.24.1 
    react: 0.0.0-experimental-0eea57724 => 0.0.0-experimental-0eea57724 
    react-dom: 0.0.0-experimental-0eea57724 => 0.0.0-experimental-0eea57724 
    typescript: ~4.2 => 4.2.4 

Please include below any other applicable logs and screenshots that show your problem:

No response

[flybayer]

Ah yeah, thanks for the report!

[nickluger]

I think this breaks international SEO, as it might work after the client is loaded, but the a-tags contain the wrong href.

Did you find a workaround for this?

[medihack]

I found no workaround. Full i18n support seems to be broken. I am just hoping that it gets resolved in a foreseeable future (also seems to be a must for a v1.0 release) and my app also has enough other construction zones.

[nickluger]

Absolutely @medihack, for us, i18n is a must, too, as we need to release content in English + German. I think for a good deal of e-commerce etc. this is equally urgent.
We're not in production yet with our new release, so we can tolerate it until we are. If I were (in or close to) production though, I'd immediately switch back to pure Next + API, as SEO is unforgiving.

I assume these Next+Blitz issues are a bit delayed, because of the ongoing refactorings regarding the Next.js fork, and there's too much going on lately, to take a look myself as a Blitz-newbie.

[flybayer]

@medihack @nickluger does it work fine if you use import Link from 'next/link' in your Blitz app?

[medihack]

@flybayer Ah yes, this seems to fix it.

[flybayer]

Ok that's so weird, because all we are doing is re-exporting that.

[medihack]

That's strange, but it seems the locale codes are added to the URLs correctly with the next/link component. At least there is a workaround now ;-)

[nickluger]

Can confirm. Works perfectly, both JS-navigation done by Link but also the path passed to the underlying <a>-tag.

[nickluger]

Thank you, @flybayer! 🙏