Create your own Next.js Starter Template

Video Description

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! Next.js Docs | https://nextjs.org/docs/ prettier-plugin-sort-imports | https://github.com/trivago/prettier-plugin-sort-imports/ Automatic Class Sorting with Prettier | https://tailwindcss.com/blog/automatic-class-sorting-with-prettier Next.js FAQ - Module Not Found | https://nextjs-faq.com/module-not-found-due-to-case-sensitivity Bulletproof-react | https://github.com/alan2207/bulletproof-react VS Code Editor Labels | https://x.com/nextjs/status/1783508313113800930 Emoji as Favicon | https://css-tricks.com/emoji-as-a-favicon/ shadcn/ui | https://ui.shadcn.com/ NextUI | https://nextui.org/ Headless UI | https://headlessui.com/ Flowbite React | https://flowbite-react.com/ react-daisyUI | https://react.daisyui.com/ Tabler Icons | https://tabler.io/icons @tabler/icons-react | https://tabler.io/docs/icons/react next-themes | https://github.com/pacocoursey/next-themes fffuel Generators / Tools | https://www.fffuel.co/ mmmotif image generator | https://www.fffuel.co/mmmotif/ nextui branch | https://github.com/w3cj/next-start/tree/nextui t3 env | https://env.t3.gg/docs/nextjs next-auth | https://next-auth.js.org/ next-auth middleware | https://next-auth.js.org/configuration/nextjs#middleware drizzle orm | https://orm.drizzle.team/ drizzle kit | https://orm.drizzle.team/kit-docs/overview Docker crash course for developers | https://www.youtube.com/watch?v=RHjXPN_h1YA docker hub postgres | https://hub.docker.com/_/postgres/ next-auth middleware issue | https://next-auth.js.org/configuration/nextjs#caveats auth.js drizzle adapter | https://authjs.dev/getting-started/adapters/drizzle next-auth session callback | https://next-auth.js.org/configuration/callbacks#session-callback next-safe-action | https://next-safe-action.dev/ conform | https://conform.guide/integration/nextjs drizzle defining relations | https://orm.drizzle.team/docs/rqb#declaring-relations ------------------------------------------------------------------------------ Hit us up on Socials! https://www.syntax.fm/links Brought to you by Sentry - Use code "tastytreats" to get 2 months free - https://sentry.io/syntax #nextjs #tailwindcss #react