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

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course

📩 Want coding problems (with solutions!) delivered to your inbox daily? https://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? 🛠️
https://links.papareact.com/github

👇🏻FOLLOW ME HERE:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord
Newsletter: https://links.papareact.com/newsletter

💰 WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPA Merch: https://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