NextJs Middleware | How it Works & Real Use Cases
Vložit
- čas přidán 24. 07. 2024
- In this video, we'll look at NextJs middleware, how it works, and real examples and use cases that will help you to intercept requests and execute some code on the Edge runtime before the request is completed.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...
Chapters
0:00 Intro
11:40 Code examples
16:55 Outro
I love the concept. First explain the documentation and then make an example. Perfect for people who get bored easily while reading documents.
Glad you found the video helpful. I appreciate your comment.
Damn this is great content tbh, ive made a full stack project just by combining what i learn from your videos. Its honestly so great keep up the amazing work and im looking forward for more uploads from u 🙏🙏
I'm glad to hear you're finding the videos useful! I appreciate your comment.
Thank you! This really clarified it for me. 😊 You explained it so well.
You're welcome! Glad it was helpful.
Thanks a lot, dear teacher. You're amazing! For me now it's so clear.
Happy to hear that!
Keep your nextjs content coming. Very good video.
Absolutely 💯
Just came back to this bad boy to refresh my knowledge 💪🏼
Welcome back 🙌🏼
At first my nextjs project was crashed while production but I took help from the community and added a middlewere.ts file in root of it and it's working fine in production.
Glad you were able to figure it out.
Great explanation.
Glad it was helpful!
Great explanation 👏, keep going...
Thank you 🙂
great channel
thank you, mate
I appreciate it! Welcome to the channel.
I'd love to buy your course sometime
nicely explained
I'd glad to have you in the course. Appreciate your comment.
thx. here is a question, what if i want to protect some but exclude certain paths from next-auth/middleware such as excluding /api/auth but protect admin. i literally tried every way including regex, i tried to redirect with nextresponse if i am in that path or request.url ext.. noting works. let me know if you have any idea! thx.
You can either match all the routes and use if conditionals inside your middleware to control which paths to protect, or only pass the paths you want to protect to the config matcher like the `matcher: "/admin/:path*" `
thanks for your videos! saludos!
My pleasure!
Hey it was nice to meet you at Tailwind Connect!
Hey Michael, it was nice meeting you as well, and thanks for reaching out.
Hi, I actually tied to find, here on CZcams, a way to set cookies of a client, in any request that I make to backend. They are done manually in every single route (endpoint) in NextJS, but that should be handleable by middleware right? Request flow Postman -> Next -> Nest -> Next -> Postman. In here If I don't particularly ask Next to add "Cookie" header, it won't automatically be sent to the backend on nest. How not repeat your code by using this middleware? Doesn't seem to work so far with getting and setting the cookies.
I'm not sure if I understand the question! Can you summarize your question?
How do we add production-grade auth if we're using a backend API like Django or Springboot?
Suppose we wanna use an API that already has auth (either JWT or session-based) and all the password reset etc features built-in. How best do we set up auth and how best do we manage server state vs client state?
Any resources or advice would be thoroughly appreciated.
Good question, I guess you'd have to set and manage cookies to communicate with you Django backend, but to be hones, I'm not the very familiar with Django so I won't be the best person to help with this.
I can't access local storage in the middleware for authentication, any solution?
You can use cookies for auth related tokens.
@@hamedbahram 👍
Is it possible to have multiple middleware functions ? Can you please show how to have both next-auth and next-intl configured integrated in middleware.
Yes you can chain middlewares, sure I'll keep that in mind for another video.
Great vid can you please share the notion document you created? many thanks
Thanks for you comment. I'll publish the notion page and the notes on my site next week so you can check it out.
Hey there Hamed. Superb content you' ve been putting out there!
I've been trying to extract the _id from the users mongo collection in the session object so I can persist that piece of data when I insert something like a todo object in a todos collection, so I can later have like an individual set of todo' s for each individual user. I' ve found that it can be done by doing a little bit of next auth module augmentantion and switching from the jwt to the database strategy. The caveat of this is that it doesn' t allow me to protect routes as easily as the middleware approach does. So, in short, can you think of a way to protect routes in the app router using next-auth and the database strategy? Thanks in advance!
Thanks Nicolás!
To add the user id to the session object, you don't have to necessarily use the `database` strategy. You can pass a database adapter so you can persist user data but still explicitly set the session strategy to `jwt`. This way you can still use the middleware for authentication.
@@hamedbahram Oh I don't know why I missed that! Alright, will give it a try. thanks!
@@nicolasrodi3138 Awesome!
Really helpful
Glad to hear that
I used to work with external APIs for authentication with JWTs, specifically using refresh token to provide better user experience. Then, after learning the new "app router", I don't know how to work with refresh tokens anymore. Any suggestions? Much appreciated!
For sure, please expand on how you were doing it before, so I can suggest how to do it in the app router. On the other hand I've used NextAuth and Clerk for auth in NextJs, both of which support refresh token rotation, so you don't have to implement it from scratch.
I was protecting api with middle ware based on cookies token . But when I make call second api from service worker Notification, I don't receive cookies .
Watch this video for auth implementation using middleware functions → czcams.com/video/SFQwto0rvps/video.html
Thank you!🙏
Any time!
Excellent!!!!
Thank you!
thank you Mr Hamed Bahram.
Is it possible to access the information in the cookie in the middleware to write a condition according to that information?
My pleasure! Yes you can access the cookies, here is an example => nextjs.org/docs/app/building-your-application/routing/middleware#using-cookies
thanks a lot 🙏 @@hamedbahram
@@mostafaentezami8951 my pleasure.
How can I add my own extra logic in the middleware function if I’m using Clerk? Because clerk forced to me to just use their AuthMiddleware
You can chain you middlewares using the `beforeAuth` callback in Clerk. You can read more about it here: clerk.com/docs/nextjs/middleware#chaining-middleware-together
Thanks for the video, great content. Whats the app you use to show the content??? Thanks
Thank you! I use notion for my notes.
Thanks @@hamedbahram
Does your ecommerce project implemented with Clerk have user roles?
Nah it doesn't, but I will create a video on role-based authentication soon. This has been requested from a lot of folks.
Thank you!
Anytime!
Thanks☺☺! You just gained a subscriber😁. Please, i would like to know how pass data (returned by an API request called in the middleware), into server components. Similar to the way you did it for normal API endpoints
Glad to hear that! I don't think you can pass data to server components from you middleware. You can return JSON from it or redirect to a page but not sure how to send data to that page. Why not calling the API from the server component?
@@hamedbahram Thanks! I’ll do that ☺️
how about using redux storage to get the values but not cookies, can I use like this. Cause I'm storing the user details in the Redux storage, where the jwt token exists, so i wanna take the help of that local storage for the protected routes using middleware(but not cookies). Can we achive this, please make something clear for me, Please explain the process if that works( i don't wanna involve coookies for protected routes
I think http only cookies are a better way for authentication, also I haven't seen redux implemented in middleware before.
@@hamedbahram how can we implement those protected routes in app router. getServerSide Props doen't work on those router while using 'use client', in that case what can be the best pratice for the protected routes
Such an amazing tutorial. But I have a doubt in my mind. Can we have different middlewares for different path? Can we also have multiple middlewares for the path? I mean a middleware only for "/about" path and other one is for "/user/dashboard"
Watch this video where I explain running multiple middlewares → czcams.com/video/bFr2t68AABQ/video.html
Thank you 😄@@hamedbahram
is it true nextjs middleware only works if deployed on vercel? At least for anything that needs nodejs.
It depends on the platform you choose to host your application, on Middlewares are deployed as an edge function.
thank bro
Anytime
how can I make database calls in middleware
Since middlewares run on the edge runtime, you can't make a traditional database connection unless you use a database that allows you to connect over HTTP.
why is the middleware file in the root of the project? can't we put it inside the app directory inside the folder "about" instead of doing regular expressions in `export const config = { matcher: '/about' }`
You can only use the file `middleware.ts` (or .js) in the root of your project to define Middleware. Read more here → nextjs.org/docs/app/building-your-application/routing/middleware
@@hamedbahram
how many middleware.ts files a project can have?
Sir please create role based authentication in nextauth
Thanks for the suggestions, I appreciate it. I have that in my upcoming videos.
where to find this document ?
The source code and all the related links are in the video description.
How Modularise middleware? Large middleware file will produce issue
Good question! You'd have to chain middlewares together. Here is a good read:
reacthustle.com/blog/how-to-chain-multiple-middleware-functions-in-nextjs
@@hamedbahram Thank you! Got it.
Nice🎉
Thanks
I hope deep dive websockets with next js . There is zero content on CZcams on this topic
Thanks for the suggestion Abbas. I appreciate it.
Typescript plase😢
Thanks for your feedback, I hear you 🙂.
But you did not talk about auth in middleware.
This video is not about authentication; It's about what middlewares are and how they work.
Watch this video for auth → czcams.com/video/SFQwto0rvps/video.html
And this for chaining multiple middlewares → czcams.com/video/bFr2t68AABQ/video.html
yes but I think you said we will talk about authentication
@@hamedbahram
You have done sessions before using the getSession(). Between that and using middleware for authenticated users, which would be better?
I personally like the middleware approach, since it runs before the page is rendered, and It's typically faster.
@@hamedbahram Aaah thanks for that insight👏🏻.
thanks bro
My pleasure!