π΄ 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