Next.js getStaticProps中Axios请求序列化失败问题求助

我在Next.js项目开发中，已在Axios配置里完成URL序列化，但getStaticProps中的Axios请求依旧无法正常工作。尝试用JSON.parse(JSON.stringify(response))重新序列化响应数据，问题仍未解决。

引入依赖 #

import axios from "axios";
import Qs from "qs";

Axios配置代码 #

const axiosTmdbApi = axios.create({
  baseURL: "https://api.themoviedb.org/3",
  headers: { "content-Type": "application/json/" },
  paramsSerializer: {
    serialize: (params) =>
      Qs.stringify({ ...params, api_key: apiKey }, { arrayFormat: "brackets" }),
  },
});

API调用封装代码 #

import axiosTmdbApi from "./axiosTmdbApi";

export const category = {
  movie: "movie",
  tv: "tv",
};

export const type = {
  top_rated: "top_rated",
  popular: "popular",
};

const tmdbApi = {
  getTvList: (tvType, params) => {
    const url = "tv/" + type[tvType];
    return axiosTmdbApi.get(url, params);
  },
  getMovielist: (movieType, params) => {
    const url = "movie/" + type[movieType];
    return axiosTmdbApi.get(url, params);
  },
};

export default tmdbApi;

getStaticProps中的调用代码 #

import tmdbApi from "../../api/tmdbApi";
import { type, category } from "../../api/tmdbApi";

const Movies = ({ data }) => {
  console.log(data);
  return (
    <>
      <h1 className="bg-success">Movies</h1>
      
    </>
  );
};

export default Movies;

export async function getStaticProps() {
  let params = {};
  let response;

  response = await tmdbApi.getMovielist(type.popular, {
    params,
  });
  const data = JSON.parse(JSON.stringify(response));


  return {
    props: { data },
  };
}

错误信息（翻译后） #

index.js?46cb:602 未捕获的类型错误：将循环结构转换为JSON
    --> 从构造函数为'ClientRequest'的对象开始
    |     属性'socket'指向构造函数为'TLSSocket'的对象
    --- 属性'_httpMessage'形成闭环

问题原因与解决方法 #

• 报错核心是你直接序列化了Axios完整响应对象，该对象包含请求实例、socket连接等循环引用属性，无法被正常序列化为JSON。
• Axios接口返回的实际业务数据存在于response.data字段中，无需序列化整个响应对象，直接提取该字段即可。

修改后的getStaticProps代码：

export async function getStaticProps() {
  let params = {};
  const response = await tmdbApi.getMovielist(type.popular, { params });
  // 直接提取接口返回的实际数据
  const data = response.data;

  return {
    props: { data },
  };
}

内容的提问来源于stack exchange，提问作者William.G.K