@@DaveGrayTeachesCode I spoke too soon. I’m trying a POST request from the client and the server recognizes it as options so never executes the post method, do you have a video on this?
I don't now how to thank you for this video. I live in a very poor place and I would never have enought money to pay a class with the content of your channel. Thaank you
I fundamentally don’t get this middleware approach. I’ve seen dozens of examples and they all do the same things: apply ONE middleware. But this isn’t how middleware works. It’s typically a stack. The API routes need CORS. The authorised routes need auth middleware. Language detection. How you would handle this in this pattern is a complete mystery to me.
in production, my PUT requests don't work if the origin is not the local site. It never gets past OPTIONS in the middleware. So a public PUT API endpoint isn't working for me. Have you been able to get that to work for you?
@@DaveGrayTeachesCode Thanks for the response. I'm using 13.2.4 and it's still not working. I've added this to NextResponse: return NextResponse.json({ messages: updatedMessages }, { status: 200, headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'OPTIONS, PUT', 'Access-Control-Allow-Headers': 'Content-Type, Authorization', } }) It isn't working for me. It's very depressing lol I'm probably going to have to rebuild everything in pages/api. I built a ton of stuff using route handlers in development and everything worked with postman. But in production it's not working for me
@@TJMcCarty I haven't played around with it too much but did you get this working? I am trying to POST to an api endpoint I created and I am also ecountering the OPTIONS issue in the middleware.
Great video, you explained everything extremely good! But I don't see why anyone would want to limit their APIs globally nad not User specific? How could I use the RateLimiter but only Limit on IP, so that when a user used all his request he must wait and other users (with different IPs) can still access the API?
you made mention of the RateLimiter having a dependency that is would not work in the edge Runtime. How do I know the dependencies that wont work on the Edge Runtime. Wish I can get a little more context on the Edge Runtime as well
10 месяцев назад
Could You make a tutorial about image uploading using a pre-signed URL to Digital Ocean Spaces? It involves "fighting" "No 'Access-Control-Allow-Origin' header is present on the requested resource" problem on PUT request.
Sounds like you are facing a CORS issue. That must be set server side. Here's a quick explainer: ruclips.net/user/shorts1iOeoRCUD4M
10 месяцев назад
All I can set on serverside is Origin(mine is *) methods(all enabled), allowed headers(mine *) and time (mine 3600)@@DaveGrayTeachesCode After fighting 2 days on this problem and trying out about 50 different solutions from everywhere - I know what CORS is and that the server is not responding with the required header on PUT requests though preflight has it. All points are on DO side and there's not much I can configure there. I am wondering if some 100k people should face the same problem. I also have next.js config for API path which I don't understand well, but allows all domains.
10 месяцев назад
Maybe You can try - tell if You succeed.
10 месяцев назад
ok. I overcame that cors problem, now this in the presigned url SignatureDoesNotMatch tx00000e5a133325dcf2020-00655de893-471ab797-ams3c 471ab797-ams3c-ams3-zg03 Access keys are correct and rechecked and I also regenerated them, because someone told that that worked for him. Tried both fetch and axios for REST, even deleted Authorisation from PUT request. I also synced time, and changed timezones - nothing helps. @@DaveGrayTeachesCode
I appreciate a lot this lesson. A perfect explanation of waht is a middleware, this concept I can apply to every language as every architecture. Very good the explanation about cors how to manage the error with a new NextResponse. Thank you Dave!!
Hi Dave I have a doubt. you have written ratelimiting logic in hello/route.ts instead of middleware.ts which doesn't denonstrate use of midleware.ts. Is it the right way to do it? or should it be written in middleware.ts
Loving ur way of explaining. Can u please elaborate if its bad practice (efficiency wise) to use fetch (instead of DB /SQL calls) within API routes coz this way you are using double server side requests PLUS another DB call which the fetch makes internally! Thx
It just depends on where you are getting data from. If you are getting data from another API, you will likely fetch the data. If you are getting data from a database, you probably won't use fetch.
Thanks for the great info, super helpful. For the RateLimiter are the tokensPerInterval shared between all requests or are they per user (or device)? Looking around docs and haven't found the answer yet. I'm assuming it's the former.
Hello dave sir, it would be great if you could make just one video for ssr in nextjs stable version with rtk query and typescript, just the setup and cocepts because i just could not find any documentation or anything, (also next-redux-wrapper)
i have try limiter and deployed in vercel. and this limiter count is global, not specif by ip address. i try limiter for /api/hello and i hit the endpoint in diferent network. my mobile data and wifi. but the count is not isolated by ip address. first hit in laptop remain counter is 2, then i hit in mobile, the remain counter is 1. sorry my english bad. i hope you understand. and how i can limited the request for diferent ip address?
Great Video Dave ! Is it also possible to use npm cors dependencie in Next-Js if we prefer to deal with it in case of we want more than same-origin only (which is already integrated in Next) ?
In this video I show how to set up your API to support more than same origin. The current cors package that was designed for node and Express does not work with the new route handlers to the best of my knowledge. This video shows you how to accomplish the same without it.
Good day Dave. For some reason, these regexp and conditionals work perfect in development but misbehave in production. Have you ever encountered any similar situations?
Good question! Answer: no, but things change quickly. I believe I highlighted the beta docs having a TODO under middleware. See if the docs have now updated?
@@DaveGrayTeachesCode Already working on it. I've escaped tutorial hell for a while, recently I do this just to relax or search for help. I am trying to use Next to make a showcase project for potential customs or jobs. when finished I will show you.
Stumbled into this channel 2 days ago! It's ridiculous the amount of stuff I have learned already. What a great teacher.
Awesome content Dave! Carry on these videos and please focus on the real world as much as you can.💯
Will do!
Thank you Dave I was afraid of App router but thanks to you I understand it and understand the Docs better
That's what I call high-quality content! Thank you.
Thanks, Dave! I'm basically a master in React but am just getting acquainted with Next 13 and this was super helpful. Many thanks! New subscriber :)
Thank you for all of your videos. Your kind and detailed explanations make it really easy for me to understand the topics well.
You're welcome!
Needed to migrate from express to next. Was completely lost with my cors errors, u saved me a lot more hours of headaches thank you
Great to hear!
@@DaveGrayTeachesCode I spoke too soon. I’m trying a POST request from the client and the server recognizes it as options so never executes the post method, do you have a video on this?
ngl this video took an unexpected turn (meant in a GOOD way). This was very informative and I learned a ton. Thanks, Dave!
I don't now how to thank you for this video. I live in a very poor place and I would never have enought money to pay a class with the content of your channel. Thaank you
Great content! Exactly what I needed to know about how to apply cors without a library 👍
Thank you!
i still can't believe that you put these tutorials for free, thanks a lot ❤
This helped me to understand better CORS in NextJS. Thanks!
Glad it helped!
The only solution that worked, i were so happy when i saw the console log from the middleware!!! Thank you so much!
I fundamentally don’t get this middleware approach. I’ve seen dozens of examples and they all do the same things: apply ONE middleware. But this isn’t how middleware works. It’s typically a stack. The API routes need CORS. The authorised routes need auth middleware. Language detection.
How you would handle this in this pattern is a complete mystery to me.
Hello and welcome sir ❤️ i m from non cs background working as a full stack dev bcoz of dave sir ❤️...!
Glad to hear that!
Thanks,like always amazing content.
Please do session on Auth front and back with Next
I want to do this. I think after this fundamentals series.
in production, my PUT requests don't work if the origin is not the local site. It never gets past OPTIONS in the middleware. So a public PUT API endpoint isn't working for me. Have you been able to get that to work for you?
There are some bugs depending on the version you have installed. If you are using 13.3, go back to 13.2.4 and see if this issue persists.
@@DaveGrayTeachesCode Thanks for the response. I'm using 13.2.4 and it's still not working. I've added this to NextResponse:
return NextResponse.json({ messages: updatedMessages }, {
status: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS, PUT',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
} })
It isn't working for me. It's very depressing lol I'm probably going to have to rebuild everything in pages/api. I built a ton of stuff using route handlers in development and everything worked with postman. But in production it's not working for me
@@TJMcCarty I haven't played around with it too much but did you get this working? I am trying to POST to an api endpoint I created and I am also ecountering the OPTIONS issue in the middleware.
@@tomnewton3191 This video fixed my issues: ruclips.net/video/yRJd_tlHu9I/видео.html
Hello and welcome... Thank you
Amazing! Thank you man!
Great video, you explained everything extremely good! But I don't see why anyone would want to limit their APIs globally nad not User specific? How could I use the RateLimiter but only Limit on IP, so that when a user used all his request he must wait and other users (with different IPs) can still access the API?
Other npm packages for rate limiting support what you want.
@@DaveGrayTeachesCode Thanks, you are right, rate-limiter-flexible for example is perfect for my usecase
thanks a lot for this tutorial Dave!
Great video, you are a good teacher!
Thank you!
you made mention of the RateLimiter having a dependency that is would not work in the edge Runtime. How do I know the dependencies that wont work on the Edge Runtime. Wish I can get a little more context on the Edge Runtime as well
Could You make a tutorial about image uploading using a pre-signed URL to Digital Ocean Spaces? It involves "fighting" "No 'Access-Control-Allow-Origin' header is present on the requested resource" problem on PUT request.
Sounds like you are facing a CORS issue. That must be set server side. Here's a quick explainer: ruclips.net/user/shorts1iOeoRCUD4M
All I can set on serverside is Origin(mine is *) methods(all enabled), allowed headers(mine *) and time (mine 3600)@@DaveGrayTeachesCode
After fighting 2 days on this problem and trying out about 50 different solutions from everywhere - I know what CORS is and that the server is not responding with the required header on PUT requests though preflight has it. All points are on DO side and there's not much I can configure there. I am wondering if some 100k people should face the same problem.
I also have next.js config for API path which I don't understand well, but allows all domains.
Maybe You can try - tell if You succeed.
ok. I overcame that cors problem, now this in the presigned url
SignatureDoesNotMatch
tx00000e5a133325dcf2020-00655de893-471ab797-ams3c
471ab797-ams3c-ams3-zg03
Access keys are correct and rechecked and I also regenerated them, because someone told that that worked for him. Tried both fetch and axios for REST, even deleted Authorisation from PUT request. I also synced time, and changed timezones - nothing helps.
@@DaveGrayTeachesCode
I appreciate a lot this lesson. A perfect explanation of waht is a middleware, this concept I can apply to every language as every architecture. Very good the explanation about cors how to manage the error with a new NextResponse. Thank you Dave!!
You're welcome!
Thx for the limiter feature! Super good :)
Glad you like it!
Hi Dave I have a doubt. you have written ratelimiting logic in hello/route.ts instead of middleware.ts which doesn't denonstrate use of midleware.ts. Is it the right way to do it? or should it be written in middleware.ts
hi i try your code but the origin in middleware return nothing. It's normal ? I try also when my app is deploy on my domain but return alway nothing
Kudos Dave! Great NextJS series. Do you have any plans to cover parallel routes and intercepting routes?.
Thank you! Good question - not sure if I want to include those in the beginners series but I will cover them at some point.
Loving ur way of explaining. Can u please elaborate if its bad practice (efficiency wise) to use fetch (instead of DB /SQL calls) within API routes coz this way you are using double server side requests PLUS another DB call which the fetch makes internally!
Thx
It just depends on where you are getting data from. If you are getting data from another API, you will likely fetch the data. If you are getting data from a database, you probably won't use fetch.
Your courses are awesome. It would be so nice to see React native course on this channel)
Thank you! Yes, that will happen in the future. 🚀
Thanks for the great info, super helpful. For the RateLimiter are the tokensPerInterval shared between all requests or are they per user (or device)? Looking around docs and haven't found the answer yet. I'm assuming it's the former.
In this example, if I remember right, they are all shared. There is are other npm packages that will track per individual.
how can i setup two middlewares for two different paths ?
Great Work Sir we very thankful to you .....
You're welcome!
Hello, my next js version is 13.0.5. There is no src folder. Where should I add my middleware file?
at the same level of the app file
C'était top, merci pour l'actu ! 👌
You're welcome!
Hello dave sir, it would be great if you could make just one video for ssr in nextjs stable version with rtk query and typescript, just the setup and cocepts because i just could not find any documentation or anything, (also next-redux-wrapper)
Not going backwards as Next.js is moving forward quickly. These beta features will be the stable version soon.
i have try limiter and deployed in vercel. and this limiter count is global, not specif by ip address.
i try limiter for /api/hello
and i hit the endpoint in diferent network. my mobile data and wifi. but the count is not isolated by ip address.
first hit in laptop remain counter is 2, then i hit in mobile, the remain counter is 1.
sorry my english bad. i hope you understand. and how i can limited the request for diferent ip address?
You can try this package instead: www.npmjs.com/package/express-rate-limit ...it does limit requests based on IP.
Great Video Dave ! Is it also possible to use npm cors dependencie in Next-Js if we prefer to deal with it in case of we want more than same-origin only (which is already integrated in Next) ?
In this video I show how to set up your API to support more than same origin. The current cors package that was designed for node and Express does not work with the new route handlers to the best of my knowledge. This video shows you how to accomplish the same without it.
Good day Dave. For some reason, these regexp and conditionals work perfect in development but misbehave in production. Have you ever encountered any similar situations?
Good question! Answer: no, but things change quickly. I believe I highlighted the beta docs having a TODO under middleware. See if the docs have now updated?
have you the idea to apply RTK to Next? in server and client components?
Keep great work up. 🥳 . How you are getting so great and fast auto completion in VS Code ?
It could be the ES7 React Snippets extension.
Does this solution for cors still work. Just I'm still having the blocked by cors policy
Responding properly to an options request will always fix CORS
@@DaveGrayTeachesCode so should the code in the video still work in a current Nextjs app?
I've spend hours and hours trying to fix this. I'll go through the video again if this is a solution
I will watch it later, came here just to like it
Thank you!
There isn't nothing about CSRF in all Nextjs Documentation, I'd like to know how nextjs protect against csrf attack
Big Thanks ❤
You're welcome!
Has NextJS become another programming language?
No, it is a React framework.
Thank You Dave
Welcome!
Thanks sir ❤
Most welcome
Wonerful tutorial !!!😃😃😃
Sir please create next-auth full tutorial ❤
Sir, When do we get video on next Auth including role based protected route?
Sometime after this fundamentals series.
When will versiom 13 be more popular than version 12? Is it worth studying version 12 right now?
When they take most features out of beta. I would only learn 12 if your job gives you a project with it.
How can I build anything good without Dave?
Thank you, but you must. Building your own projects is part of the journey. 🚀
@@DaveGrayTeachesCode Already working on it.
I've escaped tutorial hell for a while, recently I do this just to relax or search for help.
I am trying to use Next to make a showcase project for potential customs or jobs. when finished I will show you.
Hello how to manage multiple middleware?
I showed how to apply more than one = multiple. You could add more.
Thanks again!
You're welcome!
coding bootcamps hate him
very usefull tutorial thankyou
Welcome!
How to use cors from npm?
Cors from npm is for Node/Express apps. I show how to do the exact same thing without needing that package. Watch the video.
there is no middleware file in your github
Yes, there is. Open the lesson 9 folder. Then open the src folder. Ta-da! 😃
it doesn't seem practical at all to create APIs with Next, It needs to type too much basic stuff like headers. I hope they change it eventually.
Another awesome video Dave. Please please please follow up with some Next-Auth :)
I plan to cover auth sometime after this fundamentals series.
@@DaveGrayTeachesCode 🤓❤️