Next.js v15.1.4动态路由执行npm run build出错求助

针对你使用 output: 'export' 静态导出模式时，generateStaticParams 导致的构建失败问题，结合代码和配置给出以下修复方案：

核心问题排查与修复 #

静态导出模式下，generateStaticParams 的执行逻辑直接影响构建流程，常见问题集中在请求可靠性、类型严谨性和错误处理上，以下是优化后的代码：

修改后的 app/test/[id]/page.tsx #

// 定义明确的类型替代any，避免类型隐式错误
interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

export const generateStaticParams = async () => {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
      // 静态构建阶段强制缓存请求结果，避免重复调用
      cache: 'force-cache',
    });

    // 校验请求状态，提前抛出错误便于排查
    if (!res.ok) {
      throw new Error(`API请求失败: ${res.status} ${res.statusText}`);
    }

    const posts: Post[] = await res.json();

    // 生成符合要求的静态参数
    return posts.map(post => ({
      id: post.id.toString(),
    }));
  } catch (error) {
    // 构建阶段捕获错误并输出日志，同时返回兜底参数避免构建中断
    console.error('生成静态参数失败:', error);
    return [{ id: '1' }];
  }
};

export default function TestPage({ params }: { params: { id: string } }) {
  return (
    <div>
      <h1>Id: {params.id}</h1>
    </div>
  );
}

优化后的 next.config.mjs #

/** @type { import('next').NextConfig } */
const nextConfig = {
  trailingSlash: true,
  output: 'export',
  images: { unoptimized: true },
  // 开启完整请求日志，便于排查构建阶段的fetch问题
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

export default nextConfig;

额外排查步骤 #

1. 校验Node.js版本：Next.js 15.1.4要求Node.js 18.17+或20.6+，版本不符可能导致构建异常。
2. 清除构建缓存：执行 rm -rf .next out（Linux/macOS）或 rmdir /s .next out（Windows），删除旧构建产物后重新执行 npm run build。
3. 确认依赖版本：确保next包版本为15.1.4，执行 npm list next 校验，若版本不符则重新安装：npm install next@15.1.4。
4. 查看完整错误日志：执行构建时仔细观察终端输出的错误信息，定位具体失败环节（如API请求超时、参数格式错误等）。

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