Error page if url contains percentage, which happens on redirection with non ascii characters in url

[its-mXc]

What version of Next.js are you using?

12

What version of Node.js are you using?

12.22.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

we get 400 Bad request if page contains "%", we also don't get error/issue on terminal it just compiles _error

This occurs because we are redirecting url's with non ascii characters, our page old-page/à becomes page/%E0

  return {
    redirect: {
      destination: `/page/${query?.id || ""}`,
      permanent: false,
    },
  };

I think while redirecting it is encoding url, so we get %. nevertheless it should not break i think

Expected Behavior

Redirect correctly, without changing url

To Reproduce

Open a url with %

[its-mXc]

There is a weird case of it working for "%60", not sure why

[balazsorban44]

Just to verify since you left some details out, are you using something like the following?:

In pages/old-page/[id].jsx

...
export const getServerSideProps = async (ctx) => {
  return {
    redirect: {
      destination: `/page/${encodeURIComponent(ctx.query?.id || "")}`,
      permanent: false,
    },
  }
}

And then you have a page like pages/page/[id].jsx?

[its-mXc]

Hi @balazsorban44 , simplified version of what we are using

export async function getServerSideProps(context) {
  const { res, params, query } = context;

  return {
    redirect: {
      destination: `/page/${params?.courseid || ""}`,
      permanent: true,
    },
  };
}

Edit: Let me know if you need more info

Edit2: yes we have pages/page/[courseid].js. Is encodeURIComponent suggested ?

[its-mXc]

@balazsorban44 encodeURIComponent fixes the issue the url is not changed and loads correctly. Thank you so much

I am not sure whether to close the issue because %E0 as param directly which à was being converted to still breaks the page, even on invalid url or page example next-js url https://nextjs.org/%E0 or random like this https://nextjs.org/%E0G1

[timneutkens]

Is this potentially related to #33763?

[its-mXc]

I will try to confirm this with new canary build this week @timneutkens

[its-mXc]

@timneutkens This issue is reproducible on 12.0.10-canary.1

I used sample nextjs application
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Steps-

change version to 12.0.10-canary.1
Install and build
open url with %E0

[fcandi]

Thx, I experience exactly the same problem.

I just went live on vercel with Next 12.1.4. I use some basic rewrites and I also use the middleware example for international routing for prefixed default language.

You can check it here. Working URL:
https://geobla.com/en/campsite/devesa-gardens

Add a %, and there is a bad request error:
https://geobla.com/en/campsite/devesa-gardens%likeso

There is no log entry.

[1377sayaba]

I experience exactly the same problem with ?