Next.js Discord

Discord Forum

Redirect works, but the URL doesn't change - NextJS13 middleware

Answered
Reddish carpenter ant posted this in #help-forum
Open in Discord
Reddish carpenter antOP
Hi there!

Its a SPA application, back-end only via APIs, just converting this from a React app.

So I have a middleware that should redirect user from

domain.com/dashboard to domain.com/dashboard/sites

And this is what I got:
'use client'

import { NextRequest, NextResponse } from "next/server"

export const config = {
  matcher: "/dashboard/:path*",
}

export function middleware(request: NextRequest) {
  // console.log("Woof")
 
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.rewrite(new URL('/dashboard/sites', request.url))
  }
}


And while the view is correct, the url doesn't change. Tried a few thingsbut that doesn't seem to work.

Aside from that, how do I structure multiple middlewares for auth etc....? ALl in one page or?
Answered by Aleutian Tern
"/dashboard/sites/" also matches "/dashboard", so after the redirect you will enter an infinite loop of redirects. The match function uses regex, so you probably want to use an exact match or a more strict comparison. Also, in your case, if you only want to redirect the user when they try to enter "/dashboard" and you are using a simple logical condition, like checking for the existence of a cookie or not, I recommend that you put this piece of code in the next.config and use the redirect function:

See how: https://nextjs.org/docs/pages/api-reference/next-config-js/redirects
View full answer

12 Replies

DirtyCajunRice | AppDir
you said redirect
but you made a rewrite
they are not the same thing.
and there is only 1 middleware.
@DirtyCajunRice | AppDir but you made a rewrite
Reddish carpenter antOP
Ah, thanks you

I must ask, last question about this redirect hopefully

I got this:
  if (request.nextUrl.pathname.match('/dashboard')) {
    return NextResponse.redirect(new URL('/dashboard/sites', request.url))
  }


And it console.log in the terminal like a dozen times - so confusing xd

Do you suggest I read up on documentation for auth and this?

I'm using NextJS Auth but also... I can't use a hook inside middleware, so how would I know if the user is authenticated or not if I should show login page or not - that's so confusing.

Maybe from the api, maybe inside the root layout page 🤷
and if you are in a redirect loop you arent properly short circuiting your check to make sure it isnt recursive
@Reddish carpenter ant Ah, thanks you I must ask, last question about this redirect hopefully I got this: js if (request.nextUrl.pathname.match('/dashboard')) { return NextResponse.redirect(new URL('/dashboard/sites', request.url)) } And it console.log in the terminal like a dozen times - so confusing xd Do you suggest I read up on documentation for auth and this? I'm using NextJS Auth but also... I can't use a hook inside middleware, so how would I know if the user is authenticated or not if I should show login page or not - that's so confusing. Maybe from the api, maybe inside the root layout page 🤷
Aleutian Tern
"/dashboard/sites/" also matches "/dashboard", so after the redirect you will enter an infinite loop of redirects. The match function uses regex, so you probably want to use an exact match or a more strict comparison. Also, in your case, if you only want to redirect the user when they try to enter "/dashboard" and you are using a simple logical condition, like checking for the existence of a cookie or not, I recommend that you put this piece of code in the next.config and use the redirect function:

See how: https://nextjs.org/docs/pages/api-reference/next-config-js/redirects
Answer
@Aleutian Tern "/dashboard/sites/" also matches "/dashboard", so after the redirect you will enter an infinite loop of redirects. The match function uses regex, so you probably want to use an exact match or a more strict comparison. Also, in your case, if you only want to redirect the user when they try to enter "/dashboard" and you are using a simple logical condition, like checking for the existence of a cookie or not, I recommend that you put this piece of code in the next.config and use the redirect function: See how: https://nextjs.org/docs/pages/api-reference/next-config-js/redirects
Reddish carpenter antOP
Alright, awesome! 🙂

I had a wrong understanding of the above in that case.

In terms of the auth, woudln't you use mddleware?

So if I have a JWT, and its BAD code from the back-end, meaning there is just access code, no refresh no thing, access code is used as everything and that's being stored in localstorage - how would you go about implementing that? Based on weather that exists in localstorage I'd want to restrict routes anything in dashboard be protected except, login, register, forgotten password etc : p

I'm also using NextAuth if that matters, i saw its popular so I though that's what you're supposed to use right?
Aleutian Tern
Well, you could simple create a context provider, check for the access code, and redirect acordially, but you're using nextjs you can do better can only rely on client-side. I would recommend using a cookie, use the matcher middleware config, select the protected routes only, check for the cookie with access code, authorize/unauthorize there.
@Aleutian Tern Well, you could simple create a context provider, check for the access code, and redirect acordially, but you're using nextjs you can do better can only rely on client-side. I would recommend using a cookie, use the matcher middleware config, select the protected routes only, check for the cookie with access code, authorize/unauthorize there.
Reddish carpenter antOP
But the back-end doesn't accetpt the cookie and its not configured for a cookie.

This entire app is SPA client side only.

I wonder, what would be the docs for the above? Mind sharing them please.
I might as well be messing something up, not that experienced with this stuff either but if the back-end was done properly this would be no issue I'm sure xd