Effortless Protected Routes In Next.js Using Middleware

Github project: github.com/cod...
In this engaging tutorial, we dive into the world of Next.js to explore the powerful role of middleware in creating secure, protected routes. Tailored for both beginners and seasoned developers, the video offers a concise yet comprehensive guide, demonstrating step-by-step how to implement middleware for route protection in Next.js applications.

[@cesarpizarra1773]

Man, thank you for this tutorial! I was stuck for hours trying to figure out why my middleware wasn't working. I had placed the middleware file in the app folder and tried debugging it, but nothing worked. Then, I found your video and learned to place the middleware outside the app folder-and it worked!

[@coderyan]

Happy it helped!

[@zb2747]

No bs with an example and straight to the point. Thank you!

[@coderyan]

You’re welcome!

[@MuhamadAzizPrasetyo]

Thank you so much. Very clean and this is what I needed!

[@coderyan]

Happy to hear it!

[@csdevelops7]

Thanks for doing this video Ryan. I was stuck on this for 2 days lol

[@coderyan]

Happy it helped!

[@samnmeje3486]

So straight forward and easy to understand. Thank you

[@coderyan]

You’re welcome

[@tigana]

This is a really helpful compliment their docs. Thank you!!

[@coderyan]

You’re welcome!

[@Alim-yo3sc]

Thank you for such a simple tutorial

[@coderyan]

You’re welcome

[@marie-elizeventer7080]

This was just what I needed. Thank you very much. Simple and easy to understand.

[@RVKAWAAA]

Hey, i like this, so easy to make, thanks bro, greetings from Argentina.

[@coderyan]

You’re welcome!

[@hankersoree]

how do i make it dynamic? without changing user manually in middleware

[@benjaoliva3383]

export const config = {
matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']
};
With this you can run your middleware on every request

[@thatsalot3577]

@@benjaoliva3383 he's asking how do you know whether the user is logged in or not

[@israelzorzor5805]

Really helpful better than the HOC approach

[@fabio9311]

Super helpful! Thanks for creating this

[@mrjessan2343]

Crazy, so that fixed my JWT authentication protected route problem

[@minhaz3193]

what if i want to have multiple middleware functions? where would they go since we have only one middlware.js file and one export for config

[@fillipeamg5877]

Thanks. Good feature

[@tigana]

If you have a src folder, try placing it in there. My middleware didn't run until I did that.

[@morgan24TH]

D@mn true, I appreciate ya

[@DickyFirmansyah-u9o]

so i have setup my middleware and redirect to login page if its not logged in and after login i setup an encodedOriginUrl to go back to that requested page, but can i check if theres a page exist or not in my apps inside middleware? so the user should not go to login page and after login they found that the page is not found, so i just want the user just directly redirect to not found page and not login page if the page doesnt exist in my apps

[@benjamingoller6267]

I am frustrated at the moment. I am using server actions eg for database queries. However, whatever I do, I cannot protect the server function from being accessed from anyone from the client side. The function is in a folder utils alongside app. The can use it from client side but so can anyone! I have looked everywhere, but I cannot seem to find how to handle that…

[@VishalMewada-jq4qk]

but while creating a build the middleware.ts file doesn't work then what will be the solution for that edge case ?

[@ThanHtutZaw3]

My Cookies are exist in normal api call but when I call 2nd api call in service worker notification FCM , I don't get firebase cookies in Next.js api . Is it cross origin issue ?

[@devrano48]

Middleware making the routing slower, any solution?