Create your own Next.js Starter Template

In this video CJ shows how to set up a Next.js starter template from scratch. He also showcases the Next.js ecosystem of libraries, CLI tools, existing starter templates and toolkits.

Next.js CLIs, Starter Kits, Templates, Toolkits and Wrappers | https://gist.github.com/w3cj/4fa5180fec37ececf0fceec0e3fcc8ab

View the code here | https://github.com/w3cj/next-start

00:00 Intro
01:36 Existing Solutions
02:22 Next.js CLI Generators
04:53 Starter Kits and Boilerplates
05:38 SaaS Starters
06:52 Paid SaaS Templates
07:47 Toolkits / Wrappers
09:28 Lets build!
10:08 Code Style / Editor Settings
10:30 Generate next.js app
11:14 prettier setup
12:19 Enabling eslint rules
15:15 VS Code Format / Lint on Save
16:26 prettier sort imports
20:54 prettier tailwind plugin
22:12 format script
22:41 eslint kebab-case rule
23:31 bulletproof-react
24:31 eslint-plugin-check-file kebab-case setup
26:27 bulletproof-react Project Structure Rules
27:15 remove unused imports
27:49 tailwind support in css files
28:20 Project typescript version
28:56 Next.js Typed Routes
29:28 VS Code Tab Name Settings
30:01 Clear out extra code
31:01 Set custom favicon
31:33 base setup branch
31:58 What is tailwind?
33:12 Tailwind Component Libraries
33:36 shadcn/ui
35:09 NextUI
36:58 Headless UI
37:52 Flowbite / DaisyUI
38:12 Component Library RSC Compatibility
39:08 Set Up NextUI
42:30 App Navbar Component
45:27 NextUI Routing Setup
48:05 Tabler Icons
49:04 Dark Theme / Light Theme Toggle
51:26 create useSystemTheme hook
53:33 Theme Switch
56:24 next-themes suppressHydrationWarning
57:46 App Layout
01:00:58 Generate background image
01:03:59 Not Found Page
01:05:58 Typesafe env Setup
01:11:41 process.env Linter Rule
01:13:43 Next.js Authentication Options
01:15:37 Next Auth Set Up
01:17:07 Set Up Google Auth Provider
01:18:00 Create Google OAuth Client ID
01:19:58 update kebab-case linter rule to allow dynamic routes
01:20:40 auth button / sign in / sign out
01:27:38 Profile page
01:28:37 setup next-auth environment variables
01:29:59 Profile page user card
01:31:05 authorization redirects
01:32:27 Session aware navbar
01:33:29 Next Auth Middleware
01:35:29 Layout Suspense Boundary
01:36:40 Loading page
01:38:14 Database Libraries
01:40:25 drizzle set up
01:43:11 docker postgres set up
01:47:04 drizzle configuration
01:48:02 Defining drizzle schema
01:54:20 drizzle kit config
01:58:08 drizzle migration set up
02:03:41 next-auth drizzle adapter set up
02:06:52 next-auth middleware issue
02:10:53 Next.js Server Action Libraries
02:13:10 Building a Simple Guestbook
02:16:39 drizzle-zod
02:20:36 Add user id to next-auth Session
02:28:36 Defining table relations with drizzle
02:33:27 Consolidating migrations during development
02:34:10 Create sample env
02:34:32 Thanks!