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.
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
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.
In fact, if you test Preview mode in build, it will work. What happens is that for some reason, in dev it is resetting the cookie when reloading the page. But in production this won't happen :)
@@mateusmenesesDev How can I go with option 2 since later on the usePreview func is being used to render the bloglist, what can be done? please assist me
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.
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 !
This has changed a lot, bro. So now Sanity and Next know that we are going to embed them, it automatically prompts you accordingly and embeds sanity in the Next JS repo. Just tells me how this stack is evolving into something better and better.
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.
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
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.
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
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.
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!
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.
**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
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...
@@alexandtmuntean8540 I'll try that out and see what happens. Thanks for the reply. I've been banging my head off the wall trying to figure out what I've messed up lol
@@alexandtmuntean8540I thought my preview wasn't working for another reason and it's been my headache for two days now. Now it's working. Thank you so much for this!
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.
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
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.
@@SonnySangha Quick Question: I want to implement a search bar to my home page. Id imagine you do this logic client side to limit requests to the server right? Would it be as simple as placing a filter on our array of Posts?
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?
If you are using yarn add this to package.json.: "resolutions": { "@sanity/ui": "1.0.5" } If using npm add this to package.json.: "overrides": { "@sanity/ui": "1.0.5" } Then you need to delete the lock file, delete node_modules and install again. This fixed it for me. (It's seems to be a bug that the engineering team is now aware of)
@@midberg thank you so SO MUCH! It worked for me :') I deleted "@sanity/ui": "1.0.5" from "dependencies" on package.json because if I didn't, when I added the "overrides" it'd throw me an "npm ERR! Override for @sanity/ui@^1.0.6 conflicts with direct dependency"
@@midberg He thanks for help. I'm not programmer, would you please tell me where to find lock file to delete and how to install both of them again. Really appericiated.
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
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).
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!
Check the formatting in your RichTextComponents.tsx. On Sonny's screen it visually looks like 'list: ' and 'block:' are inside of 'types' because of the way 'types' is closed on screen but both of those should be OUTSIDE of types. That solved the issue for me, anyway. Good luck!
I'm trying to figure it out too :( want to preview a single post. I keep getting the following error: TypeError: useReducer only works in Client Components. Add the "use client" directive at the top of the file to use it.
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.
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
@@chiubaca If you downgrade to next '13.2.x' it should work. It seems that Next had replaced 'previewMode' with something called 'draftMode', which 'next-sanity' doesn't have any documentation on yet.
@@vinkim2802 I followed this recipe for a larger service I'm creating, which is still not finished. But the preview here isn't essential, so you can just skip it. If you want to do it anyways, search for the npm package called next-sanity and read their documentation. They have introduced a proper way to create previews on the newest versions of next and Sanity just a few weeks ago.
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.
@@maasondelgado8001 one of them mentioned adding an "override" prompt to the package.json, erasing the package lock and the node_modules folder, and reinstalling them. Apparently, some issue with the sanity package that the devs are aware of. It worked for me.
I'm trying to figure it out too :( I keep getting the following error: TypeError: useReducer only works in Client Components. Add the "use client" directive at the top of the file to use it.
Hey Sonny. Gotta quick question. when working on the studio theme, Where you have the back to website and the left arrow, All that is fine but all that area is transparent and behind it is my logo and navbar for my website. I am doing an implementation of my existing site. Any clues on how to get around this? Thanks
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.
It worked for me. Many others didn't and half way through there would be errors. But this was the first Sanity/Next tutorial I found that actually worked with maybe some small problem solving here n there
Tried it. Game stopper just getting the installation. npx create-next-app -e with-tailwindcss no longer works. Tried the listed current one on tailwind and the folder structure and files are different. Basic setup in this tut is already deprecated.
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?
@@maasondelgado8001 If you are using yarn add this to package.json.: "resolutions": { "@sanity/ui": "1.0.5" } If using npm add this to package.json.: "overrides": { "@sanity/ui": "1.0.5" } Then you need to delete the lock file, delete node_modules and install again. This fixed it for me. (It's seems to be a bug that the engineering team is now aware of)
@@wanilyas3073 He thanks for help. I'm not programmer, would you please tell me where to find lock file to delete and how to install both of them again. Really appericiated.
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?
console.log the Array you are trying to map, before you map it, and see what is logged, this comes if the variable is undefined or null, if so add a null check before mapping and it should be resolved
tailwind is not working in my project . I tried to install the files again and gain but nothing happened. Tailwind is still not working. Please help me
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 !
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
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.
After running npm build and npm run start... When I change something on the sanity database it doesn't show on the blog site and new blogs don't show up
Hi Sonny, excellent video. I have 1 issue with sanity at present, i can't change the theme, it is giving me a parse error with regards to colors. Could anyone please advise. I have copied the code exactly 😣
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.
Hell yeah dude!!! Love this energy #PAPAFAM
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
God bless
Thank you
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!
Wow thank you so much I appreciate you!!! 🙏🏽🙏🏽
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.
In fact, if you test Preview mode in build, it will work.
What happens is that for some reason, in dev it is resetting the cookie when reloading the page. But in production this won't happen :)
Even if i go with 2nd option, later on the usePreview func is being used to render the bloglist, what can be done? please assist me
@@mateusmenesesDev How can I go with option 2 since later on the usePreview func is being used to render the bloglist, what can be done? please assist me
I am staying with the option 2. As i am at that part now
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!
What is outdated in this course?
Just tried building this a second time and its much much easier with the new sanity.
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 !
This has changed a lot, bro.
So now Sanity and Next know that we are going to embed them, it automatically prompts you accordingly and embeds sanity in the Next JS repo.
Just tells me how this stack is evolving into something better and better.
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.
How did u fixed the problem with
import {visionTool} from '@sanity/vision'
in sanity.config.ts, im getting an import error ):
@@sh44ko58 sorry I just saw ur comment, did u solved it? I haven't got that error
@@iLuliBest ya i solved it, i had the problem with the old version
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
Did you found any way around it.. i am also getting build time error with 'Post' and PortableReact 'component' prop
Did you find a solution to Post referers to a value?
@@mdsf28 Did you find a solution to the build time error with Post?
@@healthy6844 I used ':any' type wherever Post type was used...
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
Might I add to this to also do this to both the `head.tsx` and `loading.tsx`.
@Justin Diaz@@Saradomin65 Thanks
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
I have the same error: TypeError: Cannot read properties of undefined (reading 'call')
have u got any solution please let me know
@@terizas7520 have u got any solution please let me know
help..... /app/(user)page.tsx when I import { previewData } from 'next/headers', an error says previewData is not exist...
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.
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
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.
when trying to set up preview mode I get the error module "next/headers" has no exported module previewData in the page.tsx file.
Watching from kenya
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!
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.
crazy how much the setup has changed, much easier now though. Just follow Sanity's nextjs guide
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).
That tutorial step by step is actually dope. Congrats and thank you Sonny
**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
why scroll restoration is not happening??????
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
make sure the Header referenced in layout.tsx is inside the body
Guys, congrats to you Sonny and also Jay on hitting 200k subcribers!! 💪🧑🎓Let's GO!!
I`m getting this error( Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'call') ) when I try localhost:3000/studio
Getting the same error. Any solutions to this?
Unhandled Runtime Error
TypeError: originalFactory is undefined
same :/
Got the same error..
For me it is working fine only after I do yarn build and yarn start - so only for production build. I don't know why.
@@ukaszkonatowski4661 Tried this. Did not work for me tho. Thanks for the idea.
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...
This is the issue that I keep running into as well. It's been bugging me for a minute.
@@zerokool280 allow third-party cookies in the browser settings..that worked for me
@@alexandtmuntean8540 I'll try that out and see what happens. Thanks for the reply. I've been banging my head off the wall trying to figure out what I've messed up lol
@@alexandtmuntean8540 - UPDATE - it worked and I now have no issues! Thank you so much!
@@alexandtmuntean8540I thought my preview wasn't working for another reason and it's been my headache for two days now. Now it's working. Thank you so much for this!
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.
it should be "_createdAt" by default
37:03 yeah man, it's so damn powerful, thanks you for teaching us all this content. 🔥
This is really amazing sunny.
Great experience of learning Next js 13 + Sanity v3 project
😍😍
The image loading is not fast in mobile., it feels buggy. Any solution???
Enjoying and watching this session right through Zambia😎😎
It was certainly a fantastic experience building my own personal BLOG with Next.js 13
Another great video packed with new tech, appreciate all the work you put into these sonny! 🔥
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.
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
Damn boiii!
I love this guy's vibe.
That was a smooth build !! thank you @sunny ... much love
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.
Thank you so much for the support!!!
@@SonnySangha Quick Question: I want to implement a search bar to my home page. Id imagine you do this logic client side to limit requests to the server right? Would it be as simple as placing a filter on our array of Posts?
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?
If you are using yarn add this to package.json.:
"resolutions": {
"@sanity/ui": "1.0.5"
}
If using npm add this to package.json.:
"overrides": {
"@sanity/ui": "1.0.5"
}
Then you need to delete the lock file, delete node_modules and install again.
This fixed it for me. (It's seems to be a bug that the engineering team is now aware of)
@@midberg thank you so SO MUCH! It worked for me :')
I deleted "@sanity/ui": "1.0.5" from "dependencies" on package.json because if I didn't, when I added the "overrides" it'd throw me an "npm ERR! Override for @sanity/ui@^1.0.6 conflicts with direct dependency"
@@midberg Thank you!
@@midberg He thanks for help. I'm not programmer, would you please tell me where to find lock file to delete and how to install both of them again. Really appericiated.
Finally complate this after 1.5 month but feels like I learn many things :) Thanks buddy!
Bro can you share your repo please
@kunalchauthan5780
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
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).
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."
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!
Check the formatting in your RichTextComponents.tsx. On Sonny's screen it visually looks like 'list: ' and 'block:' are inside of 'types' because of the way 'types' is closed on screen but both of those should be OUTSIDE of types. That solved the issue for me, anyway. Good luck!
Getting this error after even installing @sanity/ui...
TypeError: Cannot read properties of undefined (reading 'call')
the same, sb got an answ?
Got the same issue. Using next 12 and the next 12 sanity code. Did you find the issue already? Please help
Hey guys! How can we custom the preview in getDefaultDocumentNode if I want to show the preview per post?
I'm trying to figure it out too :( want to preview a single post.
I keep getting the following error:
TypeError: useReducer only works in Client Components. Add the "use client" directive at the top of the file to use it.
@@easydua Hi! How did you make that progress? Did you try add "use client" at the top of the file like recommended lol :) hope you can make it happen
@@lle5159 I had imported the wrong previewSuspence component 🤦🏻♂️
It’s working now 🤓
@@easydua Awesome! Can you also guide me on how to do that please?
How many hours did this take you to make before the tutorial?
3 This was live
You are a real Boss. Highly appreciate your work.
somehow when i select localhost:3000/studio i get a 404 page. Followed all the steps any suggestion
fixed it
@@philipc8705 how? i am getting module not found '@sanity/ui' even if i install it manually
please let me know how u fixed it
Basically re did all the steps from the beginning and found a few bugs
there was an concept you didn't mention it the dynamic head tag
in the head.tsx file
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.
Do you have any idea how much sanity charges after free version
any idea on how to add code blocks?
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
yeah getting this too. did you manange to figure this out?
@@chiubaca If you downgrade to next '13.2.x' it should work. It seems that Next had replaced 'previewMode' with something called 'draftMode', which 'next-sanity' doesn't have any documentation on yet.
@@kevinbodi7778 Did you ginish the whole project? I couldnt continue mine too, and im stucked for days.
@@vinkim2802 I followed this recipe for a larger service I'm creating, which is still not finished. But the preview here isn't essential, so you can just skip it. If you want to do it anyways, search for the npm package called next-sanity and read their documentation. They have introduced a proper way to create previews on the newest versions of next and Sanity just a few weeks ago.
@@kevin_bodi Thanks Kevin!
For some reason after uploading it to Vercel I can’t access studio anymore on phone and on the pc version of safari
Having a lot of trouble with the PreviewSuspense component. Spend hours trying to debug it bug no luck so far (timestamp: 1:18:10)
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.
Same. Nothing I tried helps. Lost here.
@@BarakAlmog same
@@maasondelgado8001 fixed it. Followed the suggestion in one of the other comments here. It worked.
@@BarakAlmog which one?
@@maasondelgado8001 one of them mentioned adding an "override" prompt to the package.json, erasing the package lock and the node_modules folder, and reinstalling them.
Apparently, some issue with the sanity package that the devs are aware of.
It worked for me.
Yo guyz....PAPA FAM all the way much love 😍😍😍😍😍
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
Yeah help us
i have same problem, how did you fix it
@raysahu please did you found why it happends
Import Post from typing
Thanks for hooking us up sonny
Any time brother!!
when I grow up I want to be like you 🤯
I have never seen a man who talks as much as you in my brother life.
how do i track login activities in extjs with sanity???
How could I implement the preview mode on the main page of the post?
I'm trying to figure it out too :(
I keep getting the following error:
TypeError: useReducer only works in Client Components. Add the "use client" directive at the top of the file to use it.
Damn good content Sonny as always...but Sonny how can I seperate my comment section for each blog post..any advice?
Hey Sonny. Gotta quick question. when working on the studio theme, Where you have the back to website and the left arrow, All that is fine but all that area is transparent and behind it is my logo and navbar for my website. I am doing an implementation of my existing site. Any clues on how to get around this?
Thanks
this tut is just insanity
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.
It worked for me. Many others didn't and half way through there would be errors. But this was the first Sanity/Next tutorial I found that actually worked with maybe some small problem solving here n there
Worked for me also, but I had some issues along the way.
Tried it. Game stopper just getting the installation. npx create-next-app -e with-tailwindcss no longer works. Tried the listed current one on tailwind and the folder structure and files are different. Basic setup in this tut is already deprecated.
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?
I have the same issue
@@maasondelgado8001
If you are using yarn add this to package.json.:
"resolutions": {
"@sanity/ui": "1.0.5"
}
If using npm add this to package.json.:
"overrides": {
"@sanity/ui": "1.0.5"
}
Then you need to delete the lock file, delete node_modules and install again.
This fixed it for me. (It's seems to be a bug that the engineering team is now aware of)
@@wanilyas3073 He thanks for help. I'm not programmer, would you please tell me where to find lock file to delete and how to install both of them again. Really appericiated.
@@Anup_x delete package.lock.json and node_module file...go edit package.json and then open terminal and run command npm install
@@wanilyas3073 Worked for me, thank you!
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?
console.log the Array you are trying to map, before you map it, and see what is logged, this comes if the variable is undefined or null, if so add a null check before mapping and it should be resolved
It's just means that you are not getting any value from from the variable you are trying to map...make sure your variable have data or not
@@aashishsinghal7331 Thank you
@@piyushyadav7764 Thank you
we flying, love it ahahahha
awesome project, looking forward to more web3 projects with next13
tailwind is not working in my project . I tried to install the files again and gain but nothing happened. Tailwind is still not working. Please help me
Thank you! This was so helpful! Question: How do you render an array of images (aka gallery) into individual divs in a post?
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 !
Create a tailwind.config inside the sanity folder
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
Great content, bro!👍👍👍
You are just a gem on
Can’t really switch from pages to app directory yet so would like to see some tutorials with sanity v3 using pages directory.
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?
watched it from Victoria, BC, Canada
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.
For me too!
Amazing tutorial! Thanks🖤
Please sonny use firebase and next js 13 with tailwind please thanks in advance sir.
*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;
}
Is it possible to preview the whole website ? instead of doing it component by component ?
Sanity v3 is awesome!
Smashed for such good content!
I'm getting the error when i'm trying to load localhost:3000/sanity
Unhandled Runtime Error
Error: CorsOriginError
Call Stack
getCurrentUser
node_modules\sanity\lib\index.esm.js (8:24)
async eval
node_modules\sanity\lib\index.esm.js (12:142)
What shall I do?
I wanted to check out your zero to hero course but the site is down...just a heads up. 😃👍
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
Can u make app in next js 13 with only tailwind and typescript? Without sanity etc
with any other backend solutions. without headless cms
After running npm build and npm run start... When I change something on the sanity database it doesn't show on the blog site and new blogs don't show up
Please help me! I can't see description when I type post.description. It just doesnt show
Wow, thank you so much, what a great video tutorial. 🤯
Hi Sonny, excellent video. I have 1 issue with sanity at present, i can't change the theme, it is giving me a parse error with regards to colors. Could anyone please advise. I have copied the code exactly 😣