Get help on Discord

Error serializing props returned from `getServerSideProps` in "/[slug]" when accessing a page.

39 replies
Last updated: Jan 25, 2022
Why isn’t my [slug].js page displaying when going to the page?I keep getting this error

error - Error: Error serializing props returned from `getServerSideProps` in "/[slug]".
Reason: Props must be returned as a plain object from getServerSideProps: `{ props: { ... } }` (received: `[object Null]`).
This is what my getServerSideProps looks like

export const getServerSideProps = async function (context) {
    const { slug = '' } = context.query;
  
    const data = await client.fetch(`*[_type == "hikes" && slug.current == $slug][0] `, { slug });
    return { props: data };
};
I’ve used this ^ structure on a different slug page and it works
AI Update

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.

Subtle, but Next.js wants the props data to be an object
It’s still pushing me to a 404
What is the console/terminal saying?
error - Error: Error serializing props returned from `getServerSideProps` in "/[slug]".
Reason: Props must be returned as a plain object from getServerSideProps: `{ props: { ... } }` (received: `[object Null]`).
Can you verify that you’re getting data in 
data
 ?
I can not, it wont even let me console log
const data = await client.fetch(`*[_type == "hikes" && slug.current == $slug][0] `, { slug });
console.log(data)
so this doesn’t work? have you restarted the dev server?
I’ll try restarting
Now its not giving me the error but still pushing me to a 404
And you’re not getting any data?
correct
import client from '../lib/sanity'

export default function Hikes({ data }) {
    console.log(data)
    return(
        <main>
            
        </main>
    )
}

export const getServerSideProps = async function (context) {
    const { slug = '' } = context.query;
  
    const data = await client.fetch(`*[_type == "hikes" && slug.current == $slug][0] `, { slug });
    console.log(data)
    return { props: { data } };
};
Is it 
hikes
or 
hike
 ?
Does the query work in Vision?
I dont know how to see it in vision I dont have that on my studio
Got ya. It’s a GROQ playground, so can be useful. 
sanity install @sanity/vision
What’s your project ID?
cd0q2c94
Thanks. So I can confirm that
client.fetch(`*[_type == "hikes" && slug.current == $slug][0]`, { slug: "2022-01-24" })
should return data. I find a bit weird that you’re getting a 404 though. Even if there no data, the page template should’ve returned those empty 
<main>
. This is a file in the 
pages
folder, right?
Correct, I have a hike folder in the pages folder. Inside the /hike is an index and [slug]
index shows
I did write that wrong, but even after correcting, it still send me to 404
Okay, thanks for confirming.
Even copying and pasting that sends me a 404
I’m sorry for the trouble
not at all! Do you have the code in a github or something?
Yea I’ll push what I have and make it public so you can see it
Ah! Found it. Rename your folder from 
hike.js
 to 
hike
(Also, love that you’re making a dog journal 💯)
haha yup that worked, I see .js so often I missed that
and thanks! I watched something that said it could improve your relationship with your dog (once you realize what you do with them everyday) and at the very least you have a story of them at the end of their life
Totally understandable – it’s way easier for me to spot stuff like that coming in fresh
Looking forward to learning more about the site once you have launced it and told i-made-this 😄
I do have it already deplyed https://dog-journal.vercel.app/
I’m committing to the
52 Hike challenge which is why I’m now building the hike part of the site
user G
I was just reading this for nerd reasons initially but that is a gorgeous dog.
😍 This is a fantastic project - on all accounts. (
user G
, have you seen this?)
😍 This is a fantastic project - on all accounts. (
user G
, have you seen this?)

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?