在Next.js中调用Strapi API获取数据时console打印undefined的原因？

我正在Next.js应用中尝试从Strapi后端获取帖子数据，Strapi服务器运行在localhost:1337。已确认.env文件中的NEXT_PUBLIC_API_URL已正确设置为http://localhost:1337，但组件中的posts变量打印结果为undefined。

以下是组件代码：

import React from "react";
import Post from "./Post";

const RecentPosts = ({ posts }) => {
  console.log(posts); // Logs 'undefined'

  return (
    <div className="mx-auto flex h-full w-full max-w-7xl flex-col gap-12 p-4 md:p-8">
      <div className="rounded-lg bg-backgroundSecondary p-4">
        <h2 className="text-balance text-center text-3xl font-semibold uppercase text-[#f2f2f2] md:text-left md:text-4xl lg:text-5xl xl:text-6xl">
          Ostatnie wpisy
        </h2>
        <p className="text-center text-lg md:text-left">
          Zobacz kilka z naszych ostatnich wpisów i dowiedz się więcej na temat
          Arbosfery!
        </p>
      </div>
      <div className="flex flex-col gap-6 xl:flex-row">
      
      </div>
    </div>
  );
};

RecentPosts.getInitialProps = async () => {
  try {
    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
    const res = await fetch(`${apiUrl}/posts?_sort=createdAt:desc`);
    if (!res.ok) {
      throw new Error("Failed to fetch data");
    }
    const posts = await res.json();
    return { posts };
  } catch (error) {
    console.error("Error fetching data:", error);
    return { posts: [] };
  }
};

export default RecentPosts;

核心原因 #

getInitialProps 在 Next.js 13+ 的 App Router 中已不再被支持，若你当前使用的是 App Router（项目目录为app/），这个方法不会被执行，无法传递posts props，导致组件中posts为undefined。

即使使用 Pages Router（pages/目录），也需确保组件是pages/下的页面组件，或父页面组件正确传递了getInitialProps返回的posts。

解决方案 #

方案1：使用Pages Router（保留原有结构）

1. 将getInitialProps逻辑移到父页面组件，再把posts传递给RecentPosts：

// pages/index.js
import RecentPosts from '../components/RecentPosts';

const Home = ({ posts }) => {
  return <RecentPosts posts={posts} />;
};

Home.getInitialProps = async () => {
  try {
    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
    const res = await fetch(`${apiUrl}/posts?_sort=createdAt:desc`);
    if (!res.ok) throw new Error("Failed to fetch data");
    const posts = await res.json();
    return { posts };
  } catch (error) {
    console.error("Error fetching data:", error);
    return { posts: [] };
  }
};

export default Home;

2. 或者直接将RecentPosts改为页面组件，放在pages/recent-posts.js中，getInitialProps会自动执行。

方案2：使用App Router（Next.js 13+）

改用异步组件直接获取数据：

// app/recent-posts/page.js
import React from "react";
import Post from "./Post";

const RecentPosts = async () => {
  try {
    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
    const res = await fetch(`${apiUrl}/posts?_sort=createdAt:desc`, { cache: 'no-store' });
    if (!res.ok) throw new Error("Failed to fetch data");
    const posts = await res.json();

    return (
      <div className="mx-auto flex h-full w-full max-w-7xl flex-col gap-12 p-4 md:p-8">
        <div className="rounded-lg bg-backgroundSecondary p-4">
          <h2 className="text-balance text-center text-3xl font-semibold uppercase text-[#f2f2f2] md:text-left md:text-4xl lg:text-5xl xl:text-6xl">
            Ostatnie wpisy
          </h2>
          <p className="text-center text-lg md:text-left">
            Zobacz kilka z naszych ostatnich wpisów i dowiedz się więcej na temat
            Arbosfery!
          </p>
        </div>
        <div className="flex flex-col gap-6 xl:flex-row">
          {posts.map(post => <Post key={post.id} post={post} />)}
        </div>
      </div>
    );
  } catch (error) {
    console.error("Error fetching data:", error);
    return <div>加载失败，请稍后重试</div>;
  }
};

export default RecentPosts;

额外排查点 #

• 确认.env文件在项目根目录，且修改后重启过Next.js开发服务器。
• 在getInitialProps中添加console.log(apiUrl)，检查环境变量是否正确读取。
• 直接在浏览器访问http://localhost:1337/posts?_sort=createdAt:desc，确认Strapi接口是否正常返回数据。

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