getServerSideProps returning null instead of props object with Sanity query

The issue you're encountering is that your GROQ query is returning null when no document matches, but Next.js expects getServerSideProps to return an object with a props key containing a plain object, not null.

The error message is clear: you're returning { props: data } where data is null, which means you're effectively returning { props: null } instead of { props: { ... } } (a plain object).

The fix is simple - you need to handle the case where your query returns no results:

export const getServerSideProps = async function (context) {
    const { slug = '' } = context.query;
  
    const data = await client.fetch(
        `*[_type == "hikes" && slug.current == $slug][0]`, 
        { slug }
    );
    
    // Handle null/undefined data
    if (!data) {
        return {
            notFound: true, // Shows 404 page
        };
    }
    
    return { 
        props: { data } // Wrap data in an object
    };
};

Why this happens:

1. When your GROQ query with [0] doesn't find a matching document, it returns null
2. You're returning { props: null } which violates Next.js's requirement that props must be a plain object
3. Next.js expects the structure { props: { someKey: someValue } }

Additional improvement:

Consider wrapping your data in a named property for clarity:

return { 
    props: { hike: data }
};

Then in your component:

export default function HikePage({ hike }) {
    // Use hike data
}

The reason your other slug page works is likely because that query always returns data, so you never hit the null case. Once you add the null check with notFound: true, users will see a proper 404 page when navigating to a slug that doesn't exist in your Sanity dataset.