Issue with Soft Navigation in NextJS Application Under Reverse Proxy

[thulasi-rajasekaran]

Summary

I am currently working on an application hosted under our organization's domain, members.example.com, which houses multiple applications. This application is built using NextJS and is intended to be accessed via members.example.com/dashboard/v2/accounts. However, I'm encountering an issue with our reverse proxy.

The reverse proxy is appending a locale prefix to the basepath when call (but not in URL), resulting like /en-us/dashboard/v2/accounts (but browser URL is still like /dashboard/v2/accounts). Since this locale prefix is dynamic, I cannot use a base path variable. To address this, I've implemented a rewrite rule within my application to remove the locale prefix. This solution works well for most aspects of the application.

Folder Structure:

Here's a simplified folder structure of my application:

app

• dashboard
  • v2
    • accounts
      • pages.tsx
        sample
      • page.tsx
        The Issue:

I've set up a soft link using the Link attribute in the root page to navigate to the sample page. However, I'm facing an issue with soft navigation:

Production Build (npm run start): Soft navigation works as expected; pages load without a complete reload.
Development Mode (npm run dev): Soft navigation is not working; the page undergoes a complete reload.

Upon further investigation, I noticed the following error:

http://localhost:3000/dashboard/v2/accounts/sample?_rsc= request failed with 'The router state header was sent but could not be parsed'.
This issue is causing a significant blocker for us in finalizing the framework for our application.

Request for Assistance:

Could someone please suggest a fix or workaround for this soft navigation issue in development mode? Your assistance in resolving this problem would be greatly appreciated.

Additional information

Here is my next config

/** @type {import('next').NextConfig} */
const nextConfig = {
    assetPrefix: 'http://localhost:3000',
    async rewrites() {
        return {
            beforeFiles: [
                {
                    source: '/:locale/dashboard/v2/accounts/:path*',
                    destination: '/dashboard/v2/accounts/:path*',
                },
            ]
        }
    },
    async headers() {
        return [
            {
                source: "/(.*)",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    { key: "Access-Control-Allow-Origin", value: "https://members.example.com/" },
                    { key: "Access-Control-Allow-Methods", value: "*" },
                    { key: "Access-Control-Allow-Headers", value: "*" },
                ]
            }
        ]
    }
}

module.exports = nextConfig

Example

No response

[shestakov-railways]

I have the same issue on Railway 'The router state header was sent but could not be parsed'.

[DonWasyl]

The same, any hints?
I have this issue but only on production (when I deploy app)

[memoday]

any updates here? I have similar error only when deploying on AWS

[Luk-z]

Same issue here deploying on AWS. Ping Ping Ping