Next.js 12 - Middleware & Edge functions explained

My courses:

💻 MY GEAR

Connect with me:

Timestamps
01:10 Middleware explained
02:19 Vercel Edge functions explained
05:31 Basic Auth implementation with Middleware
09:00 Vercel Edge functions vs Api route functions (comparison)

#nextjs #middleware #edgefunctions

[JamesQQuick]

Hilarious that this is the video that I decided to watch and you referenced my tweet lmao! Nice job!

[xHomu]

Thanks for putting this video out! It really helps to have someone who's willing to explain it "like I was 5" for the rest of us.

[yhr]

Thank you for this tutorial.
Seeing this in practice is – in my opinion – more intuitive than all that fancy stuff in the documentation.

[matthewyak]

Thank you for this tutorial! This helped me understand much better than any documentation or google searches. 👍

[toastrecon]

Lol. When you started talking about “Edge” I stopped the video and checked to make sure I was in the right place. 😂

Thanks for this video!

[aggbits]

Thank you for the video.. The thing is that with cdn.. this works very well because the CDN is the end point... but when we discuss about accessing apis, what matters most is where the api endpoint is located, not necesarlly from where the request is made.. but technically speaking if the edge function is doing the rendering also, this could save some time, and I guess that this is where server components fit in..Also it depends on how complex is the backend for your app.. if you own the auth or api service and you deploy the node server close to it without using vercell, I think that the response time would be about the same, but if you use a 3rd party auth service that also knows to handle request via geolocation, your response time improves a lot because the edge function is closer to the client and also the api endpoint is closer to the edge function. Where this fits very well for example is doing authentication with firebase because the bundle zise of the sdk will be separated from the app, I think

[rism]

Great video! We need more content like this. Keep it up

[flibben]

Very nice video, thanks for this. Exactly what I was looking for about middleware in nextJS. Loved the part about "hey, sue me", laughed out loud on that one :D

[MaxProgramming]

Thanks learnt very useful info from this video Tuomo. The Edge joke was too funny 😂.
But yet I personally love using it 😉

[Rodrig]

amazing tutorial. Straight to the point and easy to follow

[Rex-livk]

Very informative! Not sure if I understood Edge functions during the Next.js conf 2021 but if I did I definitely forgot lol. I have a good idea of them now. Thanks!

[gtanmoy]

Please make a complete app in Next.js with all the updated functionality. Thank you.

[DanielRios]

I'm facing a problem using next-pwa and middleware, I verify if the user is authenticated on index and redirect to /login if does not, but after make the login Router.push('/') does not redirect back to index because the value of start-url cache is empty, it turns empty when the middleware redirects to /login before the user finishes the login

[christopheanfry]

Thank you for your explanations much clearer with a well explained situation. Really good job 👍

[alexchud]

How does middleware work after the app hydrates for pages ? Does it always make a request to the server or will it run in the browser ? How middleware works with nuxt.js for example … thanks 🙏

[phyllis]

Great video, I agree with the other comments you explain this topic topic better than the NEXT.is docs. Thanks

[qbek_san]

_middleware edge function don't work in dev server? You need to deploy it to Vercel?

[igdev]

On production I can't clear multiple cookies like

It's only clear first cookie is 'access_token' not both
But it's work perfectly on local dev. How can I solve that? :(

[dhaniabelega]

Thanks for the tutorial. Do you know if it's possible to modify the request object before it reaches the api endpoint? e.g. adding a header to the request object. Calling req.headers.addHeader() does not seem to work. The newly added header isn't visible in the api endpoint.

[AntNZ]

Help! Do you have to deploy to vercel in order to use middleware\edge functions? I have tried to find an answer to this question everywhere but have not had any success. I want to deploy my app on firebase, but really need to use all of nexts features.