Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Encoding issue between local and Vercel. '+' becomes '%20' when deployed to Vercel. #54702

Open
1 task done
adrocodes opened this issue Aug 29, 2023 · 10 comments
Open
1 task done
Labels
bug Issue was opened via the bug report template.

Comments

@adrocodes
Copy link

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.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: 8.5.0
    Relevant Packages:
      next: 13.4.20-canary.11
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

Link to the code that reproduces this issue or a replay of the bug

https://github.com/adrocodes/next-encoding-bug

To Reproduce

Local:

  • Clone the repo locally
  • Run nvm use (or Node 18.16.0)
  • Run npm i
  • Run npm run dev
  • Open the following URL

Vercel

  • Open the following URL

Vercel Canary

  • Open the following URL

Example:

image

Describe the Bug

The URL contains a + as one of the characters.

Locally, the + is encoded as %2B and decodes into the + using decodeURIComponent as expected.

When deployed to Vercel, the + is encoded as %20 which decodes to a space ( ).

Expected Behavior

When deploying to Vercel the URL should be encoded correctly and inline with what is experienced locally. In this case, the + in the URL should be encoded as %2B and decodes to a +.

Which browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

next dev / Vercel

@adrocodes adrocodes added the bug Issue was opened via the bug report template. label Aug 29, 2023
@Jordaneisenburger
Copy link

Jordaneisenburger commented Aug 30, 2023

I'm experiencing the same issue I think. For me when hovering over the url it shows the internal route that middelware will send the user trough which is weird but it seems to be working when hosted on vercel. Locally I have none of these issues.

@ifielder
Copy link

Same issue here

It's breaking all of our slugs 😬

@Nmaxime
Copy link

Nmaxime commented Nov 2, 2023

+1

Tested on Vercel with Next 13.5.5, 13.5.6 and 14.0.1.

@ericledonge-betonprovincial

This comment has been minimized.

@ericledonge-betonprovincial

Same issue with a bit more trouble.

const Orders = async ({ params, searchParams }: OrdersProps) => {

  const orderId = params.orderId;
  const token = searchParams.token;

  const URL = `https:/my-domain.com/customer/v1/orders/${orderId}?token=${token}`;
  
  const res = await fetch(URL);

Example of call: http://my-web-app/orders/857258?token=ZGFIUmhmd1l4V3dSMk1Cc05jT2E5akprSlhWQ0puMmNlYWs3QldZcWp6ZEZQVGtTQjZhaFlLV2lzYTVnSmJQdnJhL0FZdGtJaVhNSG9yVUxyL2hXN3c9PQ==

On local: works fine.

On Vercel:

[GET] /orders/857258?token=ZGFIUmhmd1l4V3dSMk1Cc05jT2E5akprSlhWQ0puMmNlYWs3QldZcWp6ZEZQVGtTQjZhaFlLV2lzYTVnSmJQdnJhL0FZdGtJaVhNSG9yVUxyL2hXN3c9PQ%3D%3D&nxtPorderId=857258

== -> %3D%3D

And I am not sure to understand the &nxtPorderId=857258 here.

When I display orderId and token in the page, everything is fine, too.

I might try to see on Netlify.

@maxwiseman
Copy link

Still having this issue on next 14.0.3. Has anyone managed to find a solution other than just changing your url params to not have a plus?

maxwiseman added a commit to maxwiseman/scholarly-v3 that referenced this issue Jan 23, 2024
@tomohirohiratsuka
Copy link

I've encountered same issue on Next.js 14.2.1

@fsa317
Copy link

fsa317 commented May 21, 2024

Also hitting this same bug, for me a workaround to replace the + doesn't really work since the urls have been indexed by search engines previously.

@adrocodes
Copy link
Author

@ericledonge-betonprovincial - it's been a while, but did you end up trying this on Netlify? Might be an alternative for anyone who is really affected by this issue. Also, I imagine people not paying Vercel might help motivate someone to look into this issue.

As for me, luckily, I had control of the URL and I encountered this before anything went live so I was able to work around it.

@the-mgi

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

9 participants