Become a Next.js 15 Pro
Next.js is the leading framework for building powerful apps for the web, but with great power comes great responsibility the need to fully understand how those APIs can help you solve whatever problem you're set up to tackle.
This course walks you through everything you need to build a full stack Next.js 15 and React 19 app complete with authentication, database management, transactional emails, payments, and everything inbetween.
What You'll Learn
- 💻 Build a full stack app with Next.js 15 and React 19
- 💅 Design responsive UI components with Tailwind CSS and shadcn/ui
- 💾 Manage databases with Xata and Drizzle ORM
- 💼 Use server actions for form submissions and managing data
- 🔐 Add authentication with Clerk including social login, MFA, & Passkeys
- 👮 Implement user and organization-based access control
- 💵 Process payments using Stripe Checkout
- ✉️ Create email templates with React
- 📬 Send transactional emails with Resend
- 🚀 Deploy a production-ready Next.js application to Vercel
Get started building your next full stack app!
Full Chapter Breakdown
0:00:00 - Intro
What to expect from the course!
0:01:19 - Create a new Next.js 15 App
Bootstrap a new Next.js app using Create Next App.
0:04:20 - Creating a Dashboard with Tailwind and shadcn/ui
Use Tailwind CSS and shadcn/ui to create a dashboard that will be used for displaying invoice data.
0:25:00 - Adding a new Create Invoice Form
Create a new custom form for adding new invoices.
0:34:15 - Installing & Configuring Xata & Drizzle ORM
Set up a new Xata account and configure Drizzle ORM to manage queries and relationships.
0:42:28 - Creating Table Schemas for Invoice Data
Adding your first database table by writing schemas with Drizzle ORM.
0:49:07 - Generating & Running Migrations with Drizzle Kit
Using Drizzle Kit to generate migrations for the database schemas and push them to Xata.
0:55:26 - Adding new Invoices with Server Actions
Create new invoices using React 19 Server Actions.
1:05:07 - Progressively Enhanced Forms in React 19 & Next.js 15
Allow forms to work both with and without JavaScript, while enhancing the experience when JavaScript is enabled, using React 19 features and Next.js 15 Form component.
1:20:11 - List Invoices in a Data Table
Query for all invoices to display in a table on the dashboard.
1:28:19 - Dynamic Page Routes for Invoices
Configure dynamic routes to set up a new page for each invoice.
1:38:24 - Catching & Handling Errors
Detect when an invoice doesn't exist or when an invoice ID is invalid and handle the errors gracefully.
1:43:11 - Adding Social Login with Clerk
Add user login with Google oAuth using Clerk.
1:47:18 - Protecting Routes with Clerk Middleware
Lock down the app to that only authenticated users can access private pages using Middleware.
1:52:04 - Creating a Page Layout with Site Header & Footer
Finish off the layout design to add a header and footer which will include the sitewide navigation and user controls.
2:03:46 - Building Login & Signup Pages
Add your own login and signup pages to avoid having to send people off-site to a Clerk subdomain to log in.
2:07:46 - Custom Login Page with Clerk Elements
Fully customize a login page and user flow using Clerk Elements.
2:13:51 - Configuring MFA (Multi-Factor Authentication)
Require users to both enter a password and enter a one time password.
2:21:07 - Setting Up Passwordless Auth with Passkeys
Give an alternative, passwordless option for login using Passkeys.
2:24:33 - Securing Server Actions with Clerk
Make sure only authenticated users can trigger server action requests.
2:27:44 - Add New User ID Column to Invoices
Start to add relationships with invoice data to associate each invoice with an actual user.
2:31:02 - Restricting Invoice Access by User
Only allow users to see the invoices they created.
2:35:21 - Update Invoice Status
Allow users to update the status of an invoice manually whether open, paid, or something else.
2:54:10 - Optimistic UI Updates in React 19
Enhance the UI responsiveness by optimistically updating the invoice status upon change.
3:03:27 - Deleting Invoices
Add the option to delete an invoice.
3:08:15 - Add Confirmation Modal for Deletion
Prevent accidental deletions and require a confirmation modal to delete an invoice with shadcn/ui.
3:15:29 - Creating Table Relationships for Customer Details
Store a customer's email and name in relation to an invoice in a separate table.
3:22:11 - Joining Multiple Tables for Customer Data
Query for both invoices and customer relationship from separate tables.
3:26:40 - Creating & Managing Organizations
Setting up and configuring new organizations.
3:31:39 - Add New Organization ID Column to Invoices
Add data relationship with Organization ID for querying by organization.
3:34:40 - Restricting Access by Organization
Only permit users in an org to see organization-level data.
3:41:02 - Install & Configure Stripe
Set up a Stripe account and the Stripe SDK in a Next.js app.
3:43:58 - Adding a Public Payment Page
Creatin a new page that will serve as the place people can make payments for invoices.
3:56:29 - Creating Payment Sessions with Stripe Checkout
Set up a new session to allow clients to make payments using Stripe Checkout.
4:04:36 - Payment State with URL Parameters & Stripe Sessions
Determine the state of a payment by URL and by looking up a Stripe session.
4:17:02 - Creating Email Templates with React
Design and create email templates using React Email.
4:25:30 - Sending Transactional Emails with Resend
Automatically send an email whenever an invoice is created using Resend.
4:30:22 - Deploy Next.js to Vercel
Deploy and publish your new invoice app to the world with Vercel!
4:33:51 - Outro
What are the next steps?