Next.js: Trailing slash route mismatch

Created on 22 Jul 2020  路  11Comments  路  Source: vercel/next.js

Hey guys, I think this is still an issue.
When using trailingSlash: true and basePath: /dev you get warnings on the console like so:
Warning: Prop 'href' did not match. Server: "/dev/second" Client: "/dev/second/".

Tried both ways:

<Link href="/second">
  <a>Second Page</a>
</Link>

and

<Link href="/second/">
  <a>Second Page</a>
</Link>

next version 9.4.5-canary.42

@Unsfer @Timer

_Originally posted by @marlonmarcello in https://github.com/vercel/next.js/issues/15194#issuecomment-662167808_

bug p1

Most helpful comment

@awareness481 You are using the exportTrailingSlash and not the trailingSlash option. You'll also need to use [email protected] until the next minor version. Which example were you trying to run?

Incidentally, I thought I thought I had to use exportTrailingSlash: true.
I can't reproduce using trailingSlash: true in the next.config.js

All 11 comments

Can't reproduce this warning but also have mismatch in url prop in page:

Server side:

{
  "url": {
    "query": {},
    "pathname": "/events",
    "asPath": "/events"
  }
}

Client side:

{
  "url": {
    "query": {},
    "pathname": "/events",
    "asPath": "/events/"
  }
}

@marlonmarcello I can't reproduce this. Can you please provide a full reproduction?

Sure can.
I will put together a repo with the minimal set up.

Thank you!

Won't block the stable release on this unless we can get a reproduction. Thanks!

@Timer I don't know what I did, but I can't get the warning to appear on a minimal reproduction repo.
But I do get the same mismatch that @Unsfer mentioned.

Can you provide a reproduction and instructions for the thing @Unsfer mentioned? It's not immediately obvious to me how to reproduce that.

@Timer

I ran the example and got the same console warning. You can use a full reproduction at https://github.com/awareness481/Next_href_mismatch~~ See https://github.com/vercel/next.js/issues/15391#issuecomment-663828011

next_href

Edit: This is example is on 9.4.4 but had also tried on 9.4.5-canary.42 (as the OP) and had the same warning

@awareness481 You are using the exportTrailingSlash and not the trailingSlash option. You'll also need to use [email protected] until the next minor version. Which example were you trying to run?

@awareness481 You are using the exportTrailingSlash and not the trailingSlash option. You'll also need to use [email protected] until the next minor version. Which example were you trying to run?

Incidentally, I thought I thought I had to use exportTrailingSlash: true.
I can't reproduce using trailingSlash: true in the next.config.js

Sounds like this can be closed then because exportTrailingSlash is something different and should no longer be used when the trailingSlash option is on stable.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ematipico picture ematipico  路  66Comments

nvartolomei picture nvartolomei  路  78Comments

robinvdvleuten picture robinvdvleuten  路  74Comments

timneutkens picture timneutkens  路  250Comments

Timer picture Timer  路  87Comments