ByteGrad
ByteGrad
  • Видео 414
  • Просмотров 6 770 756
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...
Просмотров: 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

Комментарии

  • @MrLeftwingNL
    @MrLeftwingNL Час назад

    Thanks to react-compiler this video will age rather fast ;)

  • @amraromoro
    @amraromoro Час назад

    What i like more about your videos your calm voice while explaining.

  • @r3nd593
    @r3nd593 4 часа назад

    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

  • @wilhelmburger9588
    @wilhelmburger9588 7 часов назад

    This is an amazing video, thank you dude.

  • @crisgea71
    @crisgea71 7 часов назад

    thanks for good explanations!

  • @george2041
    @george2041 8 часов назад

    can you post the link to the bootstrap 5.2.1? its hard to find that exact navbar

  • @robertsiqueiros6384
    @robertsiqueiros6384 8 часов назад

    thank you very much for your help

  • @lostinthenarrativve
    @lostinthenarrativve 10 часов назад

    do I need to learn SQL before postgres or I can just jump in ?

  • @backstromforsberg
    @backstromforsberg 14 часов назад

    This is so much better than the docs lmao

  • @random-pd7gf
    @random-pd7gf 15 часов назад

    OMG NextJs has so many gotchas it's not even funny. I hate this direction for web dev with a passion.

  • @Herxh428
    @Herxh428 20 часов назад

    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 ❤️❤️

    • @ByteGrad
      @ByteGrad 20 часов назад

      Thanks, appreciate it!

  • @miriammulders2341
    @miriammulders2341 22 часа назад

    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?

    • @ByteGrad
      @ByteGrad 22 часа назад

      Thanks! They’re in the course yes, mostly used for webhooks these days

  • @bgarcesch
    @bgarcesch 23 часа назад

    Middleware does not support NodeJS, only edge. No session auth with db there.

  • @azazinlove7514
    @azazinlove7514 День назад

    router.push will rerender whole page?

  • @itsalexsa_m
    @itsalexsa_m День назад

    The best explanation, very good!

  • @maxpapirovnyk4304
    @maxpapirovnyk4304 День назад

    Dziękuję :)

  • @jannickpedersen4620
    @jannickpedersen4620 День назад

    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

  • @aryaajay
    @aryaajay День назад

    I'm addicted to your videos 😅, keep making them as I need daily multiple doses of them❤

  • @retagainez
    @retagainez 2 дня назад

    If React devs are still having trouble initializing variables/state, boy... am I concerned.

  • @Andy-si1pl
    @Andy-si1pl 2 дня назад

    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

  •  2 дня назад

    Great video!

  • @vinayjoshi607
    @vinayjoshi607 2 дня назад

    Saved the day for me🎉

  • @shanalcordo7174
    @shanalcordo7174 2 дня назад

    Thank you saved my grades.

  • @d.o.nmuzic3802
    @d.o.nmuzic3802 2 дня назад

    🙏🏾💯

  • @victorh8863
    @victorh8863 2 дня назад

    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.

  • @cerdek9190
    @cerdek9190 2 дня назад

    Very informative thank you

  • @juviess
    @juviess 2 дня назад

    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?

  • @EleztronTV
    @EleztronTV 2 дня назад

    3:56:00

  • @ashutoshghanate
    @ashutoshghanate 2 дня назад

    Hey kiloByteGrad, amazing stuff, could you make complete video on webpack with reactjs

  • @kamrant8915
    @kamrant8915 2 дня назад

    Thank you very much for your comprehensive explanations.🥰

  • @jegadheeswarank6290
    @jegadheeswarank6290 3 дня назад

    Your videos are great

  • @AdarshSingh-mb5ww
    @AdarshSingh-mb5ww 3 дня назад

    i am having problem in setting up multiple audio tracks in video.js. can anyone help??

  • @JaysCoolThings
    @JaysCoolThings 3 дня назад

    Very helpful and concise. Thank you!

  • @RishikeshDasappa
    @RishikeshDasappa 3 дня назад

    Loving this new content. Making videos on what not to do is REALLY helpful in building good coding practices. Keep it up!

  • @Rogueimgs
    @Rogueimgs 3 дня назад

    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.

    • @retagainez
      @retagainez День назад

      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.

  • @ShibaramDas-ue4io
    @ShibaramDas-ue4io 3 дня назад

    Thank you sir.

  • @andrejkling3886
    @andrejkling3886 3 дня назад

    Good video. Thank you. Using orm for real production it’s not good practice …

  • @haiffy
    @haiffy 3 дня назад

    Would be nice if you publish this as a starter in GitHub

  • @edx3624
    @edx3624 3 дня назад

    Thank you! 😁 What is your vscode theme and font?

  • @QiMU01
    @QiMU01 3 дня назад

    Thanks!

    • @ByteGrad
      @ByteGrad 3 дня назад

      Thanks, appreciate it!

    • @QiMU01
      @QiMU01 15 часов назад

      ​@@ByteGrad No problem!

  • @twenty9str498
    @twenty9str498 3 дня назад

    what about authorization??? doing it in layout is the only way.

  • @technep9776
    @technep9776 3 дня назад

    wow. Great content , keep it up man.

  • @alialrahem9817
    @alialrahem9817 3 дня назад

    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

  • @ElectroTechKh
    @ElectroTechKh 3 дня назад

    Good explanation, but write and remove then write after remove again and again. I will crazy to follow 😂

  • @eliyir
    @eliyir 3 дня назад

    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.

  • @not_a_human_being
    @not_a_human_being 3 дня назад

    great tutorial about going live with next/pg app in Vercel!

  • @alonavladymyrova
    @alonavladymyrova 3 дня назад

    Thank you!

  • @brightonmtandi6923
    @brightonmtandi6923 3 дня назад

    Wow thanks a lot i have never understood File Paths up until this very moment.

  • @James-cc7cq
    @James-cc7cq 3 дня назад

    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

  • @DiiiaZoTe
    @DiiiaZoTe 3 дня назад

    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.