title: Error: How to serialize data from getStaticProps : Next.js
body: <p>I'm working with Next.js, I tried accessing data but got this error:</p>
  <pre><code>Error: Error serializing `.profileData` returned from `getStaticProps` in &quot;/profile/[slug]&quot;.
  Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
  </code></pre>
  <p>My code:</p>
  <pre><code>import { getAllBusinessProfiles } from '../../lib/api';
  
  const Profile = ({ allProfiles: { edges } }) =&gt; {
      return ( 
          &lt;&gt;
            &lt;Head&gt;
              &lt;title&gt;Profile&lt;/title&gt;
            &lt;/Head&gt;
  
            &lt;Hero /&gt;
  
            &lt;section&gt;
              {edges.map(({ node }) =&gt; (
                &lt;div key={node.id}&gt;
                    &lt;Link href={`/profile/${node.slug}`}&gt;
                      &lt;a&gt; {node.businessInfo.name} &lt;/a&gt;
                    &lt;/Link&gt;
                &lt;/div&gt;
              ))}
            &lt;/section&gt;
  
          &lt;/&gt;
       );
  }
   
  export default Profile;
  
  export async function getStaticProps() {
      const allProfiles = await getAllBusinessProfiles();
      return {
        props: {
          allProfiles
        }
      };
    }
  </code></pre>
  <p>getAllBusinessProfiles from api.js:</p>
  <pre><code>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;
  };
  </code></pre>
  <p>What could be the error here? I used the getStaticProps method on Next.js but got the error above instead. Please, check. Thanks.</p>
  <p>The error:
  Server Error
  Error: Error serializing <code>.profileData</code> returned from <code>getStaticProps</code> in &quot;/profile/[slug]&quot;.
  Reason: <code>undefined</code> cannot be serialized as JSON. Please use <code>null</code> or omit this value.</p>
  <p>I don't know what could cause this though.</p>