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.

[@marie-elizeventer7080]

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

[@yushankkashyap7771]

Man you are a saver. I have wasted so much time on this and you explained it so well. I was stuck due to middleware being in the app folder. Thank you!😄

[@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!

[@sandrotabatadze3768]

short and understable! without any unnecessary things! thanks man!!

[@coderyan]

You’re welcome!

[@zb2747]

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

[@coderyan]

You’re welcome!

[@samnmeje3486]

So straight forward and easy to understand. Thank you

[@coderyan]

You’re welcome

[@csdevelops7]

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

[@coderyan]

Happy it helped!

[@MuhamadAzizPrasetyo]

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

[@coderyan]

Happy to hear it!

[@joze.rios44]

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

[@coderyan]

You’re welcome!

[@Alim-yo3sc]

Thank you for such a simple tutorial

[@coderyan]

You’re welcome

[@abdilaahimowliud7556]

Thank you so much. Very clean

[@coderyan]

Happy it helped!

[@AHMED-dl5hn]

thanks a lot man, simple and efficient

[@coderyan]

Happy it helped!

[@tigana]

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

[@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

[@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

[@habitathomies6049]

Legend! I was stuck on this for ages, thanks!

[@danielcaro1020]

ohh thanks!

[@pritishmendhekar360]

Thanks very helpful😶‍🌫

[@fillipeamg5877]

Thanks. Good feature

[@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…

[@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

[@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

[@VishalMewada-jq4qk]

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

[@devrano48]

Middleware making the routing slower, any solution?

[@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 ?

[@adnanrruka5152]

thnx

[@coderyan]

You’re welcome

[@EseosaOsayi]

Winter is coming, 😂 i spy a game of thrones fan

[@rithikguleria8278]

Wonderful🤍

[@coderyan]

Thank you!