- Видео 414
- Просмотров 6 770 756
ByteGrad
Нидерланды
Добавлен 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...
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...
Просмотров: 10 928
Видео
The BEST Next.js setup: Next.js + Postgres + Docker (Dev / Prod)
Просмотров 13 тыс.19 часов назад
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
Просмотров 34 тыс.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!
Просмотров 19 тыс.Месяц назад
👉 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
Просмотров 235 тыс.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
Просмотров 213 тыс.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 тыс.7 месяцев назад
TypeScript Generics are EASY once you know this
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.
🙏🏾💯
Web deving will hit a huge high in allowing people to characterize their own artistic talent and styling intricacies, giving a new era of lifeless AI a bit of hope for us mere mortals competing with machines.
Very informative thank you
Middleware is great if you just want to check if there is any auth data at all. But what about roles? How do we check them in middleware?
3:56:00
Hey kiloByteGrad, amazing stuff, could you make complete video on webpack with reactjs
Thank you very much for your comprehensive explanations.🥰
Your videos are great
i am having problem in setting up multiple audio tracks in video.js. can anyone help??
Very helpful and concise. Thank you!
Loving this new content. Making videos on what not to do is REALLY helpful in building good coding practices. Keep it up!
About reference values: They are commonly described a "boxes", but the analogy to the physical realm fails when you realise that two boxes can "contain" the exact same value.
Or you put something in the box and don't tell the DOM about it and now it's Schrödinger's box... whatever that means.
Thank you sir.
Good video. Thank you. Using orm for real production it’s not good practice …
Would be nice if you publish this as a starter in GitHub
Thank you! 😁 What is your vscode theme and font?
Thanks!
Thanks, appreciate it!
@@ByteGrad No problem!
what about authorization??? doing it in layout is the only way.
wow. Great content , keep it up man.
I did study this material on focus on SoloLearn and really clear to know the structure here you explain in detail thank you for posting this video very clear and consistent
Good explanation, but write and remove then write after remove again and again. I will crazy to follow 😂
Authentication Libraries: While you can implement a custom authentication solution, for increased security and simplicity, it’s recommended to use an authentication library. These libraries offer built-in solutions for authentication, session management, and authorization. They also provide features like social logins, multi-factor authentication, and role-based access control. You can find a list of authentication libraries in the Auth Libraries section.
great tutorial about going live with next/pg app in Vercel!
Thank you!
Wow thanks a lot i have never understood File Paths up until this very moment.
Another great vid, have my subscription! Very timely for me, just today, having implemented my own auth and setting it up in the middleware, I was kind of disappointed to realise my dashboard was dynamically rendered, since I have to access token claims to ascertain user roles, I thought it must have to be that way and this confirmed it. This is yet more context and info that has illuminated the entire process for me 🫡 Thanks
One thing that needs to be mentioned is that the middleware uses the edge runtime. So unless you use a database that is edge compatible, you will not be able to use database sessions for your auth and will need to rely on JWTs. So if you use database sessions, page is probably a better option in my opinion.