Next.js Discord

Discord Forum

issues with middleware redirects

Unanswered
Chinese perch posted this in #help-forum
Open in Discord
Chinese perchOP
I have this check in my middleware that looks like this:

  if (!req.nextUrl.pathname.startsWith('/login') && !req.nextUrl.pathname.startsWith('/signup')) {
    return NextResponse.redirect(new URL(`/login?target=${req.nextUrl.pathname}`, req.url))
  }
  return res


Which works totally fine unless the pathname is something like 
/booking/523.


in which case it is getting encoded like this:

'login?target=%2Fbooking%2F5'



I've read this: https://nextjs.org/docs/messages/middleware-relative-urls

But no matter what I try it doesn't seem to be working. Even if I do this:

return NextResponse.redirect(new URL('http://localhost:4200/login?target=/bookingFlow/5'))


I'm still getting this as the response in my browser:

http://localhost:4200/login?target=%2FbookingFlow%2F5


Please any suggestions would be really appreciated, I feel like I'm going in circles here.

10 Replies

riský
thats url encoded and intended, when using make sure to decode and it will be good (is done because otherwise the url can be confusing)
Chinese perchOP
thanks so much for the response, I did find something similar to that and did get I needed to decode it, but I have no idea where this encoding is happening because if I do this:

  if (!req.nextUrl.pathname.startsWith('/login') && !req.nextUrl.pathname.startsWith('/signup')) {
    console.log('what is the next url', req.nextUrl.pathname) // /bookingFlow/2
    console.log('what is the url', req.url) // http://localhost:4200/bookingFlow/2
    const targetPath = decodeURIComponent(req.nextUrl.pathname)
    const newUrl = new URL(`/login?target=${targetPath}`, req.url)
    console.log('what is the new url', newUrl.href)  http://localhost:4200/login?target=/bookingFlow/5
    return NextResponse.redirect(newUrl.href)
  }


It still gives me the same response. (http://localhost:4200/login?target=%2FbookingFlow%2F5)

If I update the redirect to have the decode in so its like this:
return NextResponse.redirect(decodeURIComponent(newUrl.href))


It still gives me the same response in my url (http://localhost:4200/login?target=%2FbookingFlow%2F5)
riský
do the decode where you want to use the target query param
Chinese perchOP
so if I do this:
Welcome to Node.js v18.16.0.
Type ".help" for more information.
decodeURIComponent('http://localhost:4200/login?target=%2FbookingFlow%2F5')
'http://localhost:4200/login?target=/bookingFlow/5'
>

I'm not sure what I'm missing here? What do you mean by that Risky?

If I do this:

return NextResponse.redirect('http://localhost:4200/login?target=/bookingFlow/5')

It still gives me the same response. If I do this:

return NextResponse.redirect(decodeURIComponent('http://localhost:4200/login?target=%2FbookingFlow%2F5')) also same response.

I'm really sorry I'm not trying to be daft and maybe I am missing something really obvious here?
riský
the redirect is normal, don't get mad at it
like where are you using ?target='s value?
as wherever that is, is where you want to decode
not get mad about it being "encoded" in url