Your first full-stack Next.js project (Server Components, Server Actions, Suspense, Kinde)

Video Description

IMPORTANT: create the Kinde account here: https://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: https://bytegrad.com/courses/professional-react-nextjs Final code: https://github.com/ByteGrad/nextjs-first-project-final Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Check out Kinde for auth and more https://bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: https://bytegrad.com/courses/professional-css 👉 Web development roadmap 2024 & 2025: https://email.bytegrad.com 👉 Email newsletter (BIG update soon): https://email.bytegrad.com 👉 Discord: all my courses have a private Discord 👉 Kinde: check out Kinde for auth and more https://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 Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code. This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 . . TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)