ByteGrad
ByteGrad
  • 414
  • 6 811 395
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
Переглядів: 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

КОМЕНТАРІ

  • @HilaryGo555
    @HilaryGo555 12 секунд тому

    Brilliant video. Thank you so much

  • @tomoutram774
    @tomoutram774 5 хвилин тому

    Fantastic tutorial, subscribed.

  • @thalibarrifqi
    @thalibarrifqi Годину тому

    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?

  • @kanchanaPW
    @kanchanaPW Годину тому

    awesome stuffs

  • @Youforlia
    @Youforlia 2 години тому

    OMG! You're an incredible teacher! I just subbed! And will watch your other vids now!!!

  • @himanshux189
    @himanshux189 2 години тому

    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

  • @Darkpill-2
    @Darkpill-2 2 години тому

    JavaScript devs will be replaced by chat gtp.

  • @firewatermoonsun
    @firewatermoonsun 8 годин тому

    What if I apply "user client" in ExampleServerComponent and put this component inside ExampleClientComponent instead of as children?

  • @mohammad_zrar
    @mohammad_zrar 9 годин тому

    Cool, Great, Excellent what ever than you bro

  • @user-rv7km5jy5c
    @user-rv7km5jy5c 10 годин тому

    would be nice if you go into "why" this happens

  • @extremecards3226
    @extremecards3226 10 годин тому

    Awesome video

  • @Applecitylightkiwi
    @Applecitylightkiwi 11 годин тому

    Lekker gedaan gap

  • @jakubklewicki5925
    @jakubklewicki5925 12 годин тому

    Great video, I give it a like and subscribe!

  • @puniopenetrante
    @puniopenetrante 15 годин тому

    Life savior.

  • @Rowafaedits194
    @Rowafaedits194 15 годин тому

    CAN I EDIT YOUR UA-cam VIDEOS?

  • @waqasnazir9397
    @waqasnazir9397 16 годин тому

    Thank you sir for your efforst

  • @IStMl
    @IStMl 16 годин тому

    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.

  • @atharvdalal9493
    @atharvdalal9493 19 годин тому

    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.

  • @skodateam
    @skodateam День тому

    Codenigniter, bootstrap, jquery and you are done. Or learn a new framework like an idiot every 5 minutes.

  • @ahmadrizalabdussalam1150
    @ahmadrizalabdussalam1150 День тому

    Thanks for information sir

  • @bits_of_bryce
    @bits_of_bryce День тому

    Badass. Been really enjoying your vids. I've definitely leveled up. 🙏

  • @404-not-found-service
    @404-not-found-service День тому

    thanks your video

  • @santiagorivera1562
    @santiagorivera1562 День тому

    Where and how do cloud services fit into all this?

  • @edhahaz
    @edhahaz День тому

    Introducing intentional bugs to make sure your code is more reliable

  • @mdabdulahallnomantuhin3621
    @mdabdulahallnomantuhin3621 День тому

    Thank you very much brother😊😊😊

  • @victorhugoolvera8773
    @victorhugoolvera8773 День тому

    New devs went full circle 😂

  • @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 День тому

    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 2 дні тому

    This is an amazing video, thank you dude.

  • @crisgea71
    @crisgea71 2 дні тому

    thanks for good explanations!

  • @george2041
    @george2041 2 дні тому

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

  • @robertsiqueiros6384
    @robertsiqueiros6384 2 дні тому

    thank you very much for your help

  • @lostinthenarrativve
    @lostinthenarrativve 2 дні тому

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

  • @backstromforsberg
    @backstromforsberg 2 дні тому

    This is so much better than the docs lmao

  • @random-pd7gf
    @random-pd7gf 2 дні тому

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

  • @Herxh428
    @Herxh428 2 дні тому

    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 2 дні тому

      Thanks, appreciate it!

  • @miriammulders2341
    @miriammulders2341 2 дні тому

    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 2 дні тому

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

  • @bgarcesch
    @bgarcesch 2 дні тому

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

  • @azazinlove7514
    @azazinlove7514 2 дні тому

    router.push will rerender whole page?

  • @itsalexsa_m
    @itsalexsa_m 2 дні тому

    The best explanation, very good!

  • @maxpapirovnyk4304
    @maxpapirovnyk4304 2 дні тому

    Dziękuję :)

  • @jannickpedersen4620
    @jannickpedersen4620 3 дні тому

    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 3 дні тому

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

  • @retagainez
    @retagainez 3 дні тому

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

  • @Andy-si1pl
    @Andy-si1pl 3 дні тому

    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

  •  3 дні тому

    Great video!

  • @vinayjoshi607
    @vinayjoshi607 4 дні тому

    Saved the day for me🎉

  • @shanalcordo7174
    @shanalcordo7174 4 дні тому

    Thank you saved my grades.

  • @d.o.nmuzic3802
    @d.o.nmuzic3802 4 дні тому

    🙏🏾💯