Next.js 14无法使用getStaticProps，如何向首页传递Props循环数据？

Next.js 14默认使用App Router，原Pages Router里的getStaticProps已不再适用，你可以直接利用Server Components的异步特性获取数据并渲染，具体修改如下：

修改后的代码（对应app/page.js） #

import { stripe } from "./utils/stripe";

// Server Component支持直接定义为async函数
export default async function Home() {
  // 直接在组件内部异步获取Stripe产品数据
  const inventory = await stripe.products.list({
    limit: 8,
  });
  // Stripe返回的产品列表实际在data字段中
  const products = inventory.data;

  return (
    <div>
      <h2>产品列表</h2>
      {/* 循环渲染产品数据 */}
      <div className="products-container">
        {products.map((product) => (
          <div key={product.id} className="product-item">
            <h3>{product.name}</h3>
            {product.description && <p>{product.description}</p>}
            {/* 可根据需求添加更多产品字段，比如价格、封面图等 */}
          </div>
        ))}
      </div>
    </div>
  );
}

关键说明 #

• Next.js 14的App Router中，默认页面组件都是Server Components，允许直接在组件内用await调用异步API，无需额外的getStaticProps/getServerSideProps。
• Stripe的API调用会在服务器端执行，不会将密钥暴露给客户端，安全性和原方案一致。
• 注意Stripe的products.list返回结果里，实际的产品数组存放在data属性下，需要取这个字段来循环渲染。

如果你的项目仍在使用Pages Router（官方不推荐，Next.js 14更建议迁移到App Router），也可以保留Pages Router并继续使用getStaticProps，但官方已逐步弱化该路由方案的支持，优先推荐上面的App Router写法。

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