Your first full-stack Next.js project (Server Components, Server Actions, Suspense, Kinde)
Вставка
- Опубліковано 6 лип 2024
- IMPORTANT: create the Kinde account here: bit.ly/3QOe1Bh (paid sponsorship).
Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Final code: github.com/ByteGrad/nextjs-fi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord
👉 Kinde: check out Kinde for auth and more bit.ly/3QOe1Bh
⏱️ Timestamps:
00:00 Intro
02:59 Setup
04:31 Fresh Next.js app lookaround
08:57 Routing
10:25 Global styling with Tailwind CSS
12:58 Basic page content & styling
15:26 Header & Footer
18:37 Image component in Next.js
22:09 Nav with routes
23:22 Link component in Next.js
24:06 Finish header
25:30 Finish footer
27:40 Container
30:21 Metadata
31:12 Active nav link styling
32:11 Server components vs Client components
36:14 Data fetching
40:39 Next.js architecture overview
42:08 Dynamic routes (post id)
46:14 Params (for data fetching)
47:49 Suspense & Streaming (loading.tsx)
50:58 Suspense component (more granular)
54:31 Upvote (Client component example)
58:49 Next.js client-side features (hooks, events, state)
01:00:45 Create post page
01:04:36 Server action
01:13:37 Authentication to protect route (Kinde)
01:21:08 Middleware auth (Kinde)
01:23:14 Logout button
01:25:59 Finish create post page
01:30:04 Database & ORM in Next.js architecture
01:30:50 Prisma & SQLite setup
01:37:47 Add data to database
01:38:38 Getting data from database
01:41:10 Not found page
01:42:44 Caching & Revalidating (revalidatePath)
01:48:56 Auth for server actions (Kinde)
01:51:30 Static & Dynamic rendering
01:54:36 Deploy to Vercel pt. 1 (Push to GitHub)
01:56:15 Deploy to Vercel pt. 2
01:58:32 Vercel Postgres database
02:03:49 Kinde Auth for production
#webdevelopment #reactjs #nextjs
![ОРБАН приехал к ПУТИНУ и "отчитался" о поездке в Киев 😁 [Пародия]](http://i.ytimg.com/vi/_0ukDovOWq8/mqdefault.jpg)
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.
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
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
If you want to master nextjs fundamentals, Bytegrad is the best tutor. You will learn it within a month. Big up Byte💪
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.
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!
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
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!
Just started to learn Next and this came up. Appreciate it!
Thanks for all your quallity content :)
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
This video was so clear and focused it really gave me a lot of confidence to dive into Next JS. Much thanks 👊🏻
Finally my doubts regarding server components and server actions are cleared.
Thank you ❤️
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!
Great tutorial, thank you!
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.
This is amazing !!!! When will you make a react 19 tutorial ??
Awesome work :)
awesome video!
THANK YOU!
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
thank you
Thanks!!!
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 ?
You are the best 💖💖. Who agrees he's the best tutor? -> 👍
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 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.
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.
Can we fetch with intervel inside server component ?
Why do we need to write "use server", for server actions specifically, although I understood it was the default behavior ?
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
i like it
Dear Wesley could you please tell me how to get in touch with you for collaboration.
wow.
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.
where is a part of App router
wow
i want fundamentals of next js
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
kinde vs lucia ....your views
01:23:23
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
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...
First
Sir aap Hindi me pathao
ua-cam.com/video/R-Epbgmy5ac/v-deo.html&ab_channel=CodeStepByStep
Good videos! How can I connect with you, ByteGrad?
Hi, thanks! Email me at support@bytegrad.com
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".