See Sanity in action 👀 Join us for a live product demo + Q&A →

Troubleshooting reference resolution in a Next.js web app and Studio Vision

6 replies
Last updated: Feb 22, 2023
Hello. I am working on creating blog with Nextjs13. I am following these steps for
I have made sure that I follow and recheck all the steps. but i keep getting 404 error when i try to run the studio on localhost:3000/studio. Can anyone help.
Feb 17, 2023, 10:14 AM
Can you share your code?
Feb 17, 2023, 5:35 PM
Sorry for the late reply. But i have been stuck with something else and was hoping if i can get any help.I am fetching a page from Sanity. Everything works fine. But I am getting a build error.

Error occurred prerendering page "/post/[slug]". Read more: <>
TypeError: Cannot read properties of undefined (reading 'title')
Feb 22, 2023, 8:23 AM
My code.

import { PortableText } from '@portabletext/react'

import groq from 'groq'

import client from '../../client'

_interface_ post {

title: _string_

name: _string_

body: []


_interface_ postProps {

post: post


_const_ Post = ({ _post_ }: postProps) _=&gt;_ {

_const_ { title = 'Missing title', name = 'Missing name', body = [] } = _post_

return (



display: 'flex',

flexDirection: 'column',

justifyContent: 'center',

alignContent: 'center',

height: '100vh',

textAlign: 'center',

backgroundColor: 'black',

color: 'ghostwhite',





&lt;span&gt;By {name}&lt;/span&gt;

&lt;_PortableText_ value={body} /&gt;





`_const_ query = groq`*[_type == "post" &amp;&amp; slug.current == $slug][0]{`


"name": author-&gt;name,


export async _function_ getStaticPaths() {
`_const_ paths = await client.fetch(groq`*[_type == "post" &amp;&amp; defined(slug.current)][].slug.current`)`

return {

paths: _string_) _=&gt;_ ({ params: { slug } })),

fallback: true,



export async _function_ getStaticProps(_context_: { params: { slug: _string_ } }) {

_const_ { slug = '' } = _context_.params

_const_ post = await client.fetch(query, { slug })


if (!post) return { props: null, notFound: true }


return {

props: {





export default Post
Feb 22, 2023, 8:25 AM
I had a similar issue with this. The issue is the the page tries to render before the prop is available. You should use conditionals anywhere you are using a prop that is passed in from an api. For instance I had product passed and I did
Feb 22, 2023, 11:53 AM
You could also do
{ title.length &gt; 0 &amp;&amp; restOfCode... }
Feb 22, 2023, 12:03 PM
Thank you. Yes, I did this an hour ago and now its working fine. 🙏
Feb 22, 2023, 12:04 PM – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in