Warning: Prop `href` did not match. Server: "https://dev-user.example.com/" Client: "/"

[andresgutgon]

What version of Next.js are you using?

10.0.7-canary.8

What version of Node.js are you using?

12.16.3

What browser are you using?

Google Chrome Version 88.0.4324.146 (Official Build) (x86_64)

What operating system are you using?

Mac OS Big Sur 11.1

How are you deploying your application?

next start

Describe the Bug

With this next.config.js

module.exports = {
  i18n: {
    locales: ['en-US', 'it'],
    defaultLocale: 'it',
    domains: [
      {
        domain: 'dev-user.example.com',
        defaultLocale: 'it',
      }
    ]
  }
}

And this code:

<Link href="/">
  <a>Just a link</a>
</Link>

In development I'm watching these warings from React:

Warning: Prop `href` did not match. Server: "https://dev-user.example.com/" Client: "/"

Note that the domain is not example but I'm not on localhost

Expected Behavior

The expected behaviour is not having those warnigs. I think what React is trying to say is that the HTML generated by the server is different when is computed in the client.

If I switch my next.config.js from Next i18n Domain routing to Next i18n Sub-path routing these warnings are gone.

So my theory is that next/link is behaving differently in Server and Client somehow.

To Reproduce

Yes! I can reproduce. Here are the steps:

1. Clone this repo. next@canary + nginx in a docker-compose
2. run docker-compose up
3. Change for a moment your /etc/hosts

My /etc/hosts has this line:

127.0.0.1 dev-user.example.com

After that you should see this error:

I think followed all the steps : ) Let me know if something is not clear.

[andresgutgon]

I think this bug could reveal that The server is doing work that then React have to re-do in the frontend.

Also I have to say this is super annoying while developing 😅

[andresgutgon]

If you do this:

<Link href="/">
  <a href="/">Just a link</a>
</Link>

You can avoid the issue. But I guess that's not the ideal way of using Link right?

[andresgutgon]

For now I did a wrapper component around next/link to avoid having this issue on our codebase. But it would be nice if it can be fixed on Next side. Or if you let me know if I'm using wrong and this is not an issue at all

[shane-arthur]

+1 experiencing same issue. Following.

[jacobhytter]

+1 experiencing same issue.

After updated from 10.0.3 -> 10.0.9, all link get wrong domain, im not sure why it get the domain i set in domains instead of localhost:3000,

domains: [ { domain: 'doamin.com', defaultLocale: 'no', },

[preeteshjain]

This seems related to #19922

[marnixhoh]

I am experiencing the same issue after adding i18n / Internationalized Routing to my next.config.js file. Note, that without adding that, this error does not occur.

Below is the error I receive. Note that I am developing on http://localhost, but for some reason next.js is forcing https on the server:

Warning: Prop `href` did not match. Server: "https://localhost/" Client: "/"

Next version: 10.0.8

[ms77grz]

Guys, I had the same issue: Warning: Prop href did not match. Server: "about" Client: "/about"
At last I managed to find out what was the problem in my certain case. There was a typo in my index.js file:
<Link href='about'> instead of <Link href='/about'>
Hope it will help.

[djfarly]

Having (kinda) the same issue. It was not solved by having a / in front of the href, so i dug deeper.
It turned out that on the server process.env.__NEXT_I18N_SUPPORT is sometimes true and sometimes undefined, even though when logging the webpack config in webpack-config.js tells me it is true for server and client.

Some screenshots:
logged values from webpack-config.js / DefinePlugin

My confused logging

How can a process variable change within the same process? On the client __NEXT_I18N_SUPPORT is true consistently.

[renanlido]

Guys, I had the same issue: Warning: Prop href did not match. Server: "about" Client: "/about"
At last I managed to find out what was the problem in my certain case. There was a typo in my index.js file:
<Link href='about'> instead of <Link href='/about'>
Hope it will help.

This worked for me!! Thanks man!

[djfarly]

No luck for me still… it doesn't seem to be the slash.

[vbuch]

@djfarly I can confirm the same. process.env does not have all the data all the time. The result is that the SSG content does not have locale in NEXT_DATA. In our case this also causes <Link>s to always hit the server and not render on the client side (locale change from undefined to 'en' causes it when one clicks a <Link>). I'm still digging into it. But it seems to be deep, indeed. Just writing to confirm your observation.

[djfarly]

@vbuch oh wow - ty! I was starting to question my sanity :D