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

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.

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!

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.

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.

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

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.

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 !

Just tried building this a second time and its much much easier with the new sanity.

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

TypeError: Cannot read properties of undefined (reading 'call') Im getting this error when i load the studio site plz help

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

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

I keep getting an error when I run npm run build. I am getting an error message of 'Post' refers to a value, but is being used as a type here. Did you mean 'typeof Post'? I seem to be getting a lot of errors when trying to build out the app. Any recommendations. Thanks

for those of you getting SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () while trying to get access to studio export StudioPage as an arrow function This worked for me. const StudioPage = () => {} export default StudioPage

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!

**IMPORTANT** - What i've been looking for - how to structure images using RichTextComponents - 2:10:42 Building the Rich Text Components Component 26:30 - sanity config name and title 39:20 - Theming for sanity (branding the interface) 40:05 - Sonny says you can make the interface completely bespoke ^ Reach - 1:23:11

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.

After watching your videos, I have become a big fan of Sanity! GROQ in my opinion is much easier than say GraphQL. It would be good to see a tutorial on an app that uses user authentication to connect to Sanity and allows for a user Profile/Dashboard with user info and say listings if it's a marketplace. There seems to be a lot of adapters for other databases or CMS's but not much support for Sanity and Next-Auth.

Watching from kenya

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

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

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

Enjoying and watching this session right through Zambia😎😎

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

Thanks for hooking us up sonny

I`m getting this error( Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'call') ) when I try localhost:3000/studio

You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

37:03 yeah man, it's so damn powerful, thanks you for teaching us all this content. 🔥

I am getting this error: "Error: Hydration failed because the initial UI does not match what was rendered on the server." Not so sure if there is a file that I missed to fix. This is when I launch localhost:3000/studio

Error: Unable to load preview as you're not logged in..there is a cookie issue, something related to onPublicAccessOnly(), because I'm logged in to the sanity studio..if I comment onPublicAccessOnly funtion then it works but render only published documents from sanity...

help..... /app/(user)page.tsx when I import { previewData } from 'next/headers', an error says previewData is not exist...

Amazing! I am building along and love this!

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.

Damn boiii! I love this guy's vibe.

preview mode does not work with previewData() now.Need help on this if you are able to. Wanted to check how to implement if i am on preview mode or not

I am junior front-end developer and to be honest , Sanity v3, is not easy to learn for me (this video has first video about Sanity v3, that I saw it).

good evening man I've been following your work for a month here in Brazil very good, but I noticed that this last video has no subtitles, can you put it please, it helps me a lot, because I can translate the subtitles and understand everything, thank you, congratulations for the excellent work

why scroll restoration is not happening??????

Finally complate this after 1.5 month but feels like I learn many things :) Thanks buddy!

when trying to set up preview mode I get the error module "next/headers" has no exported module previewData in the page.tsx file.

You are a real Boss. Highly appreciate your work.

I've been using Next.js for about a year or two now, and this is the first video I've watched where Server Side Rendering and caching finally clicked for me. A masterclass. You've definetely earned a sub out of me man.

I have a weird problem. "._createAt" works to grab using groq, and I can show the entire post content and it work and shows the ._createAt. But as soon as I try to use post._createAt it will return undefined and cant turn it to a date with toLocaleDateString or moment.js. So I dont quite understand the problem.

Yo guyz....PAPA FAM all the way much love 😍😍😍😍😍

Module '"next/headers"' has no exported member 'previewData'. I am getting this error while importing previewData in (user)/page.tsx. Please help me🤞🤞

this tut is just insanity

How many hours did this take you to make before the tutorial?

we flying, love it ahahahha

I'm having trouble when trying to enter to /studio :( Failed to compile ./node_modules/@sanity/ui/dist/index.esm.js Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (61:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. I've already tried running it again with 'npm run dev' again and also 'npm i @sanity/ui' - the error's still there. Anyone else?

You and I have the same taste in color. I love that orange-yellow against a dark gray. Check out the vs-code theme "sunset."

awesome project, looking forward to more web3 projects with next13

Getting this error after even installing @sanity/ui... TypeError: Cannot read properties of undefined (reading 'call')

The image loading is not fast in mobile., it feels buggy. Any solution???

⚠Guys how big is your .next folder please?⚠

sir plz make project with next js and firebase. because if we made application by sanity for our clients then , it will be very costly because Sanity has a very limited api calls per month.

I have never seen a man who talks as much as you in my brother life.

*Content of [types.d.ts] file:* type Base = { createdAt: string; _id: string; _rev: string; _type: string; _updatedAt: string; }; interface Post extends Base { author: Author; body: Block[]; categories: Category[]; mainImage: Image; slug: Slug; title: string; description: string; } interface Author extends Base { bio: Block[]; image: Image; name: string; slug: Slug; } interface Image { _type: "image"; asset: Reference; } interface Reference { _ref: string; _type: "reference"; } interface Slug { _type: "slug"; current: string; } interface Block { _key: string; _type: "block"; children: Span[]; markDefs: any[]; style: "normal" | "h1" | "h2" | "h3" | "h4" | "blockquote"; } interface Span { _key: string; _type: "span"; marks: string[]; text: string; } interface Category extends Base { description: string; title: string; } interface MainImage { _type: "image"; asset: Reference; } interface Title { _type: "string"; current: string; }

when I grow up I want to be like you 🤯

Hey guys! How can we custom the preview in getDefaultDocumentNode if I want to show the preview per post?

Smashed for such good content!

Great content, bro!👍👍👍 You are just a gem on

Amazing tutorial! Thanks🖤

Sanity v3 is awesome!

Hi Sonny, i'm following your tutorials and learning a lot, i'm struggling hard to make the rich text component to work, all the code is correct but i'm getting an error on this line: where vscode underlines the components property with red and the error is what follows "React components to use for rendering Type '{ types: { image: ({ value }: any) => JSX.Element; list: { bullet: ({ children }: any) => JSX.Element; number: ({ children }: any) => JSX.Element; }; block: { h1: ({ children }: any) => JSX.Element; h2: ({ children }: any) => JSX.Element; h3: ({ children }: any) => JSX.Element; h4: ({ children }: any) => JSX.Element...' is not assignable to type 'Partial'. Types of property 'types' are incompatible. Type '{ image: ({ value }: any) => JSX.Element; list: { bullet: ({ children }: any) => JSX.Element; number: ({ children }: any) => JSX.Element; }; block: { h1: ({ children }: any) => JSX.Element; h2: ({ children }: any) => JSX.Element; h3: ({ children }: any) => JSX.Element; h4: ({ children }: any) => JSX.Element; blockqu...' is not assignable to type 'Record'. Property 'list' is incompatible with index signature. Type '{ bullet: ({ children }: any) => JSX.Element; number: ({ children }: any) => JSX.Element; }' is not assignable to type 'PortableTextTypeComponent | undefined'.ts(2322) react-portable-text.d.ts(167, 3): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & PortableTextProps'" the blog still works but the bulleted list is not working, not showing the bullets and without indentantion, can you please help? Thanks in advance!

on 33:02 i am getting an error saying like this and i couldnt find the fix help guys ./node_modules/@sanity/ui/dist/index.esm.js Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (61:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Having a lot of trouble with the PreviewSuspense component. Spend hours trying to debug it bug no luck so far (timestamp: 1:18:10)

Yo sonny please can you make a react native app that is fully functional Teaching us authentication ,roles such as admin and user identification , Cauz most of your videos don’t cover these things especially the role identification

So before embarking on this project, I'd like to know how many people actually got this thing up and running and deployed w/o some glaring show stopper problem.

Great vid! One thought though, I wish you didn't need to set live preview mode via the URL. I can imaging my clients forgetting to do this. Is it possible to detect if a user is logged into the admin screen from a non-admin page? That way you could have live preview on by default (and maybe provide some UI to turn if off).

watched it from Victoria, BC, Canada

there was an concept you didn't mention it the dynamic head tag in the head.tsx file

I wonder why I keep getting a lot of this kind of errors "TypeError: Cannot read properties of null (reading 'map')" , "TypeError: Cannot read properties of undefined (reading 'startsWith')" Anybody?

Big up Man LIKE SONNY!!!

Wow, thank you so much, what a great video tutorial. 🤯

so in stead of typescript im using javascript, still using next and tailwind and sanity, but the problem I've run into is that the posts.config file is giving sanity an error, I was wondering if you or anyone would be familiar with this type of error and if you have a workaround this, all the answers I get is to just get rid of the postcss.config file entirely but that will get screw everything up because tailwind needs it. thank you !

somehow when i select localhost:3000/studio i get a 404 page. Followed all the steps any suggestion

How could I implement the preview mode on the main page of the post?

really nice video. I had fun doing it. But it took me 6 hours :D

Hi! I keep getting this error Cannot find module '@sanity/ui' Keep getting this when I try to go to the /studio Unhandled Runtime Error Error: Cannot find module '@sanity/ui' The loader shows for a sec and the this happens. The studio worked for a couple of hours and then this started to happen. I tried installing @sanity/ui and nothing. Does anyone have a hint on how to solve this?

if you are watching in 2023 you dont need to figure about embedding sanity and all and next sanity just install latest next sanity thats all

Hi Sonny awesome tut, can u please help me debug why using previewData throws Server Error Error: Invariant: Method expects to have requestAsyncStorage, none available

Great content!

For some reason after uploading it to Vercel I can’t access studio anymore on phone and on the pc version of safari

Can’t really switch from pages to app directory yet so would like to see some tutorials with sanity v3 using pages directory.

Hi Sonny🚀, thank you so much in advance for the great video❤. Everything is working great, but I would like to ask for your advice. How do I generate the original head with meta and post title. I would need to improve SEO for google search engine. Thanks again and I look forward to more awesome videos! JD

On minute 2:00:14 you give type of Post but I'm getting erro Post' refers to a value, but is being used as a type here ts(2749) please help me

Damn good content Sonny as always...but Sonny how can I seperate my comment section for each blog post..any advice?

Thank you! This was so helpful! Question: How do you render an array of images (aka gallery) into individual divs in a post?

how do i track login activities in extjs with sanity???

any idea on how to add code blocks?

Can u make app in next js 13 with only tailwind and typescript? Without sanity etc

This is an awesome build! Thanks so much. Everything works like a charm! Except I still needed to import types from the typings list, why is that?

Please sonny use firebase and next js 13 with tailwind please thanks in advance sir.

It was easy before. Now it seems like really complex. Development should be made easy after the update, here they made it complex. Embedding the sanity studio inside the next js project folder ain't working for me. It keeps throwing error. The current Beta version is really problematic.

I am starting this now... and would rate for you guys..

ClientSideRoute: 1:44:30

has anyone experienced this error? I have files exactly like Sonny and cant figure it out.....error - (admin)/studio/[[...index]]/page.tsx doesn't have a root layout

At - 2:22:52 - I am facing an error when , trying to build using - "npm run build". The error says ---> "Generating static pages (3/5)TypeError: Cannot read properties of null (reading 'mainImage') at Post (D:\2022 - Complete Web Development Bootcamp\Web Development\Project 1 - BLOG\personal-blog-aayush\.next\server\app\(user)\post\[slug]\page.js:662:69)" Somebody please help.

Hi, very nice video! May I ask you what extension you use for folder icons?