Next.js使用getStaticProps通过axios获取jsonplaceholder数据返回undefined

核心原因1：getStaticProps 执行范围限制 #

Next.js 的getStaticProps仅对 pages 目录下的路由页面组件生效，如果你当前的Main组件是存放在 components 目录下的公共子组件，getStaticProps不会被自动执行，组件接收的data自然为 undefined。

对应解决方法 #

• 若Main是首页页面：直接将该文件放在项目根目录的pages文件夹下，命名为index.js即可，Next.js 会自动识别并执行getStaticProps注入 props。
• 若Main是公共子组件：删除该组件内的getStaticProps代码，在引用它的父级页面（pages 目录下的路由页面）中编写getStaticProps拉取数据，再通过 props 将 data 传递给Main组件。

核心原因2：日志查看位置错误 #

getStaticProps是服务端执行的生命周期方法，你在getStaticProps中打印的日志只会输出在项目运行的终端，不会出现在浏览器控制台。可以先在getStaticProps中添加日志确认数据是否拉取成功：

export const getStaticProps = async () => {
  try {
    const {data} = await axios.get("https://jsonplaceholder.typicode.com/posts");
    // 查看运行项目的终端是否有这行输出
    console.log('服务端拉取到的posts数据：', data);
    return {
      props: {
        data
      },
    };
  } catch (err) {
    console.error('请求失败错误信息：', err);
    return {
      props: {
        data: []
      }
    }
  }
};

核心原因3：axios 响应结构被修改 #

如果你的项目配置了 axios 全局响应拦截器，且拦截器中直接返回了response.data而非完整的 response 对象，那你解构赋值的写法就会取不到数据，需要修改请求写法：

// 拦截器已经返回了response.data的情况，无需再解构
const data = await axios.get("https://jsonplaceholder.typicode.com/posts");

特殊情况：Next.js 13+ App Router 兼容问题 #

如果你使用的是 Next.js 13 及以上版本的 App Router 模式，getStaticProps已经被废弃，需要使用服务端组件直接拉取数据，写法调整如下：

import { Fragment } from "react";
import axios from "axios";

// 服务端组件默认声明为async函数
const Main = async () => {
  const {data} = await axios.get("https://jsonplaceholder.typicode.com/posts");
  console.log(data);

  return (
    <Fragment>
      <section className="main mt-3">
        <div className="container-lg">
          <div className="text-center">
            <h3>
              <span className="text-primary fw-bold display-5 ">Welcome</span>{" "}
              <span className="text-dark fw-bold display-5 ">Next</span>
            </h3>
            <p className="text-muted">Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
      </section>
    </Fragment>
  );
};

export default Main;

内容的提问来源于stack exchange，提问作者nodeDev