Parallel Routes not working on Cloud Run in Next.js 15

[aramikuto]

Link to the code that reproduces this issue

https://github.com/aramikuto/nextjs-parallel-route-server-js-problem

To Reproduce

1. Build the application and start the standalone server with the following command:

yarn build && cp -r .next/static .next/standalone/.next/ && node .next/standalone/server.js

2. Open the network inspector and navigate to the homepage at http://localhost:3000/
3. Note the URL of the chunk containing the parallel route.

Current vs. Expected behavior

In Next.js 14, the @ symbol in the chunk URL is not encoded, appearing as:
http://localhost:3000/_next/static/chunks/app/@modal/page-5d9f089824f6dc9b.js

In Next.js 15.0.0 and 15.0.1-canary.1, the @ symbol is encoded as %40, so the URL looks like:
http://localhost:3000/_next/static/chunks/app/%40modal/page-e0360b9b769efb1a.js

When deployed to Cloud Run, this chunk becomes inaccessible because Some encoded URL characters are decoded by Cloud Run. It seems Cloud Run decodes %40 back to @, but the standalone server on Next.js 15 responds with a 404 error for such requests.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:16:46 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T8112
  Available memory (MB): 24576
  Available CPU cores: 8
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 15.0.1-canary.1 // Latest available version is detected (15.0.1-canary.1).
  eslint-config-next: N/A
  react: 19.0.0-rc-69d4b800-20241021
  react-dom: 19.0.0-rc-69d4b800-20241021
  typescript: 5.3.3
Next.js Config:
  output: standalone

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

Parallel & Intercepting Routes

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

Other (Deployed)

Additional context

It seems this issue may have been introduced in PR #70256.

[nicholas5538]

Same issue here, the parallel route for opening my modal works only on development, but it does not work when I use next start or preview it on the Netlify deploy preview.

Code has been left unchanged after the update other than adding the await on my params prop

My issue has been fixed by removing export const dynamic = 'error';, the solution was to make my parallel routes server-rendered on demand

[jeqermigselv-cloud]

I have the same issue in Azure. Works fine on my local machine, but when deployed to Azure, the files it not found (despite copying it)

[Alexandredc]

@aramikuto did you find any workaround ?

[mozisan]

@Alexandredc
Hi, I found a workaround that resolved the issue in my environment.
Hope this helps you.

// middleware.ts

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

export const config = {
  matcher: "/_next/static/chunks/:path*",
};

export const middleware = (request: NextRequest) => {
  const url = new URL(request.url);

  const decodedPathname = url.pathname.split("/").map(decodeURIComponent).join("/");
  const encodedPathname = decodedPathname.split("/").map(encodeURIComponent).join("/");

  const includesEncodableChar = url.pathname !== encodedPathname;
  if (!includesEncodableChar) return;

  const hasAlreadyDecoded = url.pathname === decodedPathname;
  if (hasAlreadyDecoded) return;

  const destination = new URL(url);
  destination.pathname = encodedPathname;
  return NextResponse.rewrite(destination);
};

[omerman]

Thank you so much! I can confirm this fix works with cloudfront. (I had the exact issue there)

[ipravdin-opog]

Also it worked for our set up. For others to note, as it was an issue for me, if you have localisation in the app with dynamic route [locale], you probably ignore "/_next/static/" in the matcher

[Alexandredc]

@Alexandredc Hi, I found a workaround that resolved the issue in my environment. Hope this helps you.

// middleware.ts

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

export const config = {
  matcher: "/_next/static/chunks/:path*",
};

export const middleware = (request: NextRequest) => {
  const url = new URL(request.url);

  const decodedPathname = url.pathname.split("/").map(decodeURIComponent).join("/");
  const encodedPathname = decodedPathname.split("/").map(encodeURIComponent).join("/");

  const includesEncodableChar = url.pathname !== encodedPathname;
  if (!includesEncodableChar) return;

  const hasAlreadyDecoded = url.pathname === decodedPathname;
  if (hasAlreadyDecoded) return;

  const destination = new URL(url);
  destination.pathname = encodedPathname;
  return NextResponse.rewrite(destination);
};

I have tried in Google Cloud Run and it doesn't work :(

[Alexandredc]

@ForsakenHarmony Do you have some guidance to implement a workaround, please? 🙏

[aramikuto]

@Alexandredc I'm currently waiting on a response from Vercel to confirm if they recognize this as an issue. If you need to upgrade right away, it might be worth exploring options for deploying static assets separately; for example, you could use Firebase Hosting to serve static resources. I haven’t checked yet, but hopefully, Firebase Hosting isn’t impacted by the issue.

[rollsrobby]

We have the same running in a Docker container in Azure. It is currently blocking us from upgrading. Unfortunately the middleware workaround doesn't work for us.

[Alexandredc]

@aramikuto do you have any news from Vercel ?
I tried to find a workaround today, but was unsuccessful. :(

[Alexandredc]

Finally, I have found a simple solution that work on Google Cloud Run.

Add a rewrite rule on next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'standalone',
  rewrites: async () => {
    return {
      beforeFiles: [
        {
          source: '/_next/static/chunks/app/:folder/@breadcrumb/:path*',
          destination: '/_next/static/chunks/app/:folder/%40breadcrumb/:path*'
        }
      ],
      afterFiles: [],
      fallback: []
    };
  }
};

export default nextConfig;

[aramikuto]

@Alexandredc unfortunately no news yet. Thank you for sharing the workaround!

[ru-van-urk]

For anyone also experiencing this on Google Cloud Run

For me @Alexandredc workaround didn't work because I was using both dynamic routes and route groups. My path looks like this: /_next/static/chunks/app/%5Blocale%5D/admin/(routes)/%40employer/layout-fcdbade18a260943.js

I fixed it by adding a wildcard to the folder slug:

import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin();

/** @type {import("next").NextConfig} */
const config = {
  output: "standalone",
  rewrites: async () => ({
    beforeFiles: [
      {
       // Added wildcard to ':folder' -> ':folder*'
        source: "/_next/static/chunks/app/:folder*/@employer/:path*",
        destination: "/_next/static/chunks/app/:folder*/%40employer/:path*",
      },
      // more parrallel rewrites
    ],
    afterFiles: [],
    fallback: [],
  }),
};

export default withNextIntl(config);

[samcx]

Hi everyone, was investigating this—

The PR that is causing this issue for Azure and Cloud Run (as far as I'm aware) is because both platforms are (I don't see why they should be, I would consider that a bug/unusual to do) decoding the request path in-flight. The Next.js PR fixed an issue where the pathing was not consistent (described in the PR description).

• Adding RestoreRawRequestPath middlware to restore the raw request path value to current request Azure/azure-functions-host#9402
• https://cloud.google.com/run/docs/known-issues#url-decode

Let me know if you have any further questions!

[macrozone]

Is there any plan to fix this in nextjs with a workaround? I understand that its not nextjs' fault here, but cloud run and azure are too big to ignore.

next 15 basically removed support for those platforms, I think this is too big of an issue to just convert it to a discussion. I suggest to reopen the issue and find ways to fix this.

[masoudmanson]

Hi there! Any updates on this issue yet? I’m still experiencing the same problem with Next.js 15.0.3 on Azure.

Thanks in advance!

[datoon83]

Is there any further progress on this?

We've double encoded for now, but seems like a recipe for breaking further down the line.

[anarqz]

Bumping the discussion since I've moved my entire app to parallel routes just to discover that it doesn't work in GCP 😮‍💨

[maral]

Another bump, upgraded to Next 15 only to find out parallel routes are broken... 🙈

[aramikuto]

Can you confirm that the problem persists with the latest versions of the framework (15.2.x or 15.3.x)? In the latest versions, the problem mentioned in this issue no longer occurs for me.

[SarahVanDenBerghe]

I'm using Next 15.3.0, having the same issue.

[maral]

In my case I've got the latest 15.3.1, and it happens on a managed server (not Azure/GCP).

[SarahVanDenBerghe]

I tried the solutions suggested above, but they didn’t resolve the issue in our case. In our case, the issue was caused by the proxy decoding parts of the URL, this led to broken requests on the Next.js server. Our backend partner resolved it by configuring the proxy to forward the original, unmodified URL. For our setup (Apache), this was done by adding the nocanon option to the proxy configuration.

[macrozone]

just run into this with google cloud run and was very surprised that such a basic thing like serving static files is such an issue. :-/