Issue with `asPath` when using `getStaticProps` and redirects

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

14.17.6

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Verel

Describe the Bug

When using redirects in next.config.js and trying to output router.asPath in a dynamic route that is using getStaticProps and getStaticPaths, we are getting a Warning: Text content did not match. Server: "/test-static/123" Client: "/test-statique/123" message in the console. This is not an issue when using getServerSideProps.

Expected Behavior

There should not be any discrepancy between the server and client markup. Basically, we should get the same result as with getServerSideProps.

To Reproduce

How to reproduce

Clone the example repo:

git clone https://github.com/nbouvrette/next-js-test-aspath

Run Next.js

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Inspect your page, and make sure to open the console tab in your browser to see logs.

Happy path

If you click on the first link.

Both SSR and client-side asPath matches when using getServerSideProps - no error is shown in the logs.

Issue with asPath

If you return back, and click on the second link you should see the following error in your console:

next-dev.js?3515:32 Warning: Text content did not match. Server: "/test-static/123" Client: "/test-statique/123"
    at div
    at TestStatic (webpack-internal:///./pages/test-static/[id].tsx:16:72)
    at MyApp (webpack-internal:///./pages/_app.tsx:36:27)
    at StyleRegistry (webpack-internal:///./node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:90:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:356:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:795:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:916:27)

See more info here: https://nextjs.org/docs/messages/react-hydration-error

If you do a view page source you will see that the SSR markup is /test-static/123 when in fact it should be using /test-statique/123 as per the redirects configuration in next.config.js.

[ijjk]

The asPath does match as long as the requested path is what is statically generated, the problem is you are rewriting a non-matching path to a static path. The asPath will be the path that is statically generated. If you need the asPath to match uniquely to each request then getServerSideProps should be used. getStaticProps is not meant to be unique per request but instead unique per-path.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.