CODEWITHSUNDEEP
javascriptnode.jsreactjsnext.js
Rajendra A Verma
Rajendra A Verma

Reputation: 423

The dynamic route parameter does not support Unicode languages other than English

Official Documentation of NextJS 13 (beta) describes dynamic route parameters in this link.

Explanation:

app/shop/[slug]/page.js

To access slug, we use params.slug.

Example:

app/shop/this-is-shop/page.js

Here params. slug return -> this-is-shop.

If we use another language other than english, for example in Hindi:

app/shop/यह-दुकान-है/page.js

params.slug return -> %E0%A4%B9-%E0%A4%A6%E0%A5%81%E0%A4%95%E0%A4%BE%E0%A4%A8-%E0%A4%B9%E0%A5%88.

But it should return -> यह-दुकान-है.

That's the issue. How to fix this? Or a way to get an actual text?

Upvotes: 1

Views: 1005

Answers (1)

Youssouf Oumar
Youssouf Oumar

Reputation: 46311

This is not an issue related to Next.js. It's how URLs work. You can only have a limited number of characters in a URL. Others should be encoded. Here is a quote from an article from URLEncoder.io:

A URL is composed of a limited set of characters belonging to the US-ASCII character set. These characters include digits (0-9), letters(A-Z, a-z), and a few special characters ("-", ".", "_", "~").

ASCII control characters (e.g. backspace, vertical tab, horizontal tab, line feed etc), unsafe characters like space, \, <, >, {, } etc, and any character outside the ASCII charset is not allowed to be placed directly within URLs.

Moreover, there are some characters that have special meanings within URLs. These characters are called reserved characters. Some examples of reserved characters are ?, /, #, : etc. Any data transmitted as part of the URL, whether in query string or path segment, must not contain these characters.

So, what do we do when we need to transmit any data in the URL that contain these disallowed characters? Well, we encode them!

URL Encoding converts reserved, unsafe, and non-ASCII characters in URLs to a format that is universally accepted and understood by all web browsers and servers...

What you are seeing is the encoded version of "यह-दुकान-है" as you can see in this example: 

console.log(encodeURI("यह-दुकान-है"))

If you want the initial value, use decodeURI(), like so:

console.log(decodeURI('%E0%A4%AF%E0%A4%B9-%E0%A4%A6%E0%A5%81%E0%A4%95%E0%A4%BE%E0%A4%A8-%E0%A4%B9%E0%A5%88'));

Upvotes: 1

Related Questions