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