How to drop the query parameters after a redirect with NextJS?

Question

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

I read https://nextjs.org/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://docs.netlify.com/routing/redirects/ but I have the same problem with the query parameters staying.

Does this help answer your question: [NEXT JS - How to remove Query Params?](https://stackoverflow.com/a/65611918/1870780)? You could remove the params on the client-side with `next/router`. — juliomalves, Jun 25 '21 at 18:36
I wanted a redirect that would convert the caught parameter as expected. The behavior is weird right now — Wonay, Jul 05 '21 at 08: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, Dec 22 '21 at 12:44

score 7 · Answer 1 · answered Dec 22 '21 at 23:33

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.

score 1 · Answer 2 · answered Apr 11 '22 at 14:53

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 completely.

How to drop the query parameters after a redirect with NextJS?

2 Answers2