Issue when redirecting from Server Action -> Route Handler -> new page

[cloudkite]

Link to the code that reproduces this issue

https://github.com/cloudkite/next-redirect-bug

To Reproduce

1. run npx next dev
2. click submit button

Current vs. Expected behavior

Expected:
When clicking submit page server action redirects to /redirect_route which in turn redirects to /hello.

Actual
URL changes to /redirect_route but displays the content from /hello

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 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
Binaries:
  Node: 20.8.1
  npm: 10.1.0
  Yarn: 1.22.15
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.37
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

No response

[MDFARHYN]

solved https://github.com/MDFARHYN/next-redirect-bug

[cloudkite]

@MDFARHYN This doesn’t solve the issue. The reason it’s a route is that I want to determine redirect path dynamically server-side based on session, database etc.

[cloudkite]

This problem also occurs when redirecting from middleware. Moving the code in repro from route.ts to middleware.ts has the same effect

[shuding]

Looks like a duplicate of #58281?

[cloudkite]

Looks like a duplicate of #58281?

Yes looks like the same issue, looking at #58281 my repro is a bit simpler

[mgray-bemyduo]

@shuding Even with these bug fixes that were supposed to resolve this, I'm still getting errors in 14.0.4

#59017
#58885

[bemyduo-admin]

@MDFARHYN Please see above. Server Actions are unusable with Middleware because this bug is still not fixed.

[leerob]

The reason it’s a route is that I want to determine redirect path dynamically server-side based on session, database etc.

I would recommend doing this in a Server Action and not having a redirect -> redirect -> page. Any reason you can't do that?

[bemyduo-admin]

@leerob Can you tell me how I can keep my Server Actions DRY (Don't Repeat Yourself) without using middleware? The whole point is that every single server action should go through rate limiting and the internationalization middleware should work without breaking whenever a user is redirected to the blocked page after being rate limited too many times.

[leerob]

For some reading on the merits of DRY: https://overreacted.io/the-wet-codebase/

But to your point, can't it a be a function that's called in Middleware and your Server Action?

[bemyduo-admin]

@leerob it does NOT work if I use it in Middleware. That's the problem. If I put it in the middleware I get the error as shown at the bottom of the image I shared. I haven't tried to do the redirect directly in the server action because I don't want to have to copy and past the rate limiting code in every single server action because it doesn't really make sense. This also violates the single responsibility rule. The server action shouldn't also have to figure out the rate limiting logic.

[jimzer]

Having the same issue (without the route handler step), I redirect in server action to /page and expect the middleware logic to add locales to kick in to end up on /en/page
The page is rendered properly but the url stays at /page which is a problem.

[humont]

Similar problem with using a serverAction redirect whilst having middleware rewrites (e.g when doing something similar to the Platform Starter Kit)

e.g:

middleware.ts

import { NextRequest, NextResponse } from "next/server";

export const config = {
  matcher: [
    /*
     * Match all paths except for:
     * 1. /api routes
     * 2. /_next (Next.js internals)
     * 3. /_static (inside /public)
     * 4. all root files inside /public (e.g. /favicon.ico)
     */
    "/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)",
  ],
};

export default async function middleware(req: NextRequest) {
  console.log("Middleware Called");
  const url = req.nextUrl;
  const subdomain = req.headers.get("host")?.split(".")[0];
  const searchParams = req.nextUrl.searchParams.toString();
  // Get the pathname of the request (e.g. /, /about, /blog/first-post)
  const path = `${url.pathname}${
    searchParams.length > 0 ? `?${searchParams}` : ""
  }`;

  if (subdomain === process.env.NEXT_PUBLIC_ROOT_DOMAIN) {
    // If the subdomain is app or the root domain, redirect to the SaSS website
    let rewriteUrl = new URL(`/saas${path}`, req.url);
    return NextResponse.rewrite(rewriteUrl);
  }

  // Otherwise redirect to the tenant website
  let rewriteUrl = new URL(`/${subdomain}${path}`, req.url);
  return NextResponse.rewrite(rewriteUrl);
}

someServerAction.ts

import {redirect} from "next/navigation"

export const action = async () => {
  redirect('/some_path')  
}

The URL will render correctly, however the app router will ignore the rewrite, and try and fetch the route from the wrong dir.

oddly enough - the middleware function is still being called prior to render.