✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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
next-sanity/studio
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: <https://nextjs.org/docs/messages/prerender-error>
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) _=>_ {

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

return (

<div

style={{

display: 'flex',

flexDirection: 'column',

justifyContent: 'center',

alignContent: 'center',

height: '100vh',

textAlign: 'center',

backgroundColor: 'black',

color: 'ghostwhite',

}}

>

<article>

<h1>{title}</h1>

<span>By {name}</span>

<_PortableText_ value={body} />

</article>

</div>

)

}

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

title,

"name": author->name,

body
`}``


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


return {

paths: paths.map((_slug_: _string_) _=>_ ({ params: { slug } })),

fallback: true,

}

}


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

_const_ { slug = '' } = _context_.params

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


console.log(post)

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

else

return {

props: {

post,

},

}

}

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
product?.productName
.
Feb 22, 2023, 11:53 AM
You could also do
{ title.length > 0 && 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

Sanity– build remarkable experiences at scale

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

Was this answer helpful?