Troubleshooting Next.js and Sanity integration, with issues outputting data

Hi! Im making my first project with Next.js and sanity and having issues with outputting the data. Ive written my getStaticProps:

export async function getStaticProps() {

const author = await sanityClient.fetch(getBioQuery);

return {props: {author}};

}

and I have my fetch query at the top:
`const getBioQuery =

*[_type == 'author']{

name,

bio,

'authorImage': image.asset->url

`}`;`

but when I use author.name for example,

<h1 className='text-3xl mb-8 uppercase font-thin'>{author.name}</h1>

Nothing is being output and no errors. Normally I stick console logs in functions to see whats being output but not even a ‘hello’ gets output in the getStaticProps function (which having never use next.js I don’t know if it would or not). I feel ridiculous asking this but I cant see for the life of me what I’ve done wrong or how to debug this issue. Thank You :)

try props.author

where do you mean? in the h1 as props.author.name? isn’t the line props: {author} assigning author to props?

your getstaticprops query returns an array of authors, not one single author

ohhh. so it does. I just looked at my code from doing it in just react and I was getting the data and only using the first one of the array and setting the author with use state by writing

.then((data) => setAuthor(data[0]))

. How do I do the equivalent with nextjs? Everything Ive tried gives me undefined.

well I suppose you just want a specific author instead of any author? This is something you do in groq, like

*[_type == "author" && _id == "foo"]{...}

. This will return a list of 1. So adding

[0]

to that query will give you a single result.

@Arjen I only have and ever will have one author for the site i’m building. I tied adding the [0] after the query and get an error:

Error: Objects are not valid as a React child (found: object with keys {_key, _type, children, markDefs, style}). If you meant to render a collection of children, use an array instead.

I have tried mapping but it just complained with an undefined error.

ah, that's the bio then, must be portable text. To render that you can use the portable-text-to-react package from npm. https://www.sanity.io/docs/portable-text-to-react

I’ve already done this project in react with sanity, (well a very similar one anyway), and have converted the bio part from portable text to react like in the article for that project. I just don’t understand the next js portions and how it fits in, was just trying to get the name to display for now as it seemed simpler to start with but apparently not! I’m still learning react as well as sanity etc so I’m not very experienced with this stuff.

ah Ive fixed it now., I was being a donut and had something else in the code further down which wouldn’t have worked but it broke the entire page. Thank you for your help

no problem, all developers are donuts 🍩

have you followed the Next.js getting started tutorial btw? That's a fantastic way to get to know the framework ›› https://nextjs.org/learn/basics/create-nextjs-app

No I haven’t looked at that, Ive been watching youtube tutorials on Next mostly. I will have a look thank you. Managed to get half my application working now Ive figured out what I’m doing. I merely build things for fun at the moment to help learn and improve my skills so I can become employable one day!