🔴 Let’s build a BLOG with Next.js 13 (Sanity v3, TypeScript, Tailwind CSS, Auth, CMS, Preview Mode)
154.6 هزار بار بازدید -
2 سال پیش
-
I asked Sanity to hook
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/dailycoding...
📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycoding...
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
🚨 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/dailycoding...
📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycoding...
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
2 سال پیش
در تاریخ 1401/09/23 منتشر شده
است.
154,626
بـار بازدید شده