👉 Let Posthog know ByteGrad sent you in signup :) LINK: https://posthog.com/bytegrad (sponsored)
👉 Kinde authentication: https://bit.ly/3QOe1Bh (sponsored)
👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs

FINAL CODE: https://github.com/ByteGrad/nextjs-saas

IMPORTANT: This tutorial is meant to be an introduction to Next.js & SaaS. There may be additional (security) considerations that need to be taken into account when deploying a production application. We discuss some of these in the video itself, but there is also a more complete React & Next.js course here: https://bytegrad.com/courses/professional-react-nextjs

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

⏱️ Timestamps:
00:00 Demo
01:32 PostHog
02:00 Full-stack Next.js
07:16 Project setup
12:56 Routing & Folder structure
21:30 Home page content + styling
28:49 Dashboard content + styling
41:19 App header
55:21 Account page content + styling
57:31 Important
58:03 CRUD for expenses (starting)
01:00:51 Add database with Prisma
01:08:51 Get data in server component
01:15:19 Update data in server actions
01:24:28 revalidatePath
01:33:32 PostHog for analytics
01:52:16 Authentication
02:25:18 Payments
02:52:45 Webhooks
03:10:06 Change buttons
03:24:03 Utility function for auth & membership check
03:36:47 Production
04:01:25 Final check
04:06:29 PostHog (dev vs prod)
04:07:07 Outro

#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 and KRS-number: 0001125554 .
.
TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)

ByteGrad

Learn to build a full-stack Next.js SaaS application from scratch. The tutorial covers the creation of a landing page, a private dashboard for tracking expenses, user authentication, integration with Stripe for payments, and adding analytics using Posthog. Key Next.js concepts such as server components, routing, and database interaction are also explained.

Build A Next.js SaaS From Scratch (Step-By-Step)

<p>Is it a good idea for beginners to code alongide these tutorials? do you really learn how to do it?</p>


<p>ByteGrad is one of better channels about web development and Next/React. If you follow this guy on what he explains, you will get far.</p>
