NextJS getServerSideProps serialization error with undefined values from Sanity

This error happens because Next.js can't serialize undefined values when passing props from getServerSideProps to your component. Next.js uses JSON to transfer data from server to client, and undefined isn't valid JSON.

In your case, the .artists field is coming back as undefined from your Sanity query, likely because:

1. The field doesn't exist on the document - The exhibition you're querying doesn't have an artists field set
2. There's a typo in your GROQ query - Check that you're requesting artists with the correct field name
3. Missing comma in your query - Based on the thread you linked, syntax errors in GROQ queries can cause unexpected undefined values

How to fix it:

Option 1 - Use nullish coalescing in your return statement:

return {
  props: {
    ...exhibition,
    artists: exhibition.artists || null
  }
}

Option 2 - Spread the entire query response (cleaner approach):

return {
  props: { ...exhibition }
}

Option 3 - Filter out undefined values:

const cleanProps = Object.fromEntries(
  Object.entries(exhibition).filter(([_, v]) => v !== undefined)
);

return {
  props: cleanProps
}

Also check your GROQ query - Make sure there are no syntax errors. Common issues include:

• Missing commas between fields
• Incorrect reference syntax (should be fieldName-> for references)
• Malformed projections

If you share your full query, I can help spot any syntax issues. The GROQ documentation is also helpful for validating query syntax.