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
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
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!
On production I can't clear multiple cookies like NextResponse.clearCookie('access_token').clearCookie('access_token') It's only clear first cookie is 'access_token' not both But it's work perfectly on local dev. How can I solve that? :(
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.
I'd say that you don't need to deploy to vercel in order to use middleware, but where ever you want to deploy needs to support middleware and edge functions. Not sure about firebase, but at least Netlify seems to support middleware www.netlify.com/blog/2021/10/27/use-next.js-12-on-netlify/ About the edge, Netlify seems to have edge handlers in beta www.netlify.com/products/edge/edge-handlers/
Hey Great video! Hmm.. I was just wondering if you're located at Helsinki, the closest vercel's datacenter is located at Stockholm?. When you deployed your app to vercel - didnt you choose its default location to be at Stockholm's dc? So in conclusion - It seems to me that there isn't much benefit for users in Finland when the backend lambdas are deployed to stockholm anyway. Greetings from Estonia.
Hey Kris and thanks for your comment! I'm not actually sure if the closest datacenter is in Stockholm, but if it is, then yeah for users from Finland that might not have a big effect. But since we don't know where users are going to open up your app, then in that case the edge functions are good option.
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
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 🙏
That's a good question! I would say that it won't run in the browser since the middleware is run before the page plus middleware can have logic like authentication handling.
@@TuomoKankaanpaa thanks for your reply, that's interesting, that means after the App is hydrated it still makes a call to the server for every new page that is displayed in SPA mode...
Amazing video! Does it mean that no backend needed at all for a single web app? I am a new starter, and would like to learn how to develop an e-commerce app. Trying to find the best option, and this seems to be the most suitable.
Thank you! Basically the api & edge functions are run on backend but you don’t need to worry about setting the backend up because next.js and vercel handle that automagically. Next.js is great for an ecommerce app!
With api routes it should be possible and with edge functions I’d say if it is not possible directly, you could always use some 3rd party api to do the mail sending e.g. mailgun or something similiar.
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.
Take a look at this example, it shows different ways to add headers github.com/vercel/examples/blob/main/edge-functions/add-header/pages/_middleware.ts Hope this helps!
@@dhaniabelega7159 Ok! I haven't tried to change the headers so can't say for sure, but maybe test adding the header you want to change. Would that replace the existing one 🤔
Depends on your setup, but at least it should help because the request doesn't have to go all the way to the server but it can fetch the data at the edge (assuming your db is accessible through api for example). Other thing that it could help with, as I understood it, is that it can cache the results. So for example if you request a page with certain language, on the first request it will fetch the text in that specific language from the db and save it to cache and next requests will serve the cached version of the site.
Makes sense and all, but makes it seem like we can just use edge functions for everything. Would definitely have to be selective in what we use I imagine. Important note from the docs: vercel.com/docs/concepts/functions/edge-functions "The maximum duration for an Edge Function execution is 30 seconds, but the function needs to return a response in less than 1.5 seconds, otherwise the request will time out."
Hilarious that this is the video that I decided to watch and you referenced my tweet lmao! Nice job!
Haha what a coincidence! Thanks!
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.
Thanks, great to hear!
Thank you for this tutorial.
Seeing this in practice is - in my opinion - more intuitive than all that fancy stuff in the documentation.
Cheers!
Great video! We need more content like this. Keep it up
Thanks!
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!
Haha! Cheers 🙌
Thanks learnt very useful info from this video Tuomo. The Edge joke was too funny 😂.
But yet I personally love using it 😉
Thanks! Glad you liked it!
Thank you for this tutorial! This helped me understand much better than any documentation or google searches. 👍
Thanks for letting me know, that’s great to hear!
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
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
Haha, great to hear! 😅
Please make a complete app in Next.js with all the updated functionality. Thank you.
Good idea, thanks!
That would be a great idea. I would also love to see some full projects
amazing tutorial. Straight to the point and easy to follow
Great to hear!
😂😂😂😂 Love the Edge humor, Great video thank you earned a subscriber
Cheers! :)
10:54 "I know this is a bit ugly, but ... hey sue me" 😂
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!
Glad it was helpful!
I cracked in the edge joke XD thanks a lot for this video, helpful!
Another great video! Thanks a lot for sharing
Thank you Daniel!
Thank you for your explanations much clearer with a well explained situation. Really good job 👍
Thank you that’s great to hear!
Thanks for clarifying this man, much appreciated.
Cheers!
Great video, I agree with the other comments you explain this topic topic better than the NEXT.is docs. Thanks
Thanks great to hear!
That's a really good explanation. Keep up the good work Tuomo! What theme do you use btw?
Thanks Joseph, great to hear! It's the Aura theme, here is a video I made about it: czcams.com/video/6C26mVeDjxo/video.html
Thank you for the video. I want to learn next
Cheers!
your video its de exactly what i was looking for! thx!
Cheers!
cool cool! thanks for the video
Cheers!
Great explanation. Thanks for the video.
Cheers!
@@TuomoKankaanpaa I also mentioned your video on the one I just recorded ;)
czcams.com/video/RaaSmWPmjM0/video.html
@@SamFromaway Thanks man!
Excellent demo, Thanks.
Cheers!
Thanks for explanation.
Cheers!
On production I can't clear multiple cookies like
NextResponse.clearCookie('access_token').clearCookie('access_token')
It's only clear first cookie is 'access_token' not both
But it's work perfectly on local dev. How can I solve that? :(
i lauged hard with the edge joke!!!
Well done and thanks - well explained.
Thanks, glad you liked it!
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.
I'd say that you don't need to deploy to vercel in order to use middleware, but where ever you want to deploy needs to support middleware and edge functions. Not sure about firebase, but at least Netlify seems to support middleware www.netlify.com/blog/2021/10/27/use-next.js-12-on-netlify/ About the edge, Netlify seems to have edge handlers in beta www.netlify.com/products/edge/edge-handlers/
Appreciate the view mate
Cheers!
thank you, it is very helpful
Cheers!
_middleware edge function don't work in dev server? You need to deploy it to Vercel?
The _middleware should work with dev server too
What if we need to get the req.body.
Hey Great video! Hmm.. I was just wondering if you're located at Helsinki, the closest vercel's datacenter is located at Stockholm?. When you deployed your app to vercel - didnt you choose its default location to be at Stockholm's dc? So in conclusion - It seems to me that there isn't much benefit for users in Finland when the backend lambdas are deployed to stockholm anyway.
Greetings from Estonia.
Hey Kris and thanks for your comment! I'm not actually sure if the closest datacenter is in Stockholm, but if it is, then yeah for users from Finland that might not have a big effect. But since we don't know where users are going to open up your app, then in that case the edge functions are good option.
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
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 🙏
That's a good question! I would say that it won't run in the browser since the middleware is run before the page plus middleware can have logic like authentication handling.
@@TuomoKankaanpaa thanks for your reply, that's interesting, that means after the App is hydrated it still makes a call to the server for every new page that is displayed in SPA mode...
Thank you. You helped me a lot.
Great to hear!
Amazing video!
Does it mean that no backend needed at all for a single web app? I am a new starter, and would like to learn how to develop an e-commerce app. Trying to find the best option, and this seems to be the most suitable.
Thank you! Basically the api & edge functions are run on backend but you don’t need to worry about setting the backend up because next.js and vercel handle that automagically. Next.js is great for an ecommerce app!
@@TuomoKankaanpaa do you reckon if it is possible to send over a verification link to email without node.js?
With api routes it should be possible and with edge functions I’d say if it is not possible directly, you could always use some 3rd party api to do the mail sending e.g. mailgun or something similiar.
Whats the theme? I love it!
Great Video. Next.js 12 is so awesome!
Thanks! It's Aura Dark marketplace.visualstudio.com/items?itemName=DaltonMenezes.aura-theme
Thank you!
Cheers!
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.
Take a look at this example, it shows different ways to add headers github.com/vercel/examples/blob/main/edge-functions/add-header/pages/_middleware.ts Hope this helps!
@@TuomoKankaanpaa Thanks. I'd looked at that earlier. Those examples only add response headers
@@dhaniabelega7159 Ok! I haven't tried to change the headers so can't say for sure, but maybe test adding the header you want to change. Would that replace the existing one 🤔
Love your accent bro.
Thanks!
But how does the edge help if I have the data in a db anyway?
Depends on your setup, but at least it should help because the request doesn't have to go all the way to the server but it can fetch the data at the edge (assuming your db is accessible through api for example). Other thing that it could help with, as I understood it, is that it can cache the results. So for example if you request a page with certain language, on the first request it will fetch the text in that specific language from the db and save it to cache and next requests will serve the cached version of the site.
Your VScode theme?
Aura dark :)
Video sponsor Microsoft Explorer,
Wait Edge 😂
😂
I can't understand middlewares at all damn
I have more videos coming up about middleware, hopefully those will help. Stay tuned!
Makes sense and all, but makes it seem like we can just use edge functions for everything. Would definitely have to be selective in what we use I imagine. Important note from the docs: vercel.com/docs/concepts/functions/edge-functions
"The maximum duration for an Edge Function execution is 30 seconds, but the function needs to return a response in less than 1.5 seconds, otherwise the request will time out."