Next.js Error Serializing `results` returned from `getServerSideProps`
Question
I'm working with Next.js trying to getServerSIdeProps and and getting this error:
Error: Error serializing
.resultsreturned fromgetServerSidePropsin "/". Reason:undefinedcannot be serialized as JSON. Please usenullor omit this value.
export async function getServerSideProps(context) {
const genre = context.query.genre;
const request = await fetch(
`https://api.themoviedb.org/3${
requests[genre]?.url || requests.fetchTrending.url
}`
).then((res) => res.json());
return {
props: {
results: request.results,
},
};
}
It was working yesterday but today I'm getting this error. Could any body please help me?
1 answers
solution1
0 2022-01-23 10:17:01
while converting your data to JSON an error was thrown because the value undefined can not be serialized in other words you can't turn objects with undefined as the value of one of their properties to json.
You need to turn the undefined value to null value for javascript to be able to serialize it to JSON(convert it to JSON).
The easiest way to turn undefined values to null in javascript is using a library called Lodash . Install Lodash using the commands below:
$ npm install lodash
// or
$ yarn add lodash
After that create the functions below:
import _ from 'lodash';
function prepareForSerializatoin(obj) {
return obj.mapValues(obj, value => typeof value === 'undefined' ? null : value);
}
Finally, use this function while returning your response:
export async function getServerSideProps(context) {
const genre = context.query.genre;
const request = await fetch(
`https://api.themoviedb.org/3${
requests[genre]?.url || requests.fetchTrending.url
}`
).then((res) => res.json());
return prepareForSerializatoin({
props: {
results: request.results,
},
});
}
solution2
-1 2022-07-31 17:48:07
I have this same problem. I changed my code like bottom.
but it's not working.
index.js
import Head from 'next/head'
import Header from '../components/Header'
import Nav from '../components/Nav'
import Result from '../components/Result'
import requests from '../utils/requests'
import _ from 'lodash'
export default function Home(props) {
console.log(props);
return (
<div>
<Head>
<title> Hulu 2.0</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header/>
<Nav />
<Result />
</div>
)
}
function prepareForSerializatoin(obj) {
return obj.mapValues(obj, value => typeof value === 'undefined' ? null : value);
}
export async function getServerSideProps(context) {
const genre = context.query.genre;
const request = await fetch(
`https://api.themoviedb.org/3${
requests[genre]?.url || requests.fetchTrending.url
}`
).then((res) => res.json());
return prepareForSerializatoin({
props: {
results: request.results,
},
});
}
TypeError: obj.mapValues is not a function
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.