Next.js getStaticProps未执行且next build报错求助

你用的是Next.js App Router（文件路径为src/app/pages/products/[productSlug]/page.tsx），但代码里用了Pages Router专属的getStaticProps和getStaticPaths——App Router完全不支持这两个API，这就是它们不执行、TypeScript报错的核心原因。

1. 用generateStaticParams替代getStaticPaths #

App Router通过generateStaticParams预生成动态路由路径，完全替代旧的getStaticPaths。

2. 移除getStaticProps，改用Server Component直接取数 #

App Router页面默认是Server Component，不需要通过getStaticProps传参，直接在组件内部根据路由参数获取数据即可，Next.js会自动静态化这些请求（默认缓存）。

3. 清理无用依赖 #

你导入了useState、useEffect等客户端钩子但没用到，直接删掉，避免把组件误转为Client Component（如果不需要交互的话）。

import { medusa } from "@/app/requests/medusaClient";
import { Product } from "@/app/models/productModel";

// 定义路由参数类型
interface ProductPageParams {
  params: {
    productSlug: string;
  };
}

// Server Component，直接接收路由参数
export default async function ProductPage({ params }: ProductPageParams) {
  // 根据slug从Medusa获取产品数据
  const { product } = await medusa.products.retrieve(params.productSlug);

  return (
    <>
      <h1>Product details</h1>
      <div>
        <h2>{product.title}</h2>
      </div>
    </>
  );
}

// 预生成所有产品的路由路径，替代getStaticPaths
export async function generateStaticParams() {
  const response = await medusa.products.list();

  return response.products.map((product: Product) => ({
    params: {
      productSlug: product.id, // 注意：若实际用产品的slug字段而非id，此处改为product.slug
    },
  }));
}

• 如果你的productSlug对应产品的slug字段（不是id），需要同步调整两处：generateStaticParams里改为product.slug，同时Medusa的查询逻辑要改成根据slug获取产品（比如用medusa.products.list({ slug: params.productSlug })后取第一个结果）。
• 若需要客户端交互，在组件顶部加'use client'指令，但静态数据获取仍保留在Server Component部分，或用Suspense包裹客户端组件。
• Next.js会自动缓存Medusa API请求结果，构建时静态生成所有产品页面，效果和原代码getStaticProps+fallback: false完全一致。

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