NextJs Middleware | How it Works & Real Use Cases

[@hakankaraahmetoglu490]

I love the concept. First explain the documentation and then make an example. Perfect for people who get bored easily while reading documents.

[@hamedbahram]

Glad you found the video helpful. I appreciate your comment.

[@SiddhantSuvagiya]

Just watched your first video and you are so good at explaining - subscribed!

[@hamedbahram]

Glad to hear that. Thanks for subscribing!

[@intruder2.0]

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 🙏🙏

[@hamedbahram]

I'm glad to hear you're finding the videos useful! I appreciate your comment.

[@JennySevilla-dk2gh]

Thank you! This really clarified it for me. 😊 You explained it so well.

[@hamedbahram]

You're welcome! Glad it was helpful.

[@gyanaranjan6526]

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.

[@hamedbahram]

Glad you were able to figure it out.

[@uixmat]

Just came back to this bad boy to refresh my knowledge 💪🏼

[@hamedbahram]

Welcome back 🙌🏼

[@enjoy.....1365]

learning with this way , makes the task more easier

[@hamedbahram]

Glad to hear that!

[@regrioz]

Keep your nextjs content coming. Very good video.

[@hamedbahram]

Absolutely 💯

[@luizinhogm]

Thanks a lot, dear teacher. You're amazing! For me now it's so clear.

[@hamedbahram]

Happy to hear that!

[@michaelmannucci8585]

Hey it was nice to meet you at Tailwind Connect!

[@hamedbahram]

Hey Michael, it was nice meeting you as well, and thanks for reaching out.

[@afshinkaramifar4429]

Great explanation 👏, keep going...

[@hamedbahram]

Thank you 🙂

[@27sosite73]

great channel thank you, mate

[@hamedbahram]

I appreciate it! Welcome to the channel.

[@lexsemenenko]

Great explanation.

[@hamedbahram]

Glad it was helpful!

[@aburaihan-py4vi]

Excellent!!!!

[@hamedbahram]

Thank you!

[@agustinmolina1027]

thanks for your videos! saludos!

[@hamedbahram]

My pleasure!

[@musaamuhsen]

Great vid can you please share the notion document you created? many thanks

[@hamedbahram]

Thanks for you comment. I'll publish the notion page and the notes on my site next week so you can check it out.

[@imkir4n]

Really helpful

[@hamedbahram]

Glad to hear that

[@TheEngineer-ef1jq]

I'd love to buy your course sometime nicely explained

[@hamedbahram]

I'd glad to have you in the course. Appreciate your comment.

[@sebastianfast3501]

Thank you!🙏

[@hamedbahram]

Any time!

[@dawid_dahl]

Thank you!

[@hamedbahram]

Anytime!

[@gcortinez]

Thanks for the video, great content. Whats the app you use to show the content??? Thanks

[@hamedbahram]

Thank you! I use notion for my notes.

[@gcortinez]

Thanks @@hamedbahram

[@ICOReviewtoken]

thank bro

[@hamedbahram]

Anytime

[@princeonukwili996]

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

[@hamedbahram]

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?

[@princeonukwili996]

@@hamedbahram Thanks! I’ll do that ☺️

[@aminsoraya]

Nice🎉

[@hamedbahram]

Thanks

[@heysahilsingh]

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"

[@hamedbahram]

Watch this video where I explain running multiple middlewares → kzbin.info/www/bejne/mHfVY6dsbaZ0eLM

[@heysahilsingh]

Thank you 😄@@hamedbahram

[@mostafaentezami8951]

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?

[@hamedbahram]

My pleasure! Yes you can access the cookies, here is an example => nextjs.org/docs/app/building-your-application/routing/middleware#using-cookies

[@mostafaentezami8951]

thanks a lot 🙏 @@hamedbahram

[@hamedbahram]

@@mostafaentezami8951 my pleasure.

[@m.masoud70]

hello hamed can we access to database in next middleware eg: fetch user data to check role?

[@hamedbahram]

Yes using an HTTP client, the edge runtime doesn't support the traditional tls database connection.

[@lexsemenenko]

Does your ecommerce project implemented with Clerk have user roles?

[@hamedbahram]

Nah it doesn't, but I will create a video on role-based authentication soon. This has been requested from a lot of folks.

[@msarlak1512]

thanks hamed! how i can access this middleware document?

[@hamedbahram]

Hmm that's part of the NextJs course modules.

[@CoderSineNomine]

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.

[@hamedbahram]

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*" `

[@aloneking5388]

Sir please create role based authentication in nextauth

[@hamedbahram]

Thanks for the suggestions, I appreciate it. I have that in my upcoming videos.

[@ajayg2752]

I can't access local storage in the middleware for authentication, any solution?

[@hamedbahram]

You can use cookies for auth related tokens.

[@ajayg2752]

@@hamedbahram 👍

[@nicolasrodi3138]

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!

[@hamedbahram]

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.

[@nicolasrodi3138]

@@hamedbahram Oh I don't know why I missed that! Alright, will give it a try. thanks!

[@hamedbahram]

@@nicolasrodi3138 Awesome!

[@OleJrgensen]

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.

[@hamedbahram]

Yes you can chain middlewares, sure I'll keep that in mind for another video.

[@ThanHtutZaw3]

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 .

[@hamedbahram]

Watch this video for auth implementation using middleware functions → kzbin.info/www/bejne/iXe0qKelZdepptU

[@amirrezaranjbar2853]

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

[@hamedbahram]

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

[@Septumsempra8818]

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.

[@hamedbahram]

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.

[@idunexist]

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!

[@hamedbahram]

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.

[@GiorgiGvimradze1]

Hi, I actually tied to find, here on KZbin, 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.

[@hamedbahram]

I'm not sure if I understand the question! Can you summarize your question?

[@saichandrajagu6141]

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

[@hamedbahram]

I think http only cookies are a better way for authentication, also I haven't seen redux implemented in middleware before.

[@saichandrajagu6141]

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

[@abbaskareem5281]

I hope deep dive websockets with next js . There is zero content on KZbin on this topic

[@hamedbahram]

Thanks for the suggestion Abbas. I appreciate it.

[@dulonmahadi1837]

where to find this document ?

[@hamedbahram]

The source code and all the related links are in the video description.

[@techknowledgebase4504]

How Modularise middleware? Large middleware file will produce issue

[@hamedbahram]

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

[@techknowledgebase4504]

@@hamedbahram Thank you! Got it.

[@TheEngineer-ef1jq]

is it true nextjs middleware only works if deployed on vercel? At least for anything that needs nodejs.

[@hamedbahram]

It depends on the platform you choose to host your application, on Middlewares are deployed as an edge function.

[@simonhylander7489]

how can I make database calls in middleware

[@hamedbahram]

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.

[@samislam2746]

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' }`

[@hamedbahram]

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

[@samislam2746]

@@hamedbahram how many middleware.ts files a project can have?

[@אליה-ז8י]

is it version 5?

[@hamedbahram]

V4

[@jeremymunroe]

Typescript plase😢

[@hamedbahram]

Thanks for your feedback, I hear you 🙂.

[@mohammadaghayari3661]

But you did not talk about auth in middleware.

[@hamedbahram]

This video is not about authentication; It's about what middlewares are and how they work. Watch this video for auth → kzbin.info/www/bejne/iXe0qKelZdepptU And this for chaining multiple middlewares → kzbin.info/www/bejne/mHfVY6dsbaZ0eLM

[@mohammadaghayari3661]

yes but I think you said we will talk about authentication @@hamedbahram

[@jeremymunroe]

You have done sessions before using the getSession(). Between that and using middleware for authenticated users, which would be better?

[@hamedbahram]

I personally like the middleware approach, since it runs before the page is rendered, and It's typically faster.

[@jeremymunroe]

@@hamedbahram Aaah thanks for that insight👏🏻.

[@alirezaahmadi9244]

thanks bro

[@hamedbahram]

My pleasure!