In NextJS, how can I use redirect to turn URL like /page?foo=bar into /page/bar ?

I read .config.js/redirects but couldn't find a solution.

What I have today is:

{
   source: '/page',
   has: [
       { 
          type: 'query',
          key: 'foo'
       }
   ],
   destination: '/page/:foo',
   permanent: true
}

but that make /page?foo=bar into /page/bar?foo=bar.

How can I drop the query ?

Edit:

So I realized that this doesn't event work at all with Netlify.

I tried to follow / but I have the same problem with the query parameters staying.

In NextJS, how can I use redirect to turn URL like /page?foo=bar into /page/bar ?

I read https://nextjs/docs/api-reference/next.config.js/redirects but couldn't find a solution.

What I have today is:

{
   source: '/page',
   has: [
       { 
          type: 'query',
          key: 'foo'
       }
   ],
   destination: '/page/:foo',
   permanent: true
}

but that make /page?foo=bar into /page/bar?foo=bar.

How can I drop the query ?

Edit:

So I realized that this doesn't event work at all with Netlify.

I tried to follow https://docslify./routing/redirects/ but I have the same problem with the query parameters staying.

• javascript
• reactjs
• next.js

• 2 Does this help answer your question: NEXT JS - How to remove Query Params?? You could remove the params on the client-side with next/router. – juliomalves Commented Jun 25, 2021 at 18:36
• 2 I wanted a redirect that would convert the caught parameter as expected. The behavior is weird right now – Wonay Commented Jul 5, 2021 at 8:29
• Your question is so cool, for these kinds of problems I always make a wrapper function for routes and use it for anywhere I want to route. – AmerllicA Commented Dec 22, 2021 at 12:44

2 Answers 2

You can use middleware.

Just parse the query parameter yourself and add redirection.

Store a file _middleware.ts below the pages directory:

export async function middleware(req: NextRequest) {
    const { pathname } = req.nextUrl;
    
    if (// Your-thing ) 
        return NextResponse.redirect(//Your-url);

    return NextResponse.next();
}  

Maybe there is a different way, I don't know, but it doesn't matter.

At least when using Vercel, you can archive this by repeating the parameters from the has in the destination but leaving the value empty.

E.g.:

{
   source: '/page',
   has: [
       { 
          type: 'query',
          key: 'foo'
       }
   ],
   destination: '/page/:foo?foo=',
   permanent: true
}

Parameters that already exit in the destination won't be copied over and parameters with an empty value in the destination will be removed pletely.