next/link + client-side redirects

[dpogni]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:25:27 PDT 2022; root:xnu-8020.141.5~2/RELEASE_X86_64
Binaries:
  Node: 17.6.0
  npm: 8.5.1
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.3.2-canary.24
  eslint-config-next: 12.3.1
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome Version 106.0.5249.103 (Official Build) (x86_64)

How are you deploying your application? (if relevant)

No response

Describe the Bug

I'm experiencing unexpected behavior when using next.config.js redirects.

Without middleware:
Redirects added into next.config.js are not followed when using next/link for client-side routing. Only refreshing the page will redirect as expected.

Screen.Recording.2022-10-11.at.3.32.48.PM.mov

With middleware:
Redirects added into next.config.js will update the rendered page content, but the URL in the address bar does not update. The redirect is acting like a rewrite.

Screen.Recording.2022-10-11.at.3.54.32.PM.mov

Related discussion:
#40062

Expected Behavior

With or without middleware, I expect routing to follow next.config.js redirect rules.

Link to reproduction

https://github.com/dpogni/next-redirect-test

To Reproduce

• Add a redirect to next.config.js
• Add a next/link component to a page with a link to that redirect.
• in both dev mode or build/start, click the next link and see the redirect behavior.

[balazsorban44]

Hi, this is currently expected, please see an explanation here: #40062 (comment)

[dpogni]

Thank you for taking a look at this and I'm sorry to push on this @balazsorban44 @ijjk. I don’t think this should be closed, this seems unrelated to #40062 (comment).

Listed above are two unexpected experiences for our end-users.

1. When not using middleware, next.config.js redirects do not work with next/link.
2. When using middleware, redirects behave like rewrites. The correct page loads, but the URL does not update properly.

Expected behavior for end-users is when a user clicks a link, they are correctly redirected and address bar updates accordingly.

If this is implementation is expected, can you provide a proposed solution on how to use next/link in combination with next.config.js redirects/rewrites?

[ijjk]

This is currently expected due to the way middleware resolving works vs pure client side routing. We want to avoid shipping an entire manifest with all redirects to the client so pure client side routing does not apply redirects during a transition but middleware can since it does a request to the server and can resolve the rewrites without a client manifest.

We can investigating handling for this in the future to avoid this without middleware as well.

Note: rewrites are resolved on pure client-side routing because there should inherently be less rewrites than redirects so aren't as expensive to pass to the client.

[dpogni]

@ijjk, once again, thank you for taking the time to consider this issue.

I think the second item in this issue is being overlooked or ignored. When middleware is used, the redirect is acting like a rewrite. The address bar is not updating correctly. Is this expected?

See this video or pull my repo to reproduce.

Screen.Recording.2022-10-11.at.3.54.32.PM.mov

[ijjk]

Yeah this is also expected for internal redirects (start with /), it's less performant to do a hard navigation here instead of a client transition so it favors the client transition. If it is an external redirect https://example.com it will do a hard navigation instead as it's required for that case.

[github-actions]

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.