Build a Next.js Project and deploy with Vercel, Neon, Drizzle, TailwindCSS, FlowBite and more!
HTML-код
- Опубликовано: 29 июн 2024
- ⭐️ 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
Next.js might be what I use for all web apps going forward. It's a great tool and I hope you enjoy it.
The code, chapters and links are in the description and this comment. Thank you you for watching.👇👇
💽 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
if you want components, shadcn ui is excellent. There's also clerk for auth. Then you can focus on what matters, the PROJECT stuff :D
would you think to drop django and replace it with nextjs?
Can we get a Django x Next.js video? Production-grade. Something along the lines of the recipe app you made previously.
I like it! Anyone else? Upvote the comment👆
Yes, please! Django x Next.js video with Production-grade would be amazing!!! Thanks in advance ;D
Yes please I want it too ,am a JavaScript and Python developer and this will be awesome
Yes! Also, if you could add a full drf + next jwt auth that includes password reset/forgot password + google oauth2, that would be great!
@@CodingEntrepreneurs Please, I was searching for such projects in RUclips, couldn't find anything relevant
Thanks for all the time you put into this.
This is just awesome, thank you!
Amazing sir, thank you for sharing....
I thought you would continue on Django but this is really a surprise. Good to see this since I learnt Django, this is great since I wanted to learn frontend and this is just in time.
Thanks Alot
Thank you. I really like and appreciate your content.
Thank you
Good stuff ! Keep it up !
I chose Sveltekit, but both frameworks are amazing.
good to see harry mack teaching next.js
Just give me 3 words
@@CodingEntrepreneurs hahaha
You are impressive .. really .. 🙏💪
Please it will be greatly appreciated if you could use django rest framework for the back end, next js for frontend and next auth for authentication. Connecting these three has been a major problem for me especially with social authentication. Thank you @CodingEntrepreneurs .
Thank you.
You are the best 👍
Thank you!
@CodingEntrepreneurs What did you do to turn on those logs in terminal, whenever you do API call? for example: -POST /api/visits/ 201 in 210ms (CACHE: MISS)?
I think it would be extremely helpful.
Is it NextJS thing / NEON or your own?
I am still with DRF and will check this one out once done with the APIs.
DRF is still such a juggernaut! I think I might need to do Next.js x DRF in the near future because it's possible!
13 days completed thanks again for sharing.
Please more next.js and Drizzle ORM videos
Cool. Any project suggestions? What do you want to see?
@@CodingEntrepreneurs SAAS project using both next.js and drizzle
Great video! Wouldn’t NextAuth securely handle all of that user authorisation in a more concise way?
I don’t think NextAuth supports App Router yet.
If I'm not wrong you can probably use ` }`... If it doesn't work, probably we need to implement some `renderImage`... in this case, open an issue, please. :)
Oh yeah I’ll have to try that. I didn’t want to spend too much time on flowbite-react which is why I opted for the method I used.
What’s more, I think it was the first time we discussed the Image feature of next.js.
@@CodingEntrepreneurs sure thing. If you notice any issue with flowbite-react, please don't forget to report the issue. :)
How do we add Google analytics in app route
great
Please make a course of Fastapi Strawberry Graphql. There is no quality content on this topic. 😌
Just curious, why Drizzle and not Prizma? I have no preference just wondering about the thought process when chosen..
Drizzle feels a lot more approachable if you ask me. Both are solid though
maybe fastapi or django4 rest with celery? ;)
environment variables don't work for me, anyone faced or facing the same issue? so confusing 😩
It works
🎈 What are your thoughts on NextJS in comparison with Django ?
The React integration with Next.js is unmatched. It makes development much faster. All the caching is great too.
Django has built-in sessions, user auth, and the admin. Those things are incredibly important.
They can work together though!
@@CodingEntrepreneurs how about the request thing which we get out of the box in Django, like user sessions and all ? I'm really looking forward to fully dive-in to NextJS.
What do you use for your screen and camera capture?
Camtasia!
I am a beginner should I use django or node?
Do you know Python or JavaScript? If Python, start with Django. If JavaScript, Node.js then Next.js as soon as you can.
If you know have either, I found Python to be easier to learn due to it's syntax based in spacing vs braces.
This is the way.
you didnt touch about migrations, kinda dissappointing
I like it, thank you
*I found chatGPT really helps out 😊👍*
ChatGPT doesn’t do well with cutting edge yet; it’s suck on Page Router among many other things!
But also, yeah it does really help.