Error: How to serialize data from getStaticProps : Next.js

Question

I'm working with Next.js, I tried accessing data but got this error:

Error: Error serializing `.profileData` returned from `getStaticProps` in "/profile/[slug]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

My code:

import { getAllBusinessProfiles } from '../../lib/api';

const Profile = ({ allProfiles: { edges } }) => {
    return ( 
        <>
          <Head>
            <title>Profile</title>
          </Head>

          <Hero />

          <section>
            {edges.map(({ node }) => (
              <div key={node.id}>
                  <Link href={`/profile/${node.slug}`}>
                    <a> {node.businessInfo.name} </a>
                  </Link>
              </div>
            ))}
          </section>

        </>
     );
}
 
export default Profile;

export async function getStaticProps() {
    const allProfiles = await getAllBusinessProfiles();
    return {
      props: {
        allProfiles
      }
    };
  }

getAllBusinessProfiles from api.js:

const API_URL = process.env.WP_API_URL;

async function fetchAPI(query, { variables } = {}) {
  const headers = { 'Content-Type': 'application/json' };

  const res = await fetch(API_URL, {
    method: 'POST',
    headers,
    body: JSON.stringify({ query, variables })
  });

  const json = await res.json();
  if (json.errors) {
    console.log(json.errors);
    console.log('error details', query, variables);
    throw new Error('Failed to fetch API');
  }
  return json.data;
}

export async function getAllBusinessProfiles() {
    const data = await fetchAPI(
      `
      query AllProfiles {
        businessProfiles(where: {orderby: {field: DATE, order: ASC}}) {
          edges {
            node {
              date
              title
              slug
              link
              uri
              businessInfo {
                name
                title
                company
                image {
                  mediaItemUrl
                  altText
                }
                highlight
                phone
                city
                country
                facebook
                instagram
                email
                website
                profiles {
                  profile
                  profileInfo
                }
                extendedProfile {
                  title
                  info
                }
              }
            }
          }
        }
      }
      
      `
    );
    return data?.businessProfiles;
};

What could be the error here? I used the getStaticProps method on Next.js but got the error above instead. Please, check. Thanks.

The error: Server Error Error: Error serializing .profileData returned from getStaticProps in "/profile/[slug]". Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

I don't know what could cause this though.

Going to repeat what I mentioned in your last question: Some field in your allProfiles object is `undefined` which is not serializable as JSON so can't be returned from getStaticProps. Either convert those to `null` or omit them entirely. — juliomalves, Feb 08 '21 at 18:05

score 21 · Answer 1 · edited Sep 06 '21 at 13:09

21

Add JSON.stringify when calling an asynchronous function that returns an object.

Try modifying your getStaticProps function like this.

export async function getStaticProps() {
    const profiles = await getAllBusinessProfiles();
    const allProfiles = JSON.stringify(profiles)

    return {
        props: {
             allProfiles
        }
   };
}

The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

Source: MDN

edited Sep 06 '21 at 13:09

Aryan Beezadhur

4,503
4
21
42

answered May 07 '21 at 08:14

Fernando

211
2
4

1

Is there a way how to unserialize the data automatically without having to call `JSON.parse()` on the props in the component manually? – Qwerty Apr 02 '22 at 22:14
1

you can serialize and unserialize at the same time ```JSON.parse(JSON.stringify(profiles))```. this allows you to send a normal object to your component @Qwerty – Arian Nargesi Dec 28 '22 at 13:22

score 5 · Answer 2 · edited Sep 06 '21 at 13:00

5

I had this issue using Mongoose and Next.js.

To solve it: I switched from convert require to import then wrapped my result in JSON.parse(JSON.stringify(result));.

Good: import mongoose from 'mongoose';

Bad: const mongoose = require('mongoose');

edited Sep 06 '21 at 13:00

Aryan Beezadhur

4,503
4
21
42

answered May 10 '21 at 07:48

Joshu

460
4
14

It worked well for me using firestore. Thanks ! – Maxime Crtgn Jun 30 '22 at 06:31

Yilmaz · Answer 3 · 2022-02-22T18:58:29.193

I had the same issue when I was working with redux with next js and the reason was one of the fields in the default state I set it to undefined. Instead I used null:

const INITIAL_STATE = {
  products: [],
  loading: false,
  error: undefined,
  cart: [],
};

error:undefined was causing the error. Because "undefined" cannot be serialized:

export async function getStaticProps() {
    const allProfiles = await getAllBusinessProfiles();
    return {
      props: {
        allProfiles
      }
    };
  }

you are returning "allProfiles" which is the result of async getAllBusinessProfiles() which is either returning undefined, error or one of the fields of the returned object is undefined. "error" object is not serializable in javascript

I was trying to export boolean value `context.preview` from `getStaticProps` and whenever I exited the preview mode, the value came `undefined`. I simply returned `!!context.preview` and the error was resolved. — KeshavDulal, May 27 '21 at 12:25

score 3 · Answer 4 · answered Sep 15 '21 at 13:54

I had the same serialization error when accessing a Vercel system environment variable in getStaticProps.

Using JSON.stringify did not do the trick, but String() worked. My code:

export async function getStaticProps() {
  const deploymentURL = String(process.env.NEXT_PUBLIC_VERCEL_URL);

  return {
    props: {
      deploymentURL,
    },
  };
}

Thanks to this GitHub issue for the inspiration

score 1 · Answer 5 · answered Feb 22 '22 at 16:08

Instead of using undefined, you have to use null as the value for your variables.

Note that the error shows you exactly which variable is using undefined as its value. Just modify its value to be null.

The value 'undefined' denotes that a variable has been declared, but hasn't been assigned any value. So, the value of the variable is 'undefined'. On the other hand, 'null' refers to a non-existent object, which basically means 'empty' or 'nothing'.

Source: [1]

score 0 · Answer 6 · edited Dec 18 '21 at 20:17

I was having the same issue while trying to find a match in the array of data using the id. The issue I had was the items in the array had ids which were numbers while the value I was getting from params was a string. So all i did was convert the number id to a string to match the comparison.

export async function getStaticProps({ params }) {
  const coffeeStore = coffeeStoreData.find(
    (store) => store.id.toString() === params.slug[0]
  );
  return {
    props: {
      coffeeStore,
    },
  };
}

score 0 · Answer 7 · edited Mar 24 '22 at 20:39

0

In getStaticProps() function, after fetching your data it will be in json format initially, but you should change it as follow:

     const res = await fetch(`${APP_URL}/api/projects`);
     const data = JSON.parse(res);

now it will work.

edited Mar 24 '22 at 20:39

vvvvv

25,404
19
49
81

answered Jan 24 '22 at 19:34

Mostafa islami

56
2
9

score 0 · Answer 8 · answered Feb 05 '22 at 11:54

install a package called babel-plugin-superjson-next and superjson and added a .babelrc file with these contents:

{
  "presets": ["next/babel"],
  "plugins": ["superjson-next"]
}

see this topic : https://github.com/vercel/next.js/discussions/11498.

score 0 · Answer 9 · answered Feb 26 '22 at 12:45

0

I had a similar problem too where I was fetching data through apollo directly inside of getStaticProps. All I had to do to fix the error was add the spread syntax to the return.

    return {
    props: {
      data: { ...data }
    }
  }

answered Feb 26 '22 at 12:45

Master7130

1

score 0 · Answer 10 · edited Mar 24 '22 at 20:38

0

return { props: { allProfiles: allProfiles || null } }

edited Mar 24 '22 at 20:38

vvvvv

25,404
19
49
81

answered Mar 24 '22 at 19:52

Abanoub Maher

1
1

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 24 '22 at 20:33

score 0 · Answer 11 · answered Sep 05 '22 at 07:07

When you call api you should use try catch. It will resolve error.

Example:

import axios from "axios";
    export const getStaticProps = async () => {
        try {
            const response = await axios.get("http:...");
            const data = response.data;
            return {
                props: {
                    posts: data
                }
            }
        } catch (error) {
            console.log(error);
        }
    }

Hope help for you !

score 0 · Answer 12 · answered Oct 05 '22 at 20:31

0

put res from API in Curly Brackets

const { res }  = await axios.post("http://localhost:3000/api", {data})
return { props: { res } }

answered Oct 05 '22 at 20:31

Usama Maqsood

1
1
1

score -1 · Answer 13 · answered Aug 27 '21 at 23:49

try this, it worked for me:

export async function getStaticProps() {
  const APP_URL = process.env.PUBLIC_NEXT_WEB_APP_URL;
  const res = await fetch(`${APP_URL}/api/projects`);
  const projects = await res.json();
  return {
    props: {
      projects: projects?.data,
    },
  };
}

Error: How to serialize data from getStaticProps : Next.js

13 Answers13

Linked

Related