I am building a Next.js application with multiple pages with dynamic routing. Each page has multiple axios calls to the backend that are called with useEffect. My goal is to instead call these functions with getServerSideProps functions for speed purposes as the application is scaled to acodate a larger user database.

My issue is when i try to recieve emails from the database, I get the error:

Error: Error serializing .allEmails.config.transformRequest[0] returned from getServerSideProps in "/emails". Reason: function cannot be serialized as JSON. Please only return JSON serializable data types.

I want to recieve emails and pass it into props where i can then access the data on the page.

import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import jsHttpCookie from 'cookie';
import jsCookie from 'js-cookie';

const Emails = ({allEmails}) => {

const [emails, setEmails] = useState(allEmails);

return (
    <></>
  )
}

export async function getServerSideProps({req, res}) {
    const {token} = jsHttpCookie.parse(req.headers.cookie);
    const allEmails = await axios.get("http://localhost:8000/api/allCompanyEmails");
    console.log(allEmails, "all data")
  
    return {
        props: {
          allEmails
        }
    }
  }

export default Emails;

I am building a Next.js application with multiple pages with dynamic routing. Each page has multiple axios calls to the backend that are called with useEffect. My goal is to instead call these functions with getServerSideProps functions for speed purposes as the application is scaled to acodate a larger user database.

My issue is when i try to recieve emails from the database, I get the error:

Error: Error serializing .allEmails.config.transformRequest[0] returned from getServerSideProps in "/emails". Reason: function cannot be serialized as JSON. Please only return JSON serializable data types.

I want to recieve emails and pass it into props where i can then access the data on the page.

import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import jsHttpCookie from 'cookie';
import jsCookie from 'js-cookie';

const Emails = ({allEmails}) => {

const [emails, setEmails] = useState(allEmails);

return (
    <></>
  )
}

export async function getServerSideProps({req, res}) {
    const {token} = jsHttpCookie.parse(req.headers.cookie);
    const allEmails = await axios.get("http://localhost:8000/api/allCompanyEmails");
    console.log(allEmails, "all data")
  
    return {
        props: {
          allEmails
        }
    }
  }

export default Emails;

• javascript
• node.js
• next.js

• The error says what's wrong, non-serializable object is provided. Use response data, not a response itself – Estus Flask Commented Apr 21, 2021 at 22:38

1 Answer 1

allEmails is actually AxiosResponse type, it is not the data you get from api. And it contains non-serializable stuff like functions and etc.

To get the data you need to access data property of this response:

export async function getServerSideProps({req, res}) {
    const {token} = jsHttpCookie.parse(req.headers.cookie);
    const response = await axios.get("http://localhost:8000/api/allCompanyEmails");
    console.log(response, "all data")
  
    return {
        props: {
          allEmails: response.data
        }
    }
  }