The Ultimate NEXT.JS 13 Tutorial (Complete Walkthrough w/ Examples)

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: www.papareact.com/course
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
Join me as I guide you through the newly released Next.js 13. We will be diving deeper into the new features of Next.js 13 such as:
👉 How to smoothly transition from Next.js 12 to 13 by replacing getServerSideProps, getStaticProps & getStaticPaths using the new Next.js 13 alternatives! (Including ISR!)
👉 How to implement the new app/ Directory
👉 Explanation of the new Server components and when/how to use them!
👉 Creating a Todo App with the new app/ Directory features
👉 How to create a Client Side Component and When to Use it
👉 How to create Dynamic routes inside /app directory
👉 How we can use async/await in the server component to fetch all the todos!
👉 How to utilise different types of caching & static params examples!
👉 How to implement ISR (Incremental Static Regeneration) with next: revalidate
👉 Showcasing how to use SSR (Server Side Rendering) with a search example
😱 BONUS: I will show you how to use React Suspense Boundaries!
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
00:36 Explaining Next.js 13
1:08 Explaining the new app/ Directory
1:36 Initialising the Demo Build
3:13 Converting the Build to Next.js 13
5:01 Building the Homepage
7:01 Building the Header Component
8:38 Explaining the New Route Structures
9:01 Building a Todo App with Server Side Components (1/3)
9:57 Implementing the New Link Component
11:22 Using the New Server Side Components with async/await to Fetch Todos (1/2)
13:17 Building a Todo App with with Server Side Components (2/3)
15:20 Creating a Dynamic Route inside the New app/ Directory
17:10 Using the New Server Side Components with async/await to Fetch Todos (2/2)
19:08 Explaining How to Add Rendering Techniques (SSR, SSG, ISR)
19:58 Implementing ISR with next: revalidate
20:50 Implementing the New generateStaticParams() Function
24:18 Todo App Demo with SSG
28:33 Building out an Error Message
29:39 Building the Todo App (3/3)
31:40 Implementing SSR with a Search Example
34:15 Explaining & Creating a Client Side Component
38:10 Displaying the Search Results in the Todo App
42:06 Implementing the New Loading State Functionality
43:36 Implementing the New Error State Functionality
45:27 Making the Head Name Dynamic
47:11 Explaining and Adding Group Routes
52:01 Implementing React Suspense Boundaries
5:38 Next.js 13 Summary
56:18 Outro
Let’s get it PAPA fam🔥.
#nextjs #nextjs13 #vercel

Пікірлер: 305

  • @SonnySangha
    @SonnySangha Жыл бұрын

    📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

  • @wintersijan

    @wintersijan

    Жыл бұрын

    it would be really helpful if you make video on new middleware api

  • @cloudsystem3740

    @cloudsystem3740

    Жыл бұрын

    i really don't know why is the reading map as property 41:06 I got that issue Property 'map' does not exist on type '{ position: number; title: string; link: string; thumbnail: string; snippet: string; }'.ts(2339) could you please guide me why? because I don't know a lot of typescript and currently I hate it :)

  • @freespeech515

    @freespeech515

    Жыл бұрын

    NEXTJS 13 is trash .When ever i use MUI it ask for USE CLIENT. it makes it downlaod all mui javascript. Whole point of react become useless. Server side rendering work because of caching . now if you render it all in client ... you are writing 10000line code for 10 line code. TERRIBLE

  • @Cowkill

    @Cowkill

    Жыл бұрын

    @@freespeech515 So, the problem comes from MUI.

  • @ronellcrizvillamil8105

    @ronellcrizvillamil8105

    Жыл бұрын

    why next link ruin/destroy display flex?

  • @alicodes22
    @alicodes22 Жыл бұрын

    Les goooo,SICK content inbound!!

  • @dolapoajayi2156

    @dolapoajayi2156

    Жыл бұрын

    Im waiting for your own tutorial with updates next13😁🙏

  • @alicodes22

    @alicodes22

    Жыл бұрын

    @@dolapoajayi2156 Probably going to do an entire build!! Thanks for waiting🙌

  • @dolapoajayi2156

    @dolapoajayi2156

    Жыл бұрын

    @@alicodes22 let’s get it💪

  • @marioskanellopoulos8780
    @marioskanellopoulos8780 Жыл бұрын

    Amazing tutorial Sonny. You made everything so clear. NextJS 13 is beyond great. Thanks for your providing this content to us! PAPAFAM is THE Best Community!

  • @janasheehan
    @janasheehan Жыл бұрын

    The best rundown of NEXT.JS 13 I was able to find. No-nonsense and to the point, reminds me of the early days Khan academy... Brilliant. Thank you.

  • @samsheikh1254
    @samsheikh1254 Жыл бұрын

    You are the real GOAT sunny you don't know how much you've helped people with your channel

  • @dalestewart
    @dalestewart Жыл бұрын

    You are the ultimate professional Sonny. Amazing tutorial. I looking forward to a later point in time as NEXTJS 13 evolves.

  • @christianangelomsulit3759
    @christianangelomsulit3759 Жыл бұрын

    Hey Sonny, just wanted to say thanks for this amazing video on NextJS 13! It was really helpful and easy to understand. You did an awesome job explaining everything. Keep up the great work!

  • Жыл бұрын

    Thank you man, great material. Version 13 feels more intuitive when building

  • @intruder2.0
    @intruder2.0 Жыл бұрын

    Been looking for a nextjs 13 tutorial ever since the nextconf... get blessed man much love👊

  • @night23412
    @night23412 Жыл бұрын

    I've watched over 15 videos of next 13 from the most popular js/react youtubers and this vid is by far the best. Excellent work as always!

  • @sunnymittal1906
    @sunnymittal190611 ай бұрын

    Love your presentation and speed. Yours are the first videos where I have to pause when following along (that's a GREAT thing!). New subscriber here

  • @cole_mcconnell
    @cole_mcconnell Жыл бұрын

    Insanely useful video man, I really think Next 13 will make it way cleaner in the long term rather than needing so many getStaticProps, getStaticPaths and getServerSideProps everywhere

  • @sairusxgelonio8084
    @sairusxgelonio808411 ай бұрын

    You are the best that i have watched. Very brief and concised yet you almost covered everything on nextjs. The examples is very well explained.

  • @tinotaylor
    @tinotaylor Жыл бұрын

    Nice one Sonny. Was really excited about this update and it was nice to see it layed out all in one example video 🙌

  • @jasonhoi85
    @jasonhoi85 Жыл бұрын

    One of the best video about Next.js 13 until recently.

  • @ShreyashKore
    @ShreyashKore Жыл бұрын

    I was struggling to wrap my head around the new concepts in NextJs; but you explained them all! Thanks!!!

  • @tiktokvibes9767
    @tiktokvibes9767 Жыл бұрын

    Definitly the best nextJs 13 tutorial. Best chanel for modern web tech. Thanks lot Sonny. 👍

  • @MichaelCGatesMusic
    @MichaelCGatesMusic Жыл бұрын

    Right to the point. No time wasted. NextJS is my new framework!

  • @neilblack1784
    @neilblack1784 Жыл бұрын

    First time watching one of your videos but it won't be the last! Thanks Sonny - this was brilliant.

  • @pdovhomilja
    @pdovhomilja Жыл бұрын

    Thank you, Sonny. Excellent tutorial, very helpful. You are a great teacher

  • @RicardoSantos-lj4yz
    @RicardoSantos-lj4yz Жыл бұрын

    Really a excellent video! I'm grateful for your good work, Sonny!

  • @andreaskarz
    @andreaskarz Жыл бұрын

    Holy cow - I'm totaly flashed - amazing stuff I will check it out. And a super tutorial, thanks so much

  • @palmjack
    @palmjack Жыл бұрын

    Great overview, very helpful. One small improvement regarding keeping the state for the input field - you may keep it in the ref instead the state, that way you may skip the extra rerenders on every key stroke.

  • @j946atFIVEFOUR88AA
    @j946atFIVEFOUR88AA Жыл бұрын

    Great video, tons of info packed into less than an hour! Earned my sub for sure

  • @mosey_san
    @mosey_san Жыл бұрын

    It's so helpful and interesting😍 Thank you, friend🙏 Server components seems very good. New files structure and layout decomposition is my favourite👍

  • @JoshuaTMagee
    @JoshuaTMagee Жыл бұрын

    Incredible video, Sonny, thank you! Would love to see a detailed walkthrough of the new middleware updates in Next 13 as well.

  • @ilan117
    @ilan117 Жыл бұрын

    Hi Sonny 🤩 Thank you so much! I was waiting for your next.js-13 tutorial 👍 I wonder if you can "upgrade" this tutorial by giving us an example of where the single user [id] have an object we map over to get the keys/values from. e.g. the posts and a post detail having an object if images. I tried it myself but I had to create a separate component just for that for including the 'use client' and passing the props. I wish wish you can show us an example 🙏

  • @subhamshaw1726
    @subhamshaw1726 Жыл бұрын

    this was best video on nextjs by far seen. thanks for making this video.

  • @jamessimon4804
    @jamessimon48048 ай бұрын

    Great videos and content as always. I always find inspiration to improve watching your videos.

  • @linushahs1117
    @linushahs1117 Жыл бұрын

    This video is really helpful. I didn't get the point of next.js@13 until I saw your video.

  • @zonmusic6370
    @zonmusic6370 Жыл бұрын

    It's amazing to see the reinvention of the server first approach to web development. This actually has a thought process similar to building a PHP web application from the earlier days of web development.

  • @TinohCosta

    @TinohCosta

    Жыл бұрын

    Php is hideous to look at, let alone to consider, but I have to allege that we are going backwards, for the past few years I have not had to consider compute costs for frontends but it seems like a new trend once more

  • @saumya8407
    @saumya8407 Жыл бұрын

    This is the most comprehensing I ever taken tutorial on nextJs.

  • @andreitalpa5676
    @andreitalpa5676 Жыл бұрын

    So clear and concise, you are the man!

  • @SonnySangha

    @SonnySangha

    Жыл бұрын

    Thank you so much!!!

  • @user-ru9bc4qt8g
    @user-ru9bc4qt8g Жыл бұрын

    This tutorial is a masterpiece, thank you.

  • @aliyektaie9123
    @aliyektaie9123 Жыл бұрын

    Thanks! I was comparing react, next and laravel to decide which option to go with. You didn’t let any more room for pros and cons, i will go with next for my website 👍👍👍 thanks for saving a week of time for me ❤️❤️

  • @SonnySangha

    @SonnySangha

    Жыл бұрын

    That’s awesome thank you I’m so glad it could help you!!!

  • @johnsimms9444

    @johnsimms9444

    Жыл бұрын

    Laravel is a completely different world from Next - Next still has more of a frontend appeal. One thing missing is database work. Something you might like to add to your Nextjs app is Prisma, which similarly to Laravel can help you generate models and migrations.

  • @ThugLifeModafocah
    @ThugLifeModafocah Жыл бұрын

    Now we're talking. Thank you, man. Cheers.

  • @ibrahimasarr1180
    @ibrahimasarr1180 Жыл бұрын

    Thanks from Ziguinchor (Sénégal, West Africa). It's really helpfull. Tu es magnifique

  • @duoduo618
    @duoduo618 Жыл бұрын

    It’s really the up to date the best video about next js 13

  • @kw5340415
    @kw5340415 Жыл бұрын

    Wow so amazing. Thank you for your make the NEXT.JS 13 easy to understand.

  • @bancroftberlin
    @bancroftberlin Жыл бұрын

    Thanks for your work, your video came at the right time. Currently building my portfolio and 13 jumped right in the middle of it .

  • @lucasfermino8809
    @lucasfermino8809 Жыл бұрын

    You're the best! Thanks for the video Sonny 💙

  • @codewithguillaume
    @codewithguillaume Жыл бұрын

    I was waiting for this since… 4 days 😂

  • @rizkiaprita
    @rizkiaprita Жыл бұрын

    great tuts man, ive been waiting to learn this new next13 stuff

  • @nicolasfelipe1
    @nicolasfelipe1 Жыл бұрын

    Awesome tutorial, thanks.

  • @thehangover4985
    @thehangover4985 Жыл бұрын

    Good content. Very well explained. Thanx for the tip for checking types. Really cool

  • @zCr3ative
    @zCr3ative Жыл бұрын

    Amazing explanation, thank you

  • @eddited7543
    @eddited7543 Жыл бұрын

    Really nice and easy to follow video. Thx a lot!

  • @BarakAlmog
    @BarakAlmog Жыл бұрын

    Absolutely LOVE this tutorial! You're my fav person of the day. Thank you so much. Liked & Subed. Will go snoop around searching for more :)

  • @ettysekhon5281
    @ettysekhon5281 Жыл бұрын

    Turbopack and other updates please, keep smashing it 👊

  • @DankSwoops
    @DankSwoops Жыл бұрын

    Sonny, you're by far the most Goated on youtube for NextJS. I started learning next as 13 released. Can you make a logic guide explaining how to convert old N12 videos into N13? I can't figure out how to make a clickable darkmode button or localization. Thank you for all the content.

  • @mohamedabdulla8097
    @mohamedabdulla8097 Жыл бұрын

    awesome video ..thank you sonny . waiting for more nextjs 13 from ur channel mainly about turbopack

  • @mobix25
    @mobix25 Жыл бұрын

    Vercel should give you RECOGNITION for what You're doing here . many developers are Learning NEXT JS from You, Not Them. PAPAFAM

  • @mattlaws6157
    @mattlaws6157 Жыл бұрын

    Another great tutorial, thanks Sonny

  • @connect.tehseen
    @connect.tehseen Жыл бұрын

    I really appreciate your efforts dude💕

  • @kinax2
    @kinax2 Жыл бұрын

    Thank you man for this amazing powerful video!

  • @tahmidziko
    @tahmidziko Жыл бұрын

    Right Now this is the best than other. Very depth...

  • @mohamednafil8983
    @mohamednafil8983 Жыл бұрын

    Great tutorial and easy to understand

  • @igogs7095
    @igogs7095 Жыл бұрын

    Thank you! Awesome tutorial

  • @13zebras
    @13zebras Жыл бұрын

    Fan-freaking-tastic!! Yes, please, do , etc. Thanks Sonny!

  • @PattyBeautCode
    @PattyBeautCode Жыл бұрын

    This complete NEXT JS !# TUTORIAL is Awesome !😱! You work fast as lightning🌩🌩 Thanks you !!

  • @pan_josef
    @pan_josef Жыл бұрын

    Awesome video. Thank you!

  • @abhidadhaniya5701
    @abhidadhaniya5701 Жыл бұрын

    This amazing guy deserves 1M+ subscribers ❤

  • @Pablo-rk4db
    @Pablo-rk4db Жыл бұрын

    Amazing overview 🎉

  • @alexander.k94
    @alexander.k94 Жыл бұрын

    Great video(s). Thank you very much! It would be amazing if you explain how to use nextjs 13 + nodejs + authentication with keycloak or something other.

  • @yggdasil
    @yggdasil Жыл бұрын

    Great tutorial! Appreciate it!

  • @abhinavdhama3014
    @abhinavdhama3014 Жыл бұрын

    The only reason for me to have interest in coding♥️♥️♥️♥️♥️

  • @riskitall7421
    @riskitall7421 Жыл бұрын

    Thanks bro for the tut

  • @kosrekedits673
    @kosrekedits673 Жыл бұрын

    Yoooooo So much excited for this

  • @emilygarcia2094
    @emilygarcia2094 Жыл бұрын

    Amazing content, the loading and error components will make my life easier:)

  • @SonnySangha

    @SonnySangha

    Жыл бұрын

    Right!!

  • @gurvirbaraich2028
    @gurvirbaraich2028 Жыл бұрын

    Amazing brother.

  • @xidnebwoz
    @xidnebwoz Жыл бұрын

    Too clear explanation, very easy to understand

  • @mohammadmoaid5282
    @mohammadmoaid528211 ай бұрын

    as usual, standing out tutorial sonny, although my initial next.js 13 folder structure is not same as yours for some reason😂😂 but you covered everything nicely, smoothly, and pretty much quickly, Thank you for this valuable content and keep up the good work

  • @marium98
    @marium98 Жыл бұрын

    well explained thank you

  • @isagive
    @isagive Жыл бұрын

    Great tutorial, learned a looooot - Thank you very much can we get more ;)

  • @DeineWebschmiede
    @DeineWebschmiede Жыл бұрын

    rly helpfull, amazing new features.

  • @ayepaiko
    @ayepaiko Жыл бұрын

    Hey Sonny, great video as always! I'am wondering, can you do a video on how do we use library that uses context api and should we wrapper the context api in the layout?

  • @lucasvtiradentes
    @lucasvtiradentes Жыл бұрын

    great tutorial helped a lot!!!

  • @dizaas7918
    @dizaas7918 Жыл бұрын

    Great work !!! ❤❤❤

  • @mohammadhosseinmoradi2021
    @mohammadhosseinmoradi2021 Жыл бұрын

    It was very useful and fast. thanks.

  • @sylvainguehria8928
    @sylvainguehria8928 Жыл бұрын

    what a tutorial ! thank's a lot Sonny

  • @JustMack
    @JustMack Жыл бұрын

    🤩🤩🤩🤩🤩🤩🤩 can't wait to start playing 💪

  • @csguru8211
    @csguru8211 Жыл бұрын

    Great tutorial. Thanks a lot for making this.

  • @Victor-wh9bs
    @Victor-wh9bs Жыл бұрын

    ThankU Sonny time to level up with NextJS 13

  • @kabtamudegifie9795
    @kabtamudegifie9795 Жыл бұрын

    Amazing tutorial thanks!

  • @SonnySangha

    @SonnySangha

    Жыл бұрын

    Glad it was helpful! #PAPAFAM

  • @jingli9232
    @jingli9232 Жыл бұрын

    big shout out from China, genius!

  • @arthurderuelle5975
    @arthurderuelle5975 Жыл бұрын

    Sonny you're amazing ! Can you make a video for next images, turbopack and all details stuff ?

  • @shoukathennadesigns5135
    @shoukathennadesigns5135 Жыл бұрын

    Just amazing 👏

  • @tutorialinaminute4060
    @tutorialinaminute4060 Жыл бұрын

    This is the best next js -13 tutorial on KZread

  • @SonnySangha

    @SonnySangha

    Жыл бұрын

    LETS GO DUDE!!

  • @programmingwithnit5308
    @programmingwithnit5308 Жыл бұрын

    Thank you 🙏🙏. Good explain

  • @alhdrinskie
    @alhdrinskie Жыл бұрын

    This man is legend

  • @mohammedshurafa
    @mohammedshurafa Жыл бұрын

    Thanks, Sonny you are amazing ;) 🤩

  • @muhammademail5824
    @muhammademail5824 Жыл бұрын

    Best channel Sonny 💯💯💯💯💯

  • @belowsurfacemedia
    @belowsurfacemedia Жыл бұрын

    thanks a lot for this!!

  • @rockbelleh6237
    @rockbelleh6237 Жыл бұрын

    Papa Fam all the way yoooo Guyzzzz

  • @jasonhoi85
    @jasonhoi85 Жыл бұрын

    I noticed that the room light change from day to night, thanks for your hard work!

  • @amrindraouk3440
    @amrindraouk3440 Жыл бұрын

    Sonny could read my mind 😂 can’t wait man

  • @nightrider1413
    @nightrider1413 Жыл бұрын

    Amazing video sonny really well doe. I'm new into TS and do you know how we can fix 14:13? The TodoList in the future?

  • @farrukhahmad1430
    @farrukhahmad1430 Жыл бұрын

    Thanks for sharing the valuable knowledge.

  • @KaySchneider
    @KaySchneider Жыл бұрын

    Thanks for the Video

  • @davidhwang.asher.Jr1225
    @davidhwang.asher.Jr1225 Жыл бұрын

    Good contents, I've reviewed lots of contents on KZread to understand differences in between 12 and 13. this is the best. Thanks Sonny.