nextjs - ✅(Solved) Fix Internal Server Error on dynamic routes with %25 in the dynamic param with cacheComponents enabled [1 pull requests, 2 comments, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#86957Fetched 2026-04-08 02:08:16
View on GitHub
Comments
2
Participants
1
Timeline
6
Reactions
0
Author
Participants
Timeline (top)
commented ×2cross-referenced ×1issue_type_added ×1labeled ×1

Error Message

When navigating to a dynamic route with a %25 anywhere in the dynamic parameter, and I have cacheComponents enabled, it will give a 500 Internal Server Error.

Fix Action

Fixed

PR fix notes

PR #87003: avoid double encoding path params

Description (problem / solution / changelog)

What?

This encodes and re-decodes the path param before throwing an error from decodeURIComponent.

Why?

More often than not, the error is thrown when a string given to decodeURIComponent has already been decoded. This means that a string like %25 will already be decoded to %, which results in an error from decodeURIComponent. This is also the case for this function. The parameter given is already encoded once, so this function will fail with %25. This PR fixes that by applying the standard solution to this problem: re-encoding, then re-decoding.

If decodeURIComponent still throws an error, the same DecodeError as before is thrown, because that means something different is the culprit.

How?

By re-encoding, then re-decoding the string.

Closes NEXT- Fixes #86957

Changed files

  • packages/next/src/shared/lib/router/utils/route-matcher.test.ts (added, +18/-0)
  • packages/next/src/shared/lib/router/utils/route-matcher.ts (modified, +6/-1)

Code Example

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Thu Jun  5 18:30:46 UTC 2025
  Available memory (MB): 8937
  Available CPU cores: 16
Binaries:
  Node: 22.13.1
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.0.0
Relevant Packages:
  next: 16.1.0-canary.16 // Latest available version is detected (16.1.0-canary.16).
  eslint-config-next: N/A
  react: 19.2.1
  react-dom: 19.2.1
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/therungg/next-percentage-cache-bug-repro

To Reproduce

  1. Enable cacheComponents in next.config.ts
  2. Create a dynamic route
  3. Start the application with npm run build && npm run start (it is not reproducable with npm run dev)
  4. Navigate to http://localhost:3000/%25
  5. Page breaks

Any dynamic route with %25 in the parameter breaks. %24 or other url encoded characters work fine.

Breaks on both Turbopack and Webpack

Disabling cacheComponents removes the bug

Current vs. Expected behavior

When navigating to a dynamic route with a %25 anywhere in the dynamic parameter, and I have cacheComponents enabled, it will give a 500 Internal Server Error.

I expect the page to load fine and to url-decode the character correctly to %.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Thu Jun  5 18:30:46 UTC 2025
  Available memory (MB): 8937
  Available CPU cores: 16
Binaries:
  Node: 22.13.1
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.0.0
Relevant Packages:
  next: 16.1.0-canary.16 // Latest available version is detected (16.1.0-canary.16).
  eslint-config-next: N/A
  react: 19.2.1
  react-dom: 19.2.1
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

cacheComponents

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

next start (local)

Additional context

No response

extent analysis

TL;DR

Disable cacheComponents in next.config.ts to workaround the issue with dynamic routes containing %25 in the parameter.

Guidance

  • Verify that the issue is specific to %25 in the dynamic route parameter, as other URL encoded characters like %24 work fine.
  • Test disabling cacheComponents to confirm it removes the bug, as mentioned in the issue.
  • Investigate if there's a specific configuration or version update for next that could address the issue without disabling cacheComponents.
  • Consider filing a bug report with Next.js, as the issue persists across both Turbopack and Webpack.

Notes

The provided information suggests a potential bug in how Next.js handles URL encoded characters in dynamic routes when cacheComponents is enabled. However, without further details on the Next.js version or specific configurations, it's challenging to provide a definitive fix.

Recommendation

Apply workaround: Disable cacheComponents in next.config.ts, as it is confirmed to remove the bug, although it might not be the ideal long-term solution.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING