nextjs: Error serializing `.product` returned from `getStaticProps` in "/prints/[name]"

Question

nextjs: Error serializing `.product` returned from `getStaticProps` in "/prints/[name]"

985 Views Asked by Rom-888 At 12 April 2025 at 08:02

I have a Strapi nextjs app with 2 categories of products. It's all good on local but I have this error when I try to build:

Error serializing .product returned from getStaticProps in "/prints/[name]". Reason: undefined cannot be serialized as JSON. Please use null or omit this value all together.

What I don't understand is that it concerne only one category of product while the code is the same. I know it's not the best config but I couldn't do another way.

index.js(books)

const HomePage = ({ products }) => {
  return (
    <div>
      <Head>
        <title>Catalogue</title>
        <meta
          name="description"
          content="Classe moyenne éditions publie des livres et multiples d'artistes, émergeants ou reconnus, en France et à l'international."
        />
        <meta
          name="keywords"
          content="Edition d'artiste, Livres, prints, multiples, art books, librairie, concept store, Bookshop, Bookstore"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <Catalogue products={products} />
    </div>
  );
};

export async function getStaticProps() {
  const products = await getProducts();
  return { props: { products } };
}

export default HomePage;

index.js(prints)

const CataloguePage = ({ products }) => {
  return (
    <div>
      <Head>
        <title>Catalogue Prints</title>
        <meta
          name="description"
          content="Classe moyenne éditions publie des livres et multiples d'artistes, émergeants ou reconnus, en France et à l'international."
        />
        <meta
          name="keywords"
          content="Edition d'artiste, Livres, prints, multiples, art books, librairie, concept store, Bookshop, Bookstore"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <CataloguePrints products={products} />
    </div>
  );
};

export async function getStaticProps() {
  const products = await getProductsPrints();
  return { props: { products } };
}

export default CataloguePage;

[name].js

 export default ProductPage;

export async function getStaticProps({ params }) {
  const product = await getProductPrints(params.name);
  return { props: { product } };
}

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get products
  const products = await getProductsPrints();
  // Get the paths we want to pre-render based on posts
  const paths = products.map(
    (product) => `/prints/${product.Name}`
  );
  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

If you also have some advices to avoid repeating almost same code twice i'm interested. The reason is the 2 categories have different json designs

Original Q&A

There are 3 best solutions below

**Amresh Mishra** · Answer 1

Amresh Mishra On 18 May 2021 at 15:27

does await getProducts() return an array of objects ? props expects an object only. So you may have to refactor your code a bit before passing it to props.

**Gorav Singal** · Answer 2

You did not provide your code for getProducts(). I tried it with axios, something like:

let { data } = await axios.get(url)

Basically, you need 'data' attribute from rest call. Or, you may try to do console.log(getProducts()), to see the structure of json.

**Ekene** · Answer 3

In my case, I had to properly parse the response and it worked fine. It'll be helpful to share your getProductPrints() code so we can understand the nature of its response. But in the meantime, try this:

export async function getStaticProps() {
  const res = await getProductPrints();
  const products = await res.json()
  return { props: { products } };
}

nextjs: Error serializing `.product` returned from `getStaticProps` in "/prints/[name]"

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in NEXT.JS

Related Questions in STRAPI

Related Questions in ENCODEURICOMPONENT

Trending Questions

Popular # Hahtags

Popular Questions