Next.js: getInitialProps throw Request path contains unescaped characters with using Arabic characters inside next.js router

[AhmadIbrahiim]

Bug report

Describe the bug

I have been trying to use Dynamic Routing with next.js with Arabic character but I used to get
TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters
It works really well If I changed the Arabic letters to any English words

Also:

When this bug appears, Next.js used to send multiple requests to the server with different parameters


From the above Image, The first one is the correct router-id.

When I change the query to English :

it works :+1: and it sends only one request to the server with the proper data!

Router & Code comes as below

index.getInitialProps = async function({ query }) {
  console.log("Getting query ", query);
  const { id } = query;
  const response = await fetch(`http://localhost:3000/api/v1/question/${id}`);
  return { data: await response.json() };
};

page strucuture:

System information

• OS: Ubuntu 18
• Browser: Chrome
• Version of Next.js: 9.1.6
• Node Version: v10.17.0

[sgtpsibin]

try to replace:
const response = await fetch(http://localhost:3000/api/v1/question/${id});
with:
const response = await fetch(http://localhost:3000/api/v1/question/${encodeURI(id)});

[Aung-Myint-Thein]

This method works for my server side rendering but it doesn't work for my pre-rendering pages as the URL are used in file names and my language files' names become too long.. Is there any work around for this? Thanks!