NextJS:Warning: Prop `href` did not match. Server: "blogs/8" Client: "/blogs/8"

created at 02-01-2022 views: 221

problem

Got this error in my blog index page. The strange thing is, I haven't noticed this problem before because everything is rendered normally into HTML.

solution

From the warning we know that there are some problems on the path we provided as href of a Next Link.

let's check.

<Link href={'blogs/' + obj.id}>
    <a>
        <h3>{obj.title}</h3>
    </a>
</Link>

here we provided blogs/ as the path, since it arises a problem, we try /blogs/

then the problem disappeared.

very strange, because according to the warning:

  • Server: "blogs/8"
  • Client: "/blogs/8"

our original href is blogs/ + id, but it says the client is /blogs/8

now we changed to /blogs/ + id, there is no problem?

anyway, the problem solved.

created at:02-01-2022
edited at: 02-01-2022: