Troubleshooting reference resolution in a Next.js web app and Studio Vision
6 replies
Last updated: Feb 22, 2023
F
Hello. I am working on creating blog with Nextjs13. I am following these steps for
next-sanity/studioI 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
F
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
F
My code.
`_const_ query = groq`*[_type == "post" && slug.current == $slug][0]{`
`_const_ paths = await client.fetch(groq`*[_type == "post" && defined(slug.current)][].slug.current`)`
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" && slug.current == $slug][0]{`
title,
"name": author->name,
body`}``
export async _function_ getStaticPaths() {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
K
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
K
You could also do
{ title.length > 0 && restOfCode... }Feb 22, 2023, 12:03 PM
F
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.