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 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
? Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course 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