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?? You could remove the params on the client-side with next/router. — juliomalves
– juliomalves, Commented Jun 25, 2021 at 18:36
I wanted a redirect that would convert the caught parameter as expected. The behavior is weird right now — Wonay
– 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
– AmerllicA, Commented Dec 22, 2021 at 12:44

Trace · Accepted Answer · 2021-12-22 23:33:19Z

9

+50

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.

answered Dec 22, 2021 at 23:33

Trace

18.9k21 gold badges98 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moritz · Accepted Answer · 2022-04-11 14:53:19Z

3

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.

answered Apr 11, 2022 at 14:53

Moritz

4895 silver badges15 bronze badges

1 Comment

gcb Sep 9 at 16:19

this is less worse, but still have the parameter. Thanks for pointing this out.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related