How to display array format of a parameter in url?

Task

I'm working on NextJS 12 project and I want to pass an array as a parameter to the query.

Expected

The format should be like this :

/path?address_id=1235&roofs=[1,2]&lang=en

Current

However, when I pass the array I get an encoded result :

/path?address_id=1235&roofs=%5B1%2C2%5D&lang=en

Code

router.replace({
					pathname: '/panel_placement',
					query: {
						address_id: '11842008',
						roofs:`[${selectedRoofs.join(',')}]`, //here
						lang,
					},
				});

No, you cannot directly pass an array as a parameter in a URL. URLs are used to identify and locate resources on the web, and they follow a specific format. URL parameters are typically represented as key-value pairs separated by an equal sign (=) and joined with an ampersand (&).

While you cannot pass an array directly as a parameter in a URL, you can represent an array as a string and pass it as a parameter. There are a few common methods to achieve this:

Comma-Separated Values: Convert the array elements into a comma-separated string and pass it as a parameter. For example: ?array=element1,element2,element3.

Query String Parameters: Serialize the array into a query string format and pass it as a parameter. For example: ?array[]=element1&array[]=element2&array[]=element3. In this method, the array is represented as multiple parameters with the same name, followed by square brackets [].

JSON Encoding: Convert the array to a JSON string and URL encode it before passing it as a parameter. For example: ?array=%5B%22element1%22,%22element2%22,%22element3%22%5D. Here, %5B represents [ and %22 represents " in URL encoding.

On the server-side, you will need to parse the parameter value and convert it back into an array based on the chosen representation method.

URLs have a maximum length limit, so if the array is large, you might encounter issues with URL length restrictions. In such cases, other methods like using POST requests or encoding the array in a different format (e.g., Base64) may be more appropriate.

See RFC 3986 titled "Uniform Resource Identifier (URI): Generic Syntax."