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

andresgutgon · 2021-02-12T20:20:49Z

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:

Clone this repo. next@canary + nginx in a docker-compose
run docker-compose up
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.

The text was updated successfully, but these errors were encountered:

andresgutgon · 2021-02-12T20:24:23Z

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 · 2021-02-14T11:01:01Z

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 · 2021-02-14T15:38:57Z

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 · 2021-03-18T14:30:09Z

+1 experiencing same issue. Following.

jacobhytter · 2021-03-22T10:05:54Z

+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 · 2021-04-10T14:52:21Z

This seems related to #19922

marnixhoh · 2021-04-25T14:43:35Z

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 · 2021-04-25T21:40:57Z

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 · 2021-05-06T15:23:08Z

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 · 2021-05-07T01:02:32Z

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 · 2021-05-26T08:27:50Z

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

vbuch · 2021-05-31T11:11:04Z

@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 · 2021-05-31T12:11:42Z

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

vbuch · 2021-05-31T12:15:50Z

@djfarly just a note: I still think it's a problem with our setup and not with next. Just... really hard to find so far.

djfarly · 2021-05-31T12:18:47Z

You're problably right. I got stuck asking myself why and how a process variable that is never directly metioned in code otherwise (as far is my search went) could have a different value at runtime than was defined via webpack define plugin.

vbuch · 2021-05-31T13:23:32Z

I solved this part of my problem. It doesn't solve the lack of locale in NEXT_DATA so my problem is not solved, but this part we were discussing above, @djfarly is fixed for me. I had an issue with how I loaded plugins in next.config => webpack. I use next-compose-plugins + next-translate + next-transpile-modules. I had mistaken const plugins = [nextTranspileModules, nextTranslate] with const plugins = [[nextTranspileModules], [nextTranslate]]. Really doubt that helps yu, but...

SpeedingRoo · 2021-06-04T11:53:10Z

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.

Yes you're right, thx! Turns out it CANNOT be: <Link href='about'> or <Link href='./about'> or <Link href='./about.js'>, it HAS to be <Link href='/about'>.

If the path involves parent directory, you write: <Link href='../pages/page2'>(just for example).

el-zoltan · 2021-06-05T13:14:15Z

This seems related to #19922

Interestingly, that issue says it is happening in 10.0.3, but downgrading to 10.0.3 fixes the issue for me. However, my use case looks like this:

<Link href={{ pathname: '/edit', query: { id } }}>Edit</Link>

valdeniomarinho · 2021-09-02T19:32:04Z

I'm having the same problem here, anyone with some solution or any workaround?

phuocng · 2021-09-27T03:40:10Z

I have the same issue with nextjs 11.1.2.

medmin · 2021-10-06T05:23:54Z

same issue, Oct 5th, 2021

craftgear · 2021-10-20T06:59:32Z

Same here.

Maybe this is related with react-i18next somehow?

matteociasco · 2021-10-28T16:09:16Z

+1 having the same issue, the error is: Prop href did not match. Server: "/" Client: "/it"

karmingc · 2021-11-08T21:48:37Z

Confirming as well.

For additional context, this is with absolute links and not relative links. This happens when we turn an experiment on and off. In that case, server will have the most of up to date href, while client has something different (the previous one).

NextJS version: ^12.0.1

cc @timneutkens

timneutkens · 2021-11-09T13:42:06Z

Please open a new issue with a reproduction (following the issue template) and we'll have a look 👍

ramonortigosa · 2022-01-18T11:12:49Z

Same issue...

NextJS 12.0.7

Any solution?

timneutkens · 2022-01-18T11:33:00Z

@ramonortigosa #22130 (comment)

andresgutgon added the bug Issue was opened via the bug report template. label Feb 12, 2021

marnixhoh mentioned this issue Apr 29, 2021

Using i18n configuration throws "Warning: Prop href did not match" error #24442

Closed

RobVermeer mentioned this issue Jun 14, 2021

Fix domain locales not available on client #26083

Merged

timneutkens added kind: bug and removed bug Issue was opened via the bug report template. labels Jun 22, 2021

timneutkens added this to the Iteration 22 milestone Jun 22, 2021

timneutkens assigned ijjk Jun 22, 2021

ijjk closed this as completed in #26083 Jun 22, 2021

rizkybaihaqy mentioned this issue Oct 11, 2021

Drafting layout and visualize card nodefluxio/weber#12

Merged

9 tasks

karmingc mentioned this issue Nov 9, 2021

Warning: Prop href did not match. Server: "https://www.google-1.com" Client: "https://www.google-2.com" behind a feature flag #31211

Closed

vercel locked as off-topic and limited conversation to collaborators Jan 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

andresgutgon commented Feb 12, 2021 •

edited

Loading

andresgutgon commented Feb 12, 2021

andresgutgon commented Feb 14, 2021 •

edited

Loading

andresgutgon commented Feb 14, 2021

shane-arthur commented Mar 18, 2021

jacobhytter commented Mar 22, 2021

preeteshjain commented Apr 10, 2021

marnixhoh commented Apr 25, 2021

ms77grz commented Apr 25, 2021 •

edited

Loading

djfarly commented May 6, 2021 •

edited

Loading

renanlido commented May 7, 2021

djfarly commented May 26, 2021

vbuch commented May 31, 2021 •

edited

Loading

djfarly commented May 31, 2021

vbuch commented May 31, 2021

djfarly commented May 31, 2021

vbuch commented May 31, 2021

SpeedingRoo commented Jun 4, 2021 •

edited

Loading

el-zoltan commented Jun 5, 2021

valdeniomarinho commented Sep 2, 2021

phuocng commented Sep 27, 2021

medmin commented Oct 6, 2021

craftgear commented Oct 20, 2021

matteociasco commented Oct 28, 2021

karmingc commented Nov 8, 2021 •

edited

Loading

timneutkens commented Nov 9, 2021

ramonortigosa commented Jan 18, 2022

timneutkens commented Jan 18, 2022

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

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

Comments

andresgutgon commented Feb 12, 2021 • edited Loading

andresgutgon commented Feb 12, 2021

andresgutgon commented Feb 14, 2021 • edited Loading

andresgutgon commented Feb 14, 2021

shane-arthur commented Mar 18, 2021

jacobhytter commented Mar 22, 2021

preeteshjain commented Apr 10, 2021

marnixhoh commented Apr 25, 2021

ms77grz commented Apr 25, 2021 • edited Loading

djfarly commented May 6, 2021 • edited Loading

renanlido commented May 7, 2021

djfarly commented May 26, 2021

vbuch commented May 31, 2021 • edited Loading

djfarly commented May 31, 2021

vbuch commented May 31, 2021

djfarly commented May 31, 2021

vbuch commented May 31, 2021

SpeedingRoo commented Jun 4, 2021 • edited Loading

el-zoltan commented Jun 5, 2021

valdeniomarinho commented Sep 2, 2021

phuocng commented Sep 27, 2021

medmin commented Oct 6, 2021

craftgear commented Oct 20, 2021

matteociasco commented Oct 28, 2021

karmingc commented Nov 8, 2021 • edited Loading

timneutkens commented Nov 9, 2021

ramonortigosa commented Jan 18, 2022

timneutkens commented Jan 18, 2022

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

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

andresgutgon commented Feb 12, 2021 •

edited

Loading

andresgutgon commented Feb 14, 2021 •

edited

Loading

ms77grz commented Apr 25, 2021 •

edited

Loading

djfarly commented May 6, 2021 •

edited

Loading

vbuch commented May 31, 2021 •

edited

Loading

SpeedingRoo commented Jun 4, 2021 •

edited

Loading

karmingc commented Nov 8, 2021 •

edited

Loading