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

[@SonnySangha]

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

[@wintersijan]

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

[@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]

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]

@@freespeech515 So, the problem comes from MUI.

[@ronellcrizvillamil8105]

why next link ruin/destroy display flex?

[@alicodes22]

Les goooo,SICK content inbound!!

[@dolapoajayi2156]

Im waiting for your own tutorial with updates next13😁🙏

[@alicodes22]

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

[@dolapoajayi2156]

@@alicodes22 let’s get it💪

[@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]

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]

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

[@dalestewart]

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

[@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]

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

[@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]

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]

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]

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]

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

[@jasonhoi85]

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

[@ShreyashKore]

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

[@tiktokvibes9767]

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

[@MichaelCGatesMusic]

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

[@neilblack1784]

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

[@pdovhomilja]

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

[@RicardoSantos-lj4yz]

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

[@andreaskarz]

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

[@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]

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

[@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]

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

[@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]

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

[@jamessimon4804]

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

[@linushahs1117]

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

[@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]

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]

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

[@andreitalpa5676]

So clear and concise, you are the man!

[@SonnySangha]

Thank you so much!!!

[@user-ru9bc4qt8g]

This tutorial is a masterpiece, thank you.

[@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]

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

[@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]

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

[@ibrahimasarr1180]

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

[@duoduo618]

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

[@kw5340415]

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

[@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]

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

[@codewithguillaume]

I was waiting for this since… 4 days 😂

[@rizkiaprita]

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

[@nicolasfelipe1]

Awesome tutorial, thanks.

[@thehangover4985]

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

[@zCr3ative]

Amazing explanation, thank you

[@eddited7543]

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

[@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]

Turbopack and other updates please, keep smashing it 👊

[@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]

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

[@mobix25]

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

[@mattlaws6157]

Another great tutorial, thanks Sonny

[@connect.tehseen]

I really appreciate your efforts dude💕

[@kinax2]

Thank you man for this amazing powerful video!

[@tahmidziko]

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

[@mohamednafil8983]

Great tutorial and easy to understand

[@igogs7095]

Thank you! Awesome tutorial

[@13zebras]

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

[@PattyBeautCode]

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

[@pan_josef]

Awesome video. Thank you!

[@abhidadhaniya5701]

This amazing guy deserves 1M+ subscribers ❤

[@Pablo-rk4db]

Amazing overview 🎉

[@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]

Great tutorial! Appreciate it!

[@abhinavdhama3014]

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

[@riskitall7421]

Thanks bro for the tut

[@kosrekedits673]

Yoooooo So much excited for this

[@emilygarcia2094]

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

[@SonnySangha]

Right!!

[@gurvirbaraich2028]

Amazing brother.

[@xidnebwoz]

Too clear explanation, very easy to understand

[@mohammadmoaid5282]

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]

well explained thank you

[@isagive]

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

[@DeineWebschmiede]

rly helpfull, amazing new features.

[@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]

great tutorial helped a lot!!!

[@dizaas7918]

Great work !!! ❤❤❤

[@mohammadhosseinmoradi2021]

It was very useful and fast. thanks.

[@sylvainguehria8928]

what a tutorial ! thank's a lot Sonny

[@JustMack]

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

[@csguru8211]

Great tutorial. Thanks a lot for making this.

[@Victor-wh9bs]

ThankU Sonny time to level up with NextJS 13

[@kabtamudegifie9795]

Amazing tutorial thanks!

[@SonnySangha]

Glad it was helpful! #PAPAFAM

[@jingli9232]

big shout out from China, genius!

[@arthurderuelle5975]

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

[@shoukathennadesigns5135]

Just amazing 👏

[@tutorialinaminute4060]

This is the best next js -13 tutorial on KZbin

[@SonnySangha]

LETS GO DUDE!!

[@programmingwithnit5308]

Thank you 🙏🙏. Good explain

[@alhdrinskie]

This man is legend

[@mohammedshurafa]

Thanks, Sonny you are amazing ;) 🤩

[@muhammademail5824]

Best channel Sonny 💯💯💯💯💯

[@belowsurfacemedia]

thanks a lot for this!!

[@rockbelleh6237]

Papa Fam all the way yoooo Guyzzzz

[@jasonhoi85]

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

[@amrindraouk3440]

Sonny could read my mind 😂 can’t wait man

[@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]

Thanks for sharing the valuable knowledge.

[@KaySchneider]

Thanks for the Video

[@davidhwang.asher.Jr1225]

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