- 415
- 6 897 686
ByteGrad
Netherlands
Registrace 6. 07. 2021
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
My COMPLETE React & Next.js course is out now! Find it here: bytegrad.com/courses/professional-react-nextjs
It's the #1 resource to master the latest React & Next.js. I'm very proud of it, my best work!
Interested in sponsoring me? I love working with sponsors. Please email me here: support@bytegrad.com
My COMPLETE React & Next.js course is out now! Find it here: bytegrad.com/courses/professional-react-nextjs
It's the #1 resource to master the latest React & Next.js. I'm very proud of it, my best work!
Interested in sponsoring me? I love working with sponsors. Please email me here: support@bytegrad.com
Your first full-stack Next.js project (Server Components, Server Actions, Suspense&Streaming, Kinde)
IMPORTANT: create the Kinde account here: bit.ly/3QOe1Bh (paid sponsorship).
Final code: github.com/ByteGrad/nextjs-first-project-final
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs
👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript
👉 Professional CSS Course: bytegrad.com/courses/professional-css
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord
👉 Kinde: check out Kinde for auth and more bit.ly/3QOe1Bh
⏱️ Timestamps:
00:00 Intro
02:59 Setup
04:31 Fresh Next.js app lookaround
08:57 Routing
10:25 Global styling with Tailwind CSS
12:58 Basic page content & styling
15:26 Header & Footer
18:37 Image component in Next.js
22:09 Nav with routes
23:22 Link component in Next.js
24:06 Finish header
25:30 Finish footer
27:40 Container
30:21 Metadata
31:12 Active nav link styling
32:11 Server components vs Client components
36:14 Data fetching
40:39 Next.js architecture overview
42:08 Dynamic routes (post id)
46:14 Params (for data fetching)
47:49 Suspense & Streaming (loading.tsx)
50:58 Suspense component (more granular)
54:31 Upvote (Client component example)
58:49 Next.js client-side features (hooks, events, state)
01:00:45 Create post page
01:04:36 Server action
01:13:37 Authentication to protect route (Kinde)
01:21:08 Middleware auth (Kinde)
01:23:14 Logout button
01:25:59 Finish create post page
01:30:04 Database & ORM in Next.js architecture
01:30:50 Prisma & SQLite setup
01:37:47 Add data to database
01:38:38 Getting data from database
01:41:10 Not found page
01:42:44 Caching & Revalidating (revalidatePath)
01:48:56 Auth for server actions (Kinde)
01:51:30 Static & Dynamic rendering
01:54:36 Deploy to Vercel pt. 1 (Push to GitHub)
01:56:15 Deploy to Vercel pt. 2
01:58:32 Vercel Postgres database
02:03:49 Kinde Auth for production
#webdevelopment #reactjs #nextjs
Final code: github.com/ByteGrad/nextjs-first-project-final
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs
👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript
👉 Professional CSS Course: bytegrad.com/courses/professional-css
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord
👉 Kinde: check out Kinde for auth and more bit.ly/3QOe1Bh
⏱️ Timestamps:
00:00 Intro
02:59 Setup
04:31 Fresh Next.js app lookaround
08:57 Routing
10:25 Global styling with Tailwind CSS
12:58 Basic page content & styling
15:26 Header & Footer
18:37 Image component in Next.js
22:09 Nav with routes
23:22 Link component in Next.js
24:06 Finish header
25:30 Finish footer
27:40 Container
30:21 Metadata
31:12 Active nav link styling
32:11 Server components vs Client components
36:14 Data fetching
40:39 Next.js architecture overview
42:08 Dynamic routes (post id)
46:14 Params (for data fetching)
47:49 Suspense & Streaming (loading.tsx)
50:58 Suspense component (more granular)
54:31 Upvote (Client component example)
58:49 Next.js client-side features (hooks, events, state)
01:00:45 Create post page
01:04:36 Server action
01:13:37 Authentication to protect route (Kinde)
01:21:08 Middleware auth (Kinde)
01:23:14 Logout button
01:25:59 Finish create post page
01:30:04 Database & ORM in Next.js architecture
01:30:50 Prisma & SQLite setup
01:37:47 Add data to database
01:38:38 Getting data from database
01:41:10 Not found page
01:42:44 Caching & Revalidating (revalidatePath)
01:48:56 Auth for server actions (Kinde)
01:51:30 Static & Dynamic rendering
01:54:36 Deploy to Vercel pt. 1 (Push to GitHub)
01:56:15 Deploy to Vercel pt. 2
01:58:32 Vercel Postgres database
02:03:49 Kinde Auth for production
#webdevelopment #reactjs #nextjs
zhlédnutí: 5 988
Video
GPTScript - The first AI-programming language worth using?
zhlédnutí 4,4KPřed 12 hodinami
Run a gptscript example yourself: bit.ly/4dIPbfJ (paid sponsorship). Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Check out Kinde for auth and more bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: bytegrad.com/courses/prof...
Next.js Authentication - Avoid these 4 mistakes (Don't do auth in layout!)
zhlédnutí 14KPřed dnem
Add auth to your Next.js app quickly: bit.ly/3QOe1Bh (paid sponsorship). Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Check out Kinde for auth and more bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: bytegrad.com/courses/...
The BEST Next.js setup: Next.js + Postgres + Docker (Dev / Prod)
zhlédnutí 14KPřed 14 dny
Get Docker Desktop here: dockr.ly/4dkjx8a (paid sponsorship). Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Check out Kinde for auth and more bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: bytegrad.com/courses/professiona...
Before writing code, do this: System Design (Startups, SaaS) - Eraser AI
zhlédnutí 18KPřed 14 dny
System design with AI here: www.eraser.io/ (paid sponsorship). Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Check out Kinde for auth and more bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: bytegrad.com/courses/profession...
All 29 Next.js Mistakes Beginners Make
zhlédnutí 41KPřed 21 dnem
Check out Semaphor for analytics here: semaphor.cloud/home (paid sponsorship). Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Check out Kinde for auth and more bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: bytegrad.com/co...
Next.js Image - Never struggle again (+ ImageKit)
zhlédnutí 16KPřed měsícem
👉 Signup for ImageKit’s forever free plan: bit.ly/49zmXkt 👉 Know more about ImageKit: bit.ly/3VXRK7u Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Check out Kinde for auth and more bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS C...
The BEST way to host Next.js websites
zhlédnutí 20KPřed měsícem
Check out Hostinger's VPS at hostinger.com/bytegrad with discount code BYTEGRAD Full transparency: I get a commission if you buy something from Hostinger through that link. Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Check out Kinde for auth: bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: byt...
Authorization is easy now (Microservices, Next.js, Cerbos)
zhlédnutí 9KPřed měsícem
👉 Cerbos (open source!) & Cerbos Hub: bit.ly/49tC8vD 👉 Full code: github.com/ByteGrad/cerbos-nextjs-example 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: bytegrad.com/courses/professional-css 👉 Web development roadmap 2024 & 2025: email.bytegrad.com 👉 Email ne...
Dockerize Minecraft & Host on Dedicated Server (EASY!)
zhlédnutí 2,1KPřed měsícem
#Hivelocity #DedicatedServers #InstantServers #ad #collaboration Get 50% off your first month of Instant Servers at hivelocityinc.net/49NR5ZG. Use code ‘BYTEGRAD50’ at checkout. Full transparency: I get a commission if you buy anything through that link. Learn more about Hivelocity’s Dedicated Servers: hivelocityinc.net/49SIRj1 Explore Hivelocity’s Dedicated Servers: hivelocityinc.net/49NR5ZG H...
Dockerize Next.js & Deploy to VPS (EASY!)
zhlédnutí 38KPřed měsícem
#Hivelocity #VPS #VPShosting #ad #collaboration Get one month of VPS FREE at hivelocityinc.net/3SfVjnB. Use code BYTEGRAD1 at checkout. Learn more about Hivelocity’s VPS: hivelocityinc.net/3s3OcUF Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Add auth to your app FAST: bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professi...
Next.js with a separate server - good idea?
zhlédnutí 45KPřed měsícem
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Add auth to your Next.js app FAST: bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: bytegrad.com/courses/professional-css 👉 Web development roadmap 2024 & 2025: email.bytegrad.c...
Web Scraping with GPT-4 Vision AI + Puppeteer is Mind-Blowingly EASY!
zhlédnutí 21KPřed měsícem
👉 Thanks to video sponsor Bright Data! Get $10 free credit: brdta.com/bytegrad1 Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship): bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: bytegrad.com/courses/professional-css 👉 Web develo...
Add Auth & Protect Routes in React in 3 Minutes (Kinde)
zhlédnutí 12KPřed 2 měsíci
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Add auth to your React app fast: bit.ly/3QOe1Bh 👉 Full code: github.com/ByteGrad/kinde-react-example 👉 Check out Kinde for auth and more bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS C...
Web Developer Roadmap (2024) - Everything is Changing
zhlédnutí 246KPřed 2 měsíci
👉 Video sponsor AppMySite: www.appmysite.com/?ref=internal&tap_s=4677127-d20b5e Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship): bit.ly/3QOe1Bh 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript ...
Add Auth & Protect Routes in Next.js in 2 Minutes
zhlédnutí 14KPřed 3 měsíci
Add Auth & Protect Routes in Next.js in 2 Minutes
Custom Hooks in React - Every React Developer Should Know This
zhlédnutí 33KPřed 3 měsíci
Custom Hooks in React - Every React Developer Should Know This
Why I don't use React-Query and tRPC in Next.js
zhlédnutí 67KPřed 3 měsíci
Why I don't use React-Query and tRPC in Next.js
React / Next.js Image Uploads (EASY!) - CDN, WebP / AVIF, Signed Uploads, Webhooks, Uploadcare
zhlédnutí 9KPřed 3 měsíci
React / Next.js Image Uploads (EASY!) - CDN, WebP / AVIF, Signed Uploads, Webhooks, Uploadcare
React Data Grid / Table - Top 3 Enterprise UI-Components - #1 (Syncfusion)
zhlédnutí 3,4KPřed 3 měsíci
React Data Grid / Table - Top 3 Enterprise UI-Components - #1 (Syncfusion)
React Charts - Top 3 Enterprise UI-Components - #2 (Syncfusion)
zhlédnutí 2,8KPřed 3 měsíci
React Charts - Top 3 Enterprise UI-Components - #2 (Syncfusion)
React Scheduler / Calendar - Top 3 Enterprise UI-Components - #3 (Syncfusion)
zhlédnutí 11KPřed 3 měsíci
React Scheduler / Calendar - Top 3 Enterprise UI-Components - #3 (Syncfusion)
Next.js 14 Authentication (Kinde Auth, Server Actions, Roles & Permissions)
zhlédnutí 35KPřed 5 měsíci
Next.js 14 Authentication (Kinde Auth, Server Actions, Roles & Permissions)
Why use Microservices, Docker & Kubernetes?
zhlédnutí 17KPřed 6 měsíci
Why use Microservices, Docker & Kubernetes?
AI-tool for code snippets: My Impression
zhlédnutí 10KPřed 6 měsíci
AI-tool for code snippets: My Impression
NextJS Tutorial - All 12 Concepts You Need to Know
zhlédnutí 218KPřed 6 měsíci
NextJS Tutorial - All 12 Concepts You Need to Know
Deploy your Next.js app to a VPS (EASY!)
zhlédnutí 27KPřed 6 měsíci
Deploy your Next.js app to a VPS (EASY!)
This React Text Editor is Amazing! (Image Upload, Markdown, Code Mirror, WYSIWYG, Next.js, Froala)
zhlédnutí 30KPřed 7 měsíci
This React Text Editor is Amazing! (Image Upload, Markdown, Code Mirror, WYSIWYG, Next.js, Froala)
How to Upload Images in React / Next.js (File Uploads, Filestack)
zhlédnutí 14KPřed 7 měsíci
How to Upload Images in React / Next.js (File Uploads, Filestack)
Zod Tutorial - All 10 places for Zod in your React / Next.js app
zhlédnutí 72KPřed 7 měsíci
Zod Tutorial - All 10 places for Zod in your React / Next.js app
its nice that it caches but i dont like that you cant control it. I have RQ update the cache after doing Put or Delete calls to my product cart so the front end doesnt need to re-get the cart. I dont see how next would use the result of the PUT call to store for future GET calls?
thanks. can i ask you what vscode theme you use?
thanks
good explanation, thank you! everything is clear
Great Course.
This is amazing !!!! When will you make a react 19 tutorial ??
kinde vs lucia ....your views
Hi, your video is wonderful but you always only create form with server actions not update/edit the form with server actions if i need to use useState for edit then why we need server actions we simply use fetch call if not need then how to initial value show plz make also video on this? And if we have array of inputs like cosnt [bankDetails,setBankDetails]=useState([{bankName:'',accountName:''},{bankName:'',accountName:''}]); const handleChange=(e,i)=>{ const {name,value}=e.target; const updatedValue=bankDetails; updatedValue[i][name]=value; setBankDetails(updatedValue); } return( {bankDetails.map((bank,i)=>(<div key={i}> <input type="text" name="bankName" value={bank.bankName} onChange={(e)=>handleChange(e,i)}/> <input type=""text" name="accountName" value={bank.accountName} onChange={handleChange}/> </div> )}) but how we handle in server actions because if i have 2 initial create bank details but when i submit its give me only last values please explain also this
Just started to learn Next and this came up. Appreciate it!
01:23:23
My goal is to make mobile apps is there any full course to this roadmap. Ive been away from JavaScript since 2016 but i still can get around with many stuff. Where can i start?
You are perfect I would say
So many questions i had got now answered. From Finland thank you sir!
Hey, great video! Do you know how can we add sitemap.xml/robots.txt to the blog posts? Also, is it possible to update the sitemap when using on-demand revalidation when adding/updating a blog post, so everything stays in sync? Thanks!
Thanks!!!
another good one!
What would you do as a 40+ year old, or suggest to a 40+ years old without prior professional experience in coding/programming/dev: 1. webdev: HTML, CSS, JS, REACT, NEXTJS, FIGMA? 2. (big)data: PYTHON, SQL, PowerBI? 3. Web3/Blockchain dev: PYTHON, SOLIDITY 4. none of above, and stick to current job, no matter whatever it is, becaue ${reasons (age, ...)}!
With all the AI tools (Gemini, ChatGPT, Copilot, ...) and the low-code tools to drag-and-drop a website or an app together the current generation is growing up with, in a couple of years companies will be begging for candidates able to write 5 lines of code that makes sense and works. OR Current situation will get worse, AI and low-code will take over the main industry, while a very small pool of programming engineers will be needed to do actual software engineering. Resulting in a situation that coding, programming won't be a good choice for your professional life. What do you think?
Good job
As usual, nothing to say, very clear & great content ! ❤ ( btw what is your vscode theme? )
Finally my doubts regarding server components and server actions are cleared. Thank you ❤️
Only about half hour into the video, but already learning a lot. Thank you so much for making this
wow.
Great video! Thank you for the examples and different use cases
Dear Wesley could you please tell me how to get in touch with you for collaboration.
THANK YOU!
I like how interesting your material is, a hug and keep it up!
Sir aap Hindi me pathao
czcams.com/video/R-Epbgmy5ac/video.html&ab_channel=CodeStepByStep
thanks, can you please make the next project on "video streaming with S3, cloudfront and nextjs" also with uploading/retrieving videos from API and show them on front end with optimisation, etc like simple youtube app
I am from Indonesia, and i love all off your video, thank you so much 👍🏻 my dream is to be the best developer like you😅
Saya juga dari Indonesia.. video2 Bytegrad emang the best lah
You will bro keep learning. ❤ from Sri Lanka
First
Hi Sir. thanks for your video. when it comes to Authentication and Payments, taking Next-Auth and Stripe as the example, do they work without the support of backend? i mean if i can implement authentication and payment just using them without implementing java/spring based application server?
thank you sooooo sooooo much, I was confused for the 'use client' for weeks and you explained in a clearly and easy way to understand!
Hey ByteGrad, I recently bought your NextJS course and it is great! I am currently working through the PetSoft project and I am at the point where we are using Shadcn/ui for components. I was wondering how you stay up to date on new technology in the space like shadcn? Thanks.
Awesome, enjoy! Mostly CZcams actually!
the best explanation ever! thank you!
I simply love it, thanks for this great content🎉
Thanks teacher. Which snippets did you use to autocomplete?
Awesome. Hi from Azerbaijan
Thank you for explaining this well, i have banged my head on JS error handling for so long
What an awesome video, I've been in tech and web dev for 30 for years and this was a brilliant state of the union snapshot. Thanks for the video!!
Industry standards will always remain ridiculous, for my personal project I went with React + MobX, Firebase and a couple custom UI kits with vanilla CSS (utilizing flexgrid, etc). That's all you need to create a sleek lightweight SPA with users and backend.
You're a savage!! Thanks so much. Every sentence is valuable. On top of learning what I need to do, I pick up so many tips in how you write you code that I advance as a developer.
Tabs it is
what if we try await setCount(count + 1) in a async function
Can we access the state inside a child server component, if we do the same with redux (instead of context)?
I'm just around half way there in the video & feeling like I have watched hours long tutorial. Highly appreciate the content! Highly appreciate your efforts & knowledge! Bundle of thanks!
Solution 3 worked for me. But it wasn't because of a third-party component but related to an API fetch combined with a third-party Nextjs framework like Makeswift and their "ReactRuntime.registerComponent." Thanks!
Regarding the first cause, the reason this happens is because block-level elements, such as <h1>, <div>, and so forth, are blocks with defined "space" (even if the space is 0 px by 0 px) and cannot be placed inside an inline element (an HTML element with no defined space). This is akin to placing an object inside a void. :)
Change the title to Mistakes devs make. I’m not a beginner and you made some great points!