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

🚨 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

πŸ“© Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

πŸ“© Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

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