Hi, my latest course is out now (Professional React & Next.js): bytegrad.com/courses/professional-react-nextjs -- I'm very proud of this course, my best work! I'm also a brand ambassador for Kinde (paid sponsorship). 👉 Check out Kinde for authentication and more bit.ly/3QOe1Bh
half way through and have to admit, it is one of the best nextjs course. maybe it due to the fact I have previous small knowledge of it but this guy right here clear up all the doubts in just 2 hrs.. never forgetting server action and server components from now on haha
For the first time i really have a sense of how things fit in from start to finish. Still saving to enroll to your course. Thanks for all you do, ByteGrad. Much Love!
This was an amazing tutorial to follow. Clear and concise explanations without handwaving. Explaining everything, including things that are out of scope for this project but need to be in a more advanced settings. I hope this channel grows and we get more amazing videos like this one. Also, if you'd put your Next.js and React course on Udemy, I would've bought it in an instant
This is just a great tutorial for a next.js beginner or intermediate developer. You are explaining in simple terms the most important concepts while also giving examples on how to achieve certain things in a more efficient or cleaner way. Thanks for this!
have completely watched this tut.100% recommended..........kindly post more videos like this.....we want you as our sole teacher to become an expert in NEXT JS. thanks
awesome, just awesome. I went through the documentation and a few articles but it did not really click for me and I found this video which has just detailed everything. Greate job done
Congratulations on being probably the most concise NextJs Teacher on youTube. I have used the framework multiple times and you just revealed to me some more efficient way of doing things. I have a request: Could you do a video on using Stripe webhooks, or webhooks generally in NextJS? In my case I have an application where a data commit to the database is what is purchased by the user (an event listing). The problem is that the data is committed to the database before the user completes checkout in the Stripe session. I need a webhook to determine that the transaction has finalized and then only at that point make the POST request for their listing. Could you please make a short video on this????
there is a 'container' class in tailwind so you don't have to create a separate container component and give max width to it. container class automatically does this
Hi ByteGrad, this is an amazing tutorial. I'm wondering if the video announced at 1:58:56 - how to deal with local and production databases - is already out? Do you have any reference material about safe transition between production and development, and vice versa? Thank you in advance.
Another great video from you Byte. Thank you. I have a quick question. Let's say you have 2 different DB to hit up in prisma, with 2 different schema how would you do it in your db.ts ?
I followed this tutorial step by step but I have a problem with Kinde. I'm not sure why I get a Invalid URL 500 error when trying to access a route that is hosted by Kinde. This also happens if I follow the docs from Kinde. I already tried twice to set it up and also watched your other Auth tutorial but nothing is working. Is there a hidden setting in Kinde dashboard? Did I miss anything?
Apparently the problem was with the organisation that I created (I don't know what was the actual problem). Creating a new organisation in the Kinde dashboard and re-connecting Kinde to my existing next project made everything work
UPDATE 2: I've tried the middleware thing and was surprised that it didn't work, failing with the exact same error as before. Once I was tired of trying everything possible to make it work I wanted to see if the old solution with const { isAuthenticated } = getKindeServerSession(); works. Was very surprised to see that even this one was not working, again. I guess I'm done with Kinde
I received the same error(500, malformed URLs) - my organization was default, never added one. Played around with Kinde docs and their dashboard, then got 404s. Ended up just using NextAuth.
In NextJS 15 you would have to await the params to get the id (\src\app\posts\[id]\page.tsx): export default async function Page({params}:{params: Promise}) { const post = await prisma.post.findUnique({ where:{ id: parseInt((await params).id), } });
Thaks for this tutorial. It is really helpful. What is the procedure if we want to show the user information beside every post? Should we save the user information in our local db? What is the procedure for that?
Can you please make a video for single sign on, like centralised authentication website using next-auth, without any workos or any paid library for multiple saas website
can anyone please post the code for formData validation in actions function using zod? I tried create a schema, parsing the formdata but I get error: Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
thanks, can you please make the next project on "video streaming with S3, cloudfront and nextjs" also with uploading/retrieving videos from API and show them on front end with optimisation, etc like simple youtube app
i love your videos Bytegrad but , you always use prisma orm , Why not drizzle orm ? And please make one Complete Nextjs ( new features + secuirty + seo + don't do this mistake in nextjs while doing this )video with Drizzleorm and postgres and also with Admin Dashboard.. please
as much as i was enjoying this video, i had to stop watching it because kinde wouldn't work for me. At first it sort of did in that it would redirect me to a login page but i couldn't login using github. So i tried email and password and it errors out every time i try to click create post. I didn't change anything in my code at all so i changed it back to github and it is still doing the same thing. Not a good first impression of kinde.
@@ByteGrad so i tried it again and it worked in that i could get to the login page but can't log in or register. just get an authorization error or something saying that i could only do this once. Tried re-doing everything over again and it just gives me a 500 error when i click create-post. Don't really get what i'm doing wrong on my end...
I had the same problem. It looks like there has been a change in NextJS and that part of the video and the Kinde docs are out of date. The redirect url must be an absolute path. So "/create-post" won't work. It must now be "localhost:3000/create-post".
Hi, my latest course is out now (Professional React & Next.js): bytegrad.com/courses/professional-react-nextjs -- I'm very proud of this course, my best work!
I'm also a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for authentication and more bit.ly/3QOe1Bh
My salary for last month will definitely go for this course once I get paid. I am convinced beyond doubt that this is all I needed to break into tech.
@@bennetukoh3506 Oga small small oo, salary ke
half way through and have to admit, it is one of the best nextjs course. maybe it due to the fact I have previous small knowledge of it but this guy right here clear up all the doubts in just 2 hrs.. never forgetting server action and server components from now on haha
For the first time i really have a sense of how things fit in from start to finish. Still saving to enroll to your course. Thanks for all you do, ByteGrad. Much Love!
This was an amazing tutorial to follow. Clear and concise explanations without handwaving. Explaining everything, including things that are out of scope for this project but need to be in a more advanced settings. I hope this channel grows and we get more amazing videos like this one.
Also, if you'd put your Next.js and React course on Udemy, I would've bought it in an instant
Vast amount of knowledge in much lesser time. Thanks and hoping for more of this type of videos.
If you want to master nextjs fundamentals, Bytegrad is the best tutor. You will learn it within a month. Big up Byte💪
This is just a great tutorial for a next.js beginner or intermediate developer.
You are explaining in simple terms the most important concepts while also giving examples on how to achieve certain things in a more efficient or cleaner way.
Thanks for this!
have completely watched this tut.100% recommended..........kindly post more videos like this.....we want you as our sole teacher to become an expert in NEXT JS. thanks
I am from Indonesia, and i love all off your video, thank you so much 👍🏻 my dream is to be the best developer like you😅
Saya juga dari Indonesia.. video2 Bytegrad emang the best lah
You will bro keep learning.
❤ from Sri Lanka
awesome, just awesome. I went through the documentation and a few articles but it did not really click for me and I found this video which has just detailed everything. Greate job done
Thank you for this course. Everything is very clear. I had a hard time understanding server actions but now with simple examples everything is better.
This video was so clear and focused it really gave me a lot of confidence to dive into Next JS. Much thanks 👊🏻
Congratulations on being probably the most concise NextJs Teacher on youTube. I have used the framework multiple times and you just revealed to me some more efficient way of doing things. I have a request: Could you do a video on using Stripe webhooks, or webhooks generally in NextJS? In my case I have an application where a data commit to the database is what is purchased by the user (an event listing). The problem is that the data is committed to the database before the user completes checkout in the Stripe session. I need a webhook to determine that the transaction has finalized and then only at that point make the POST request for their listing. Could you please make a short video on this????
Thanks for all your quallity content :)
I like how interesting your material is, a hug and keep it up!
Great tutorial! Thank you... You have a talent for teaching. Keep up the great work!
Just started to learn Next and this came up. Appreciate it!
u are literally incredible
you help me a lot with this video man. thank you. the best 2h learning next.js. it's just excellent💯
Thanks, Wesley! another great video.
Finally my doubts regarding server components and server actions are cleared.
Thank you ❤️
there is a 'container' class in tailwind so you don't have to create a separate container component and give max width to it. container class automatically does this
Really good tutorial, thank you
Great tutorial, thank you!
Awesome work :)
thank you man, this really helped me
great tutorial
Hi ByteGrad, this is an amazing tutorial. I'm wondering if the video announced at 1:58:56 - how to deal with local and production databases - is already out? Do you have any reference material about safe transition between production and development, and vice versa? Thank you in advance.
Gracias , estos proyectos con Next estan entretenidos
I really, really enjoy your teaching style. Thank you very much. Why can't I see an option to donate a cup of coffee to you?
awesome video!
This is amazing !!!! When will you make a react 19 tutorial ??
Can you please make a video of role based application, how does that work? Like admin have access to more things then users.
Thanks
thank you
You are the best 💖💖. Who agrees he's the best tutor? -> 👍
THANK YOU!
Another great video from you Byte. Thank you. I have a quick question. Let's say you have 2 different DB to hit up in prisma, with 2 different schema how would you do it in your db.ts ?
I followed this tutorial step by step but I have a problem with Kinde.
I'm not sure why I get a Invalid URL 500 error when trying to access a route that is hosted by Kinde.
This also happens if I follow the docs from Kinde.
I already tried twice to set it up and also watched your other Auth tutorial but nothing is working.
Is there a hidden setting in Kinde dashboard? Did I miss anything?
Apparently the problem was with the organisation that I created (I don't know what was the actual problem).
Creating a new organisation in the Kinde dashboard and re-connecting Kinde to my existing next project made everything work
UPDATE 2:
I've tried the middleware thing and was surprised that it didn't work, failing with the exact same error as before.
Once I was tired of trying everything possible to make it work I wanted to see if the old solution with const { isAuthenticated } = getKindeServerSession(); works.
Was very surprised to see that even this one was not working, again.
I guess I'm done with Kinde
I received the same error(500, malformed URLs) - my organization was default, never added one. Played around with Kinde docs and their dashboard, then got 404s. Ended up just using NextAuth.
It works when I changed the "create-post" to "localhost:3000/create-post"
For me, I just had to clear my old Kinde cookies and then it finally worked
Thanks!!!
In NextJS 15 you would have to await the params to get the id (\src\app\posts\[id]\page.tsx):
export default async function Page({params}:{params: Promise}) {
const post = await prisma.post.findUnique({
where:{
id: parseInt((await params).id),
}
});
Can we fetch with intervel inside server component ?
Thaks for this tutorial. It is really helpful. What is the procedure if we want to show the user information beside every post? Should we save the user information in our local db? What is the procedure for that?
can you do a video on using server action with next-safe-action? Also was wondering how to fetch data using react-query with RSC.
Thanks. Drizzle > Prisma?
Can you please make a video for single sign on, like centralised authentication website using next-auth, without any workos or any paid library for multiple saas website
I am getting this error while setting up the middleware
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
Its because of LogoutLink try importing from other component it will work or remove and try once
@@DepTenzey thanks
@@_AshishMohanty hope it works!.. you can create new file in component and move those form along LogoutLink and make use client...
@@DepTenzey yeah I have figured it out
can anyone please post the code for formData validation in actions function using zod? I tried create a schema, parsing the formdata but I get error:
Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
I'm receiving a 500 error when making a request to Kinde. How can I resolve this?
It worked for me when I changed the logic to the middleware.
i like it
where is a part of App router
thanks, can you please make the next project on "video streaming with S3, cloudfront and nextjs" also with uploading/retrieving videos from API and show them on front end with optimisation, etc like simple youtube app
i love your videos Bytegrad but , you always use prisma orm , Why not drizzle orm ? And please make one Complete Nextjs ( new features + secuirty + seo + don't do this mistake in nextjs while doing this )video with Drizzleorm and postgres and also with Admin Dashboard.. please
Dear Wesley could you please tell me how to get in touch with you for collaboration.
wow.
i want fundamentals of next js
wow
01:23:23
kinde vs lucia ....your views
Wesley your English sounds so Dutch… but I see on your website that you are from Poland? 🇳🇱💔
as much as i was enjoying this video, i had to stop watching it because kinde wouldn't work for me. At first it sort of did in that it would redirect me to a login page but i couldn't login using github. So i tried email and password and it errors out every time i try to click create post. I didn't change anything in my code at all so i changed it back to github and it is still doing the same thing. Not a good first impression of kinde.
Hi, please double-check the import statements are correct for Kinde, I find auto-complete can give very subtle wrong suggestions
@@ByteGrad so i tried it again and it worked in that i could get to the login page but can't log in or register. just get an authorization error or something saying that i could only do this once. Tried re-doing everything over again and it just gives me a 500 error when i click create-post. Don't really get what i'm doing wrong on my end...
Sir aap Hindi me pathao
th-cam.com/video/R-Epbgmy5ac/w-d-xo.html&ab_channel=CodeStepByStep
hi @byteGrad stuck at kinde auth at - 1:20:44 followed all the steps but gets HTTP ERROR 500 can please help
I had the same problem. It looks like there has been a change in NextJS and that part of the video and the Kinde docs are out of date. The redirect url must be an absolute path. So "/create-post" won't work. It must now be "localhost:3000/create-post".
Good videos! How can I connect with you, ByteGrad?
Hi, thanks! Email me at support@bytegrad.com