Is it possible to perform a redirect in middleware when executing a server action from the client? If so, how?

[yongholeeme]

$ next info

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:19:05 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8112
  Available memory (MB): 24576
  Available CPU cores: 8
Binaries:
  Node: 20.13.1
  npm: 10.5.2
  Yarn: N/A
  pnpm: 9.1.1
Relevant Packages:
  next: 14.2.3 // There is a newer version (14.2.5) available, upgrade recommended!
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A
 ⚠ There is a newer version (14.2.5) available, upgrade recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Is it possible to perform a redirect in middleware when executing a server action from the client? If so, how?

I'm building a middleware to redirect to A page (this is other web site, assume https://google.com) if a session expired. In general, routing in app router works well (if the session expired, redirection to A page works well). However, I encountered a problem.

Let's assume a situation where the page has loaded and the session has expired after some time without refreshing. In this case, when a server action is executed, we expected the middleware to redirect to page A as mentioned above. However, in reality, the redirection did not occur.

I compared between A: redirect in middleware when server action is executed and B: redirect in server action when server action executed. I found the difference, response status.

• A: redirect in middleware when server action is executed

  HTTP/1.1 307 Temporary Redirect
  location: https://www.google.com/
  Date: Wed, 14 Aug 2024 11:39:22 GMT
  Connection: keep-alive
  Keep-Alive: timeout=5
  Transfer-Encoding: chunked
  
  https://www.google.com/
  

• B: redirect in server action when server action executed

  HTTP/1.1 303 See Other
  Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Accept-Encoding
  Cache-Control: no-store, must-revalidate
  x-action-revalidated: [[],0,0]
  x-action-redirect: https://www.google.com
  X-Powered-By: Next.js
  ETag: "bwc9mymkdm2"
  Content-Type: text/html; charset=utf-8
  Content-Length: 2
  Date: Wed, 14 Aug 2024 11:37:55 GMT
  Connection: keep-alive
  Keep-Alive: timeout=5
  
  {}
  

I think if a client component execute a server action and redirected by middleware, middleware should return 303 to redirect by router like B. redirect in server action when server action excuted

Then, I've made an workaround to let client redirect making 303 response and x-action-redirect header in my app.

if (request.method === 'POST' && request.headers.get('Next-Action')) {
    return NextResponse.json(
        {},
        {
            status: 303,
            headers: {
                'x-action-redirect': myRedirectUrl,
            },
        },
    )
}

Is it possible to perform a redirect in middleware when executing a server action from the client? If so, how can I achieve this without using the workaround?