Next.js: Next 9 server router wrong asPath

Created on 16 Sep 2019  路  6Comments  路  Source: vercel/next.js

Bug report

Describe the bug

When using custom server with redirects from example ('/a' => '/b', '/b' => '/a'), ServerRouter has different asPath than client router. I feel like this is the same bug as #5901 and #8660, both are closed, but the issue is still there (atleast for me). I tried installing the canary version (#8681 was merged into canary branch), but that didn't seem to help.
This is probably related to next 9, as before updating everything worked fine.

To Reproduce

I made a repo for this tomaskallup/next-custom-typescript-server

  1. Clone repo
  2. $ yarn install
  3. $ yarn dev
  4. Open localhost:3000/b

Terminal with server running will show:

ServerRouter {
  route: '/b',
  pathname: '/b',
  query: { amp: undefined },
  asPath: '/b'
}

And brower console will show:

{ pathname: "/b", route: "/b", query: {}, asPath: "/a" ... }

Expected behavior

I expect asPath to be '/a' on server and on client.

System information

  • OS: Linux
  • Version of Next.js: 9.0.5, tried 9.0.6-canary.4 also
needs investigation

Most helpful comment

The issue still persists with version 9.5.3

All 6 comments

@timneutkens What investigation is needed? I could try to dig around and help if possible, this issue is currently blocking us from upgrading and getting all the nice perf. improvements

It's more so that it needs a reply. This behavior is not a bug as far as I've looked at it and it's related to automatic static export. Just haven't had time to reply and completely explain why it's not a bug.

It basically comes down to that you're probably using asPath in an unintended way. It was introduced to only be used for something like redirection back to another route etc.

Well we use it for "translated" routes. Our urls are currently in czech (eg. /o-nas) and are resolved to pages in english (eg. about). The asPath is used for marking active nav item.

If there's a different way we should be handling this, please let me know.

After talking with @ijjk on ReactiveMeetup, we now understand what's wrong. The underlaying problem is that static rendering doesn't know about our custom routes, thus it can't set the correct asPath, there are couple workarounds (for example setting getInitialProps to make sure page is not static rendered) and we chose to just reupdate our nav using a useEffect, so it can still be rendered on server and client just updates the active item.

We were told that the next team might be working on some sort of route mapping for the static export, which might be a solution for us, but for now, the workaround is enough.

Closing in favor of #9524

The issue still persists with version 9.5.3

Was this page helpful?
0 / 5 - 0 ratings