⭐️ Sign up for Neon right now! neon.tech/cfe
Deploy a FULL Next.js Web App Project complete with:
✅ React.js frontend and server-side rendering ➡️ Next.js is a React.js framework that handles front-end and backend
✅ Vercel for Deployment ➡️ modern and easy deployments direct from GitHub/Bitbucket
✅ Neon is Modern Serverless PostgreSQL ➡️ a fast Vercel-ready Edge-ready database with sub 40ms queries!
✅ Edge functions for speed/performance ➡️ Server-side components that are fast and serverless!
✅ DrizzleORM for handling SQL with JavaScript ➡️ Writing SQL can be tricky; Drizzle makes it easier
✅ URL Shortening ➡️ A practical way to share and track links (this is what we build)
✅ Tailwind CSS & Flowbite for the User Interface ➡️ Easily one of the best ways to style frontends
✅ Users and sessions with custom built login, password hashing, registration, encrypted JWT sessions and more.
💽 Code: github.com/codingforentrepren...
🕹️Gists: gists.github.com/codingforent...
Tutorial created in collaboration with neon.tech. Sign up now for modern cutting-edge serverless Postgres. Pay only for what you use baby!
🚀 Enroll. Learn to code. Launch your project: cfe.sh/enroll 🚀
Chapters
0:00:00 Welcome
0:02:16 Walkthrough
0:10:00 Requirements
0:15:30 Start a Nextjs App
0:20:11 URL Routing in Nextjs
0:26:01 Handling API Routes and HTTP Methods
0:29:50 Dynamic URL Routes
0:36:09 Fetch data via Nextjs
0:43:36 Handling Fetch Errors in Nextjs
0:49:24 Pushing to Github with Git
0:57:21 Your First Next.js Deploy to Vercel
1:03:19 Environment Variables for Vercel Domains
1:12:13 Fetch and Caching in Server Components
1:19:09 Render React Client Component in Server Component
1:25:02 Client Side Fetching with swr
1:29:59 HTML Forms and Post Data Requests
1:40:45 Handling POST Data in a Next.js Route
1:45:33 Validate Submitted URL For Shortening
1:49:52 Hello World from Neon Serverless
2:00:02 Edge Functions for Neon Database Connection
2:05:11 Create a SQL Table in the Neon Console
2:12:17 Your First Drizzle Table Schema
2:17:17 Create SQL from JavaScript with Drizzle
2:25:20 Create Data with Drizzle and Neon
2:29:24 Get Lists of Data with Drizzle and Neon
2:37:58 Refreshing Table Data as a Client Component
2:42:48 Refreshing Table based on Form Event
2:46:37 Storing Random Short Strings
2:49:57 Short Value DB Lookup
2:55:17 Customize the Next.js 404 Page
2:58:08 Redirect to the Destination URL
3:01:28 Ensure Unique URLs with a SQL Index
3:05:46 Handling Database-level Errors with Unique Values
3:12:45 Visits Tracking Related Table
3:19:20 Track and Store Visits
3:27:41 Database Lookups with Related Data
3:35:34 Encrypted JWT for Session Data
3:47:23 Using Cookies with Encoded JWTs
3:55:15 Adding the Users Table
4:04:46 Password Field & Hashing Functions
4:14:29 Register & Login Pages
4:20:30 Register and Save New Users in the Database
4:33:55 Login Users and Set User Session
4:43:14 List User-only Data
4:45:29 Logout Users
4:50:53 Fixing Node.js Crypto Issues for Vercel Deployment
5:00:00 Flowbite Integration & Form Alerts
5:11:32 Improved UI with Flowbite-React
5:40:12 Custom Domain Name on Vercel
5:45:26 Thank you and next steps
1 авг 2024
