- 414
- 6 811 395
ByteGrad
Netherlands
Приєднався 6 лип 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
Next.js Authentication - Avoid these 4 mistakes (Don't do auth in layout!)
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 kinde.com
👉 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 where I actively participate
👉 Kinde: check out Kinde for auth and more kinde.com
⏱️ Timestamps:
00:00 Intro
01:00 Add auth quickly
03:15 Don't do auth in layout
05:50 Page vs Middleware for auth
08:01 Middleware benefit 1: better structure
09:01 Middleware benefit 2: static rendering
13:19 BIG RISK: Showing user info app-wide (e.g. header)
15:40 Middleware benefit 3: better performance
18:16 IMPORTANT: Auth check in Middleware or Page is not enough!
21:27 Auth for server actions
25:17 Summary: robust authentication in Next.js
#webdevelopment #reactjs #nextjs
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more kinde.com
👉 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 where I actively participate
👉 Kinde: check out Kinde for auth and more kinde.com
⏱️ Timestamps:
00:00 Intro
01:00 Add auth quickly
03:15 Don't do auth in layout
05:50 Page vs Middleware for auth
08:01 Middleware benefit 1: better structure
09:01 Middleware benefit 2: static rendering
13:19 BIG RISK: Showing user info app-wide (e.g. header)
15:40 Middleware benefit 3: better performance
18:16 IMPORTANT: Auth check in Middleware or Page is not enough!
21:27 Auth for server actions
25:17 Summary: robust authentication in Next.js
#webdevelopment #reactjs #nextjs
Переглядів: 11 868
Відео
The BEST Next.js setup: Next.js + Postgres + Docker (Dev / Prod)
Переглядів 13 тис.День тому
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 kinde.com 👉 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...
Before writing code, do this: System Design (Startups, SaaS) - Eraser AI
Переглядів 16 тис.День тому
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 kinde.com 👉 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-cs...
All 29 Next.js Mistakes Beginners Make
Переглядів 36 тис.14 днів тому
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 kinde.com 👉 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...
Next.js Image - Never struggle again (+ ImageKit)
Переглядів 15 тис.21 день тому
👉 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 kinde.com 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript 👉 Professional CSS Course...
The BEST way to host Next.js websites
Переглядів 19 тис.Місяць тому
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). 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript...
Authorization is easy now (Microservices, Next.js, Cerbos)
Переглядів 9 тис.Місяць тому
👉 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!)
Переглядів 2 тис.Місяць тому
#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!)
Переглядів 37 тис.Місяць тому
#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). 👉 Check out Kinde for auth and more kinde.com 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Profes...
Next.js with a separate server - good idea?
Переглядів 44 тис.Місяць тому
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Check out Kinde for auth and more kinde.com 👉 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 👉 E...
Web Scraping with GPT-4 Vision AI + Puppeteer is Mind-Blowingly EASY!
Переглядів 20 тис.Місяць тому
👉 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). 👉 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 2...
Add Auth & Protect Routes in React in 3 Minutes (Kinde)
Переглядів 12 тис.2 місяці тому
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 Full code: github.com/ByteGrad/kinde-react-example 👉 Check out Kinde for auth and more kinde.com 👉 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 de...
Web Developer Roadmap (2024) - Everything is Changing
Переглядів 238 тис.2 місяці тому
👉 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). 👉 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 👉 Professional ...
Add Auth & Protect Routes in Next.js in 2 Minutes
Переглядів 13 тис.3 місяці тому
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Next.js Authentication starter repo: github.com/ByteGrad/nextjs-auth-starter-kinde-auth My speedrun entry on X: ByteGradCom/status/1757802798610055677 Kinde website: kinde.com 👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: bytegrad.com/courses/professi...
Custom Hooks in React - Every React Developer Should Know This
Переглядів 33 тис.3 місяці тому
👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). 👉 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...
Why I don't use React-Query and tRPC in Next.js
Переглядів 66 тис.3 місяці тому
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
Переглядів 9 тис.3 місяці тому
React / Next.js Image Uploads (EASY!) - CDN, WebP / AVIF, Signed Uploads, Webhooks, Uploadcare
React Data Grid / Table - Top 3 Enterprise UI-Components - #1 (Syncfusion)
Переглядів 3,4 тис.3 місяці тому
React Data Grid / Table - Top 3 Enterprise UI-Components - #1 (Syncfusion)
React Charts - Top 3 Enterprise UI-Components - #2 (Syncfusion)
Переглядів 2,8 тис.3 місяці тому
React Charts - Top 3 Enterprise UI-Components - #2 (Syncfusion)
React Scheduler / Calendar - Top 3 Enterprise UI-Components - #3 (Syncfusion)
Переглядів 11 тис.3 місяці тому
React Scheduler / Calendar - Top 3 Enterprise UI-Components - #3 (Syncfusion)
Next.js 14 Authentication (Kinde Auth, Server Actions, Roles & Permissions)
Переглядів 34 тис.5 місяців тому
Next.js 14 Authentication (Kinde Auth, Server Actions, Roles & Permissions)
Why use Microservices, Docker & Kubernetes?
Переглядів 17 тис.5 місяців тому
Why use Microservices, Docker & Kubernetes?
This AI-tool is even better than GitHub Copilot?
Переглядів 10 тис.5 місяців тому
This AI-tool is even better than GitHub Copilot?
NextJS Tutorial - All 12 Concepts You Need to Know
Переглядів 214 тис.6 місяців тому
NextJS Tutorial - All 12 Concepts You Need to Know
Deploy your Next.js app to a VPS (EASY!)
Переглядів 26 тис.6 місяців тому
Deploy your Next.js app to a VPS (EASY!)
This React Text Editor is Amazing! (Image Upload, Markdown, Code Mirror, WYSIWYG, Next.js, Froala)
Переглядів 30 тис.7 місяців тому
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)
Переглядів 14 тис.7 місяців тому
How to Upload Images in React / Next.js (File Uploads, Filestack)
Zod Tutorial - All 10 places for Zod in your React / Next.js app
Переглядів 71 тис.7 місяців тому
Zod Tutorial - All 10 places for Zod in your React / Next.js app
E-Commerce Web Scraping Tutorial (Puppeteer & Cheerio & Node.js)
Переглядів 12 тис.7 місяців тому
E-Commerce Web Scraping Tutorial (Puppeteer & Cheerio & Node.js)
TypeScript Generics are EASY once you know this
Переглядів 119 тис.8 місяців тому
TypeScript Generics are EASY once you know this
Brilliant video. Thank you so much
Fantastic tutorial, subscribed.
Got an error after deployed into vercel, the contact form is working fine in local deployment, but after I tried to input after int deployed, got the "Application error: a server-side exception has occurred (see the server logs for more information). Digest: 2047760978" error. anybody having the same issue?
awesome stuffs
OMG! You're an incredible teacher! I just subbed! And will watch your other vids now!!!
As soon as I saw useeffect I had to watch, it's been a month since I came upon learning ABT useeffect n still I have no idea where the hell do I use it
JavaScript devs will be replaced by chat gtp.
What if I apply "user client" in ExampleServerComponent and put this component inside ExampleClientComponent instead of as children?
Cool, Great, Excellent what ever than you bro
would be nice if you go into "why" this happens
Awesome video
Lekker gedaan gap
Great video, I give it a like and subscribe!
Life savior.
CAN I EDIT YOUR UA-cam VIDEOS?
Thank you sir for your efforst
There are new frameworks each month. Pick a stack and master it. Then you can learn new stuff, which works 90% the same way anyway.
I just have one question. Recently, I went through the cohort student profiles, especially those who got a job and won a hackathon. I saw their projects, and they are building everything in Next.js. They use Next.js for both the frontend and backend, and they got jobs as full-stack developers. So my question is, why are they not using Node.js for the backend? Is Node.js not commonly used in real-time applications? I am a Node.js backend developer, and I don't understand how they are building these complex projects using only Next.js. I am a fresher Node.js backend developer and did not get a job. They say they don't hire freshers for backend roles. Should I learn Next.js and go for a full-stack position or stick to the backend? I have an intermediate level of knowledge in React.
Codenigniter, bootstrap, jquery and you are done. Or learn a new framework like an idiot every 5 minutes.
Thanks for information sir
Badass. Been really enjoying your vids. I've definitely leveled up. 🙏
thanks your video
Where and how do cloud services fit into all this?
Introducing intentional bugs to make sure your code is more reliable
Thank you very much brother😊😊😊
New devs went full circle 😂
Thanks to react-compiler this video will age rather fast ;)
What i like more about your videos your calm voice while explaining.
navigation using next Link with prefetch set to true which is the default setup doesn't run the middleware on every navigation, prefetch is not available in development and you don't see it not work but when you deploy your app to production issues will appear
This is an amazing video, thank you dude.
thanks for good explanations!
can you post the link to the bootstrap 5.2.1? its hard to find that exact navbar
thank you very much for your help
do I need to learn SQL before postgres or I can just jump in ?
This is so much better than the docs lmao
OMG NextJs has so many gotchas it's not even funny. I hate this direction for web dev with a passion.
Bytegrad brother i am so lucky to find out about your next js course it is #1 resource on nextjs and the coding standard you follow is top notch along with your teaching style . Anyone willing to take his course don't hesitate even a bit its The best next js course you will find in internet ❤️❤️
Thanks, appreciate it!
I am really impressed by the quality and the conciseness of your tutorials. Everything is so well explained and to the point. As if you can read my thoughts. One question though. I haven't seen you talking about Route Handlers, in the special route files that NextJS offers. It seems an essential concept in NextJs, so why did you skip it? Will it be in your course though?
Thanks! They’re in the course yes, mostly used for webhooks these days
Middleware does not support NodeJS, only edge. No session auth with db there.
router.push will rerender whole page?
The best explanation, very good!
Dziękuję :)
hahahah YES !!! After kinda 90 minutes i found your video, third option helped, and can now deploy successfully to vercel again, after so many atempts! Its even on your given CV page i am working on xD
I'm addicted to your videos 😅, keep making them as I need daily multiple doses of them❤
If React devs are still having trouble initializing variables/state, boy... am I concerned.
if Java/Spring is Enterprise then you should consider C#/.Net too. I would say its equally or more popular than Java in enterprises. This is coupled wish MS SQL Server and Azure
Great video!
Saved the day for me🎉
Thank you saved my grades.
🙏🏾💯