Get help on Discord

Getting undefined in getServerSideProps with Sanity query in Next.js

17 replies
Last updated: Dec 1, 2025
Hello,can anyone tell me how could I get the data (during console.log) I am getting undefined in my [slug.js file] this is my code

const myquery = `*[_type == "post"] {
    title,
    _id,
    mainImage,
   body
    }`

export const Post = ({posts, title, image}) => {

    console.log(posts, title, image);
    return (
        <div>
        <h1>Post</h1>
        </div>
    );
};

export const getServersideprops = async () => {
    const result = await client.fetch(myquery)
    return {
        props: {
            title: result.title,
            posts: result.body,
            image: result.mainImage,
        }
    }
}
AI Update

I can see the issue in your code! There are actually two problems causing the undefined values:

1. Typo in function name

You wrote getServersideprops but it should be getServerSideProps (capital S in Server and capital P in Props). Next.js won't recognize your function with the incorrect casing, so it won't execute at all, leaving your props undefined.

2. Incorrect data structure handling

Your client.fetch(myquery) returns an array of posts (because of the *[_type == "post"] query), but you're treating it like a single object. You're trying to access result.title directly, but result is an array, not an object.

Here's the corrected code:

const myquery = `*[_type == "post"] {
    title,
    _id,
    mainImage,
    body
}`

export default function Post({posts}) {
    console.log(posts); // This will now show your array of posts
    return (
        <div>
            <h1>Post</h1>
            {posts && posts.map(post => (
                <div key={post._id}>
                    <h2>{post.title}</h2>
                </div>
            ))}
        </div>
    );
}

export const getServerSideProps = async () => {
    const result = await client.fetch(myquery)
    return {
        props: {
            posts: result, // result is already the array of posts
        }
    }
}

If you want to fetch a single post (which seems likely since this is a [slug].js file), you should modify your query to filter by the slug parameter:

export const getServerSideProps = async (context) => {
    const { slug } = context.params;
    
    const query = `*[_type == "post" && slug.current == $slug][0] {
        title,
        _id,
        mainImage,
        body
    }`
    
    const post = await client.fetch(query, { slug })
    
    return {
        props: {
            post, // Now this is a single post object
        }
    }
}

export default function Post({post}) {
    console.log(post); // Will show your single post
    return (
        <div>
            <h1>{post?.title}</h1>
        </div>
    );
}

The key differences:

  • Fixed the function name capitalization
  • Used context.params to get the slug from the URL
  • Added a filter && slug.current == $slug to get the specific post
  • Added [0] to get the first (and only) result instead of an array
  • Passed the slug as a parameter using GROQ parameters to prevent GROQ injection

This should resolve your undefined issues!

Show original thread
17 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?