ByteGrad
ByteGrad
  • 415
  • 6 897 686
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
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

Komentáře

  • @northerncoder
    @northerncoder Před 6 hodinami

    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?

  • @TheMrPoss
    @TheMrPoss Před 8 hodinami

    thanks. can i ask you what vscode theme you use?

  • @ahmednabil4456
    @ahmednabil4456 Před 8 hodinami

    thanks

  • @MrColins710
    @MrColins710 Před 9 hodinami

    good explanation, thank you! everything is clear

  • @monochosen
    @monochosen Před 10 hodinami

    Great Course.

  • @alejandroforteshidalgo9771
    @alejandroforteshidalgo9771 Před 11 hodinami

    This is amazing !!!! When will you make a react 19 tutorial ??

  • @palaceofgains7782
    @palaceofgains7782 Před 11 hodinami

    kinde vs lucia ....your views

  • @user-lg7fd6km1q
    @user-lg7fd6km1q Před 13 hodinami

    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

  • @ygvanz
    @ygvanz Před 15 hodinami

    Just started to learn Next and this came up. Appreciate it!

  • @whysumancode
    @whysumancode Před 16 hodinami

    01:23:23

  • @YamekDrope
    @YamekDrope Před 17 hodinami

    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?

  • @urbanadventures2023
    @urbanadventures2023 Před 21 hodinou

    You are perfect I would say

  • @stardust5865
    @stardust5865 Před 23 hodinami

    So many questions i had got now answered. From Finland thank you sir!

  • @joaoarthurbandeira
    @joaoarthurbandeira Před 23 hodinami

    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!

  • @viniciusm.m.7822
    @viniciusm.m.7822 Před dnem

    Thanks!!!

  • @tamalchowdhury
    @tamalchowdhury Před dnem

    another good one!

  • @stackdevlopr
    @stackdevlopr Před dnem

    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, ...)}!

  • @stackdevlopr
    @stackdevlopr Před dnem

    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?

  • @sifact1391
    @sifact1391 Před dnem

    Good job

  • @endlessia
    @endlessia Před dnem

    As usual, nothing to say, very clear & great content ! ❤ ( btw what is your vscode theme? )

  • @anshubhaskar9870
    @anshubhaskar9870 Před dnem

    Finally my doubts regarding server components and server actions are cleared. Thank you ❤️

  • @avi_mukesh
    @avi_mukesh Před dnem

    Only about half hour into the video, but already learning a lot. Thank you so much for making this

  • @cant_sleeeep
    @cant_sleeeep Před dnem

    wow.

  • @eddiejaoude
    @eddiejaoude Před dnem

    Great video! Thank you for the examples and different use cases

  • @sivadhanushuppalapati4041

    Dear Wesley could you please tell me how to get in touch with you for collaboration.

  • @theintjengineer
    @theintjengineer Před dnem

    THANK YOU!

  • @404-not-found-service

    I like how interesting your material is, a hug and keep it up!

  • @Real_Life126
    @Real_Life126 Před dnem

    Sir aap Hindi me pathao

    • @punnettsquares
      @punnettsquares Před dnem

      czcams.com/video/R-Epbgmy5ac/video.html&ab_channel=CodeStepByStep

  • @shoaibshaikh3651
    @shoaibshaikh3651 Před dnem

    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

  • @enn_nj
    @enn_nj Před dnem

    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😅

    • @simonpetrus3089
      @simonpetrus3089 Před dnem

      Saya juga dari Indonesia.. video2 Bytegrad emang the best lah

    • @theeshi1
      @theeshi1 Před dnem

      You will bro keep learning. ❤ from Sri Lanka

  • @Alex-bc3xe
    @Alex-bc3xe Před dnem

    First

  • @jasonliu6321
    @jasonliu6321 Před dnem

    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?

  • @MEIYANG-sj2sb
    @MEIYANG-sj2sb Před dnem

    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!

  • @noahm5396
    @noahm5396 Před 2 dny

    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.

    • @ByteGrad
      @ByteGrad Před dnem

      Awesome, enjoy! Mostly CZcams actually!

  • @JuliaLee-kp5ny
    @JuliaLee-kp5ny Před 2 dny

    the best explanation ever! thank you!

  • @TheNelsonc24
    @TheNelsonc24 Před 2 dny

    I simply love it, thanks for this great content🎉

  • @hamza-pz5bq
    @hamza-pz5bq Před 2 dny

    Thanks teacher. Which snippets did you use to autocomplete?

  • @hamza-pz5bq
    @hamza-pz5bq Před 2 dny

    Awesome. Hi from Azerbaijan

  • @elenamikhaylova5086

    Thank you for explaining this well, i have banged my head on JS error handling for so long

  • @johnathonme
    @johnathonme Před 2 dny

    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!!

  • @VincentPride1986
    @VincentPride1986 Před 2 dny

    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.

  • @edh9500
    @edh9500 Před 2 dny

    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.

  • @drxyd
    @drxyd Před 2 dny

    Tabs it is

  • @sexy_audios
    @sexy_audios Před 2 dny

    what if we try await setCount(count + 1) in a async function

  • @vignesh_m_1995
    @vignesh_m_1995 Před 2 dny

    Can we access the state inside a child server component, if we do the same with redux (instead of context)?

  • @ansarqazi4377
    @ansarqazi4377 Před 2 dny

    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!

  • @kxmode
    @kxmode Před 2 dny

    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!

  • @kxmode
    @kxmode Před 2 dny

    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. :)

  • @aisdjsiasiodjisoajd7698

    Change the title to Mistakes devs make. I’m not a beginner and you made some great points!