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

🔴 LOOKING FOR THE CODE? 🛠️

👉 How to build a fully responsive blog site with Tailwind CSS
👉 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?

👇🏻 FOLLOW ME HERE:

💰 WANT TO SUPPORT THE CHANNEL?

🕐 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
37:25 Customising Sanity Embedded Studio
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: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

[marioskanellopoulos]

Never expected anything less from you Sonny. Joining this community and watching your builds made me wanna become even better. You rock dude. Much appreciation and respect for all the hard work you re putting in. 2023 will be the year we will all remember for years to come.

[TheGaoNan]

Sonny, just wanted to let you know I've been watching your videos from the beginning and you are definitely my favorite youtuber in the tech space, love the way you are teaching, the great energy and that you always teach the latests most recent technologies.

You've really helped me become a better developer and exceed in my career.

Thank you for that, and keep up the great work!

[PattyBeautCode]

Thank you for the tutorial !The combination with NextJS 13 and Sanity V3 is THE NEXT LEVEL PLAY !!!!
Plus +++ The preview mode is awesome and server side rendering is incredible !!
The build is smooth !!!! Looking forward more with NEXTJS + Sanity V3 !

[nikolayt.]

For anyone starting the project around December 2023 you may want to simply follow instructions provided in npm next-sanity (v.7.0.1) as the current project runs on version 3+ which makes setting up somewhat of a pain

[carlesgalino]

That tutorial step by step is actually dope. Congrats and thank you Sonny

[iLuliBest]

Best tutorial I've ever seen, in its entirety. Most of all, it helped me integrate Sanity, all the other tutorials I followed brought me error after error and prevented me from continuing my project. Thank you very much for the material you provide Sonny, it's of great help to many.

[derekprieur]

Another great video packed with new tech, appreciate all the work you put into these sonny! 🔥

[robbiecrenshaw]

Wow this is a great video, I was literally just starting a new project using the new app dir, and was debating using Sanity. Now im building my project with Sanity! TY for such a great video!

[abhinandangautam]

This is really amazing sunny.
Great experience of learning Next js 13 + Sanity v3 project
😍😍

[emmaaberg]

To the person who asked about sitemaps: next-sitemaps works if you make the pages static like he shows with the "generateStaticParams()" at around 2:20:00.

[ElNicopewpew]

Great tutorial as always! Ive got a wish for a future tut, a pagebuilder with sanity and next13! Mostly because im almost done with mine, and would like to see if Ive done it the correct way x) Only thing im missing is a language selector and PREVIEW. Preview is hella hard to get working with this modular setup of mine.

[CasualAnouar]

That was a smooth build !! thank you @sunny ... much love <3

[vander_eft]

Going through this on 5/30 and Sanity has made the first 30mins of setup basically done out of the box!

[luckychanda]

Enjoying and watching this session right through Zambia😎😎

[FN-zglj]

finally completed a project without endless bugs! Still having a bit of an issue with projectId upon deployment but I can work with that for now.

[Archibong.samuel]

Sonny, you are an eye opener!
You awakened a programming mage.

[dalestewart]

It was certainly a fantastic experience building my own personal BLOG with Next.js 13

[abduwahid]

Guys, congrats to you Sonny and also Jay on hitting 200k subcribers!! 💪🧑‍🎓Let's GO!!

[wiseGrant]

Amazing! I am building along and love this!

[kevinbodi]

For issues with 'previewData()' and previewMode. Here's the issue:
It seems that Next has replaced 'previewMode' with something called 'draftMode', which 'next-sanity' doesn't have any documentation on, yet.

Here's the 3 ways you can solve this:
1. Read Next docs for the new draft mode and figure it yourself.
2. Skip the preview-step for now and wait for 'next-sanity' to be updated with new documentation and features. (my personal choice)
3. Downgrade to next '13.2.x' and it should work.