🔴 Let’s build a BLOG with Next.js 13 (Sanity v3, TypeScript, Tailwind CSS, Auth, CMS, Preview Mode)

I asked Sanity to hook up some free stuff for this video... They made a custom 🔥 boosted free plan 👉 https://www.sanity.io/sonny 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🫂 Join my Community, "University of Code" for FREE: https://www.universityofcode.com 🔴 LOOKING FOR THE CODE? 🛠️ https://links.papareact.com/github Join me as I build a MODERN Cutting-Edge blog site with Next.js 13. You'll learn the following in this build: 👉 How to handle Dynamic data (SSR alternative in Next.js 13) 👉 How to handle Static data with updates using GenerateStaticParams (ISR alternative in Next.js 13) 👉 How to enable Preview Mode in Next.js 13 to dynamically preview Sanity.io content prior to publishing it! 👉 How to build a fully responsive blog site with Tailwind CSS 👉 Leverage the power of Server components in Next.js 13 (and how to use client components alongside them correctly!) 👉 How to use the new App folder structure in Next.js 13! 👉 Dynamic page routing in Next.js 13 👉 How to use the GROQ query language to fetch the content from the Sanity Content Platform 👉 How to embed, host & customize the Sanity studio on the website itself whilst protecting it via Sanity Authentication 👉 How to use TypeScript to reduce the overall number of Bugs and Errors 👉 How to deploy the final build on Vercel! So Much More! 🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 👇🏻 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 💰 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:48 Build Showcase 04:07 Sanity Sponsorship 06:24 Zero to Full Stack Hero & University of Code 07:26 Build Tech 08:48 Setting Up Next.js 13 & Tailwind CSS 12:00 Implementing Next.js 13 Features 16:32 Setting up Sanity.io 37:25 Customising Sanity Embedded Studio 51:38 Implementing Route Groups using Next.js 13 56:49 Building the Header Component 1:02:30 Building the Banner Component 1:05:49 Implementing Preview Mode 1:22:12 Creating the Blog List Component 1:23:20 Setting up Type Definitions 1:25:20 Building the Blog List Component (1/2) 1:40:06 Implementing Line Clamp for Tailwind CSS 1:41:02 Building the Blog List Component (2/2) 1:49:58 Upgrading the Preview Mode 1:55:54 Building the Blog Article Content Page 2:09:32 Implementing React Portable Text Plugin 2:10:42 Building the Rich Text Components Component 2:20:32 Final Build Demo 2:21:19 Making the Blog Site Faster with Next.js 13 2:34:23 Deploying to Vercel 2:39:38 Final Deployed Build Demo 2:43:43 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes. #nextjs13 #reactjs #typescript #sanity #cms #tailwindcss #nextjs #tutorial #javascript