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

Sonny Sangha

I asked Sanity to hook up some free stuff for this video… They made a custom 🔥 boosted free plan 👉 https://www.sanity.io/sonny

🚨 Upgrade your coding skills by joining the world’s BEST developer community & course “Zero to Full Stack Hero”: https://www.papareact.com/course

📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode

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!

🔴 LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github

❓ Was this too difficult?
Watch my REACT BASICS 101 class for FREE with 1 month FREE Skillshare access (First 1000 people) 👉 https://skl.sh/2Srfwuf

🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up to the PAPA 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 🔥.

#nextjs13 #reactjs #typescript #sanity #cms #tailwindcss #nextjs #tutorial #javascript