vercel / vercel/next.js

Calling redirect() from server action doest not update url path on the browser correctly if a middleware is used for internationalization

Open
#58,281 2 comments 17 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Linking and Navigating Runtime
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/dev2xl/nextjs-redirect-bug-example

To Reproduce
  1. Start the application with next dev
  2. Use the Go To Login Page link, or type /login on the url bar
  3. You will see how you were redirected to /en/login and the url path of the browser will be updated to the same url
  4. Use the submit form button to trigger a server action and a redirect('/login') inside it.
  5. Now you were redirected as well, but the url path of the browser will be '/login' instead of '/en/login', even when the middleware return the same response notifying that the url needs to be '/en/login'.
Current vs. Expected behavior

Current:

After using redirect('/login') from the server action, the url on the browser shows '/login', the route gets rendered even when there is not such route on the project, only the one with the [locale] parameter.

Expected:

The url path on the browser must be '/en/login' after trigger the redirect('/login') on the server action.

The problem is not on the middleware. In both scenarios, manual navigating throw the browser url to /login, or triggering redirect('/login') from the server action, and the response from the middleware will be the same. In fact, that's why nextjs is able to render the route even when the url path on the browser is '/login' and there is no route for that on the project.

Verify canary release
  • I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:28:45 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6020
Binaries:
  Node: 20.8.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: 8.9.0
Relevant Packages:
  next: 14.0.2
  eslint-config-next: 14.0.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

App Router, Middleware / Edge (API routes, runtime), Routing (next/router, next/navigation, next/link)

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction repository and run it with next dev, then follow the middleware internationalization flow and the server action redirect('/login') path. Compare the browser URL and rendered route in both navigation scenarios. Done means the server-action redirect updates the browser URL to /en/login consistently with the middleware response.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.