In our NextJS application we have a URL that is fed with various query strings.

With some query strings, however, we have the problem that they are displayed in encoded form. For example like this:

http://localhost:8080/my-app/test-app?project=project%3Aone&project=project%3Atwo

As you can see, the colons are replaced with %CA.

I know that this may be a default behavior, but I need the colons in the URL.

Is there any way I can get this? So I need to URL above like:

http://localhost:8080/my-app/test-app?project=project:one&project=project:two

We are using URLSearchParams() like this:

const constructQueryString = (params: any) => {
    const searchParams = new URLSearchParams();
    const projects = params.project.split(',');
    projects.forEach((p) => {
        urlSearchParams.append('project', p);
    });

    return searchParams.toString();
};

In our NextJS application we have a URL that is fed with various query strings.

With some query strings, however, we have the problem that they are displayed in encoded form. For example like this:

http://localhost:8080/my-app/test-app?project=project%3Aone&project=project%3Atwo

As you can see, the colons are replaced with %CA.

I know that this may be a default behavior, but I need the colons in the URL.

Is there any way I can get this? So I need to URL above like:

http://localhost:8080/my-app/test-app?project=project:one&project=project:two

We are using URLSearchParams() like this:

const constructQueryString = (params: any) => {
    const searchParams = new URLSearchParams();
    const projects = params.project.split(',');
    projects.forEach((p) => {
        urlSearchParams.append('project', p);
    });

    return searchParams.toString();
};

• javascript
• reactjs
• typescript
• next.js
• next-router

Share Improve this question Follow asked Nov 2, 2021 at 13:28 Codehan25Codehan25 3,0141212 gold badges5959 silver badges109109 bronze badges 3

• Nothing is wrong here, if you do searchParams.getAll('project'); you'll see that it returns ['project:one', 'project:two'] – Reyno Commented Nov 2, 2021 at 13:31
• @Reyno But why isn't that showing up in my URL? I think it's because we are using Next.js router.push() and for this reason the URL is being adjusted again. I have no idea what I can do here to avoid that encoding. – Codehan25 Commented Nov 2, 2021 at 13:34
• 2 Because an : is an unsafe ASCII character. It get's converted so it can safely be send over the internet. And as you can see it gets converted back when you use the .get or .getAll methods. See HTML URL Encoding for more info – Reyno Commented Nov 2, 2021 at 13:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Use the decodeURIComponent global function in Javascript

const decodedPath = decodeURIComponent("http://localhost:8080/my-app/test-app?project=project%3Aone&project=project%3Atwo")

The Result is what you want as below:

http://localhost:8080/my-app/test-app?project=project:one&project=project:two

These are escape codes for special characters in the URL that are necessary and cant be avoided. Also, there's no need for you to use URLSearchParams. Just use router.query will give you query and router.pathname for the path (/my-app/test-app) in nextJS