能否在Next.js中用getStaticPaths在public文件夹生成静态JSON等文件？

Next.js 本身不支持直接通过 getStaticPaths 在 public 目录生成动态命名的静态文件，但可以通过以下两种贴合你需求的方案实现构建阶段生成静态JSON的目标：

方案一：自定义构建脚本（推荐，贴合getStaticPaths范式） #

思路 #

在Next.js构建前，编写Node.js脚本模拟getStaticPaths的逻辑：先获取所有需要生成的name参数列表，再逐个拉取对应数据源生成JSON文件到public/data目录。

实现步骤 #

1. 创建构建脚本scripts/generate-static-json.js：

   const fs = require('fs').promises;
   const path = require('path');
   
   // 模拟getStaticPaths：获取所有需要生成的路径参数
   async function getPaths() {
     // 替换为你的实际数据源逻辑（比如从数据库/外部API拉取name列表）
     return ['user1', 'user2', 'product1'].map(name => ({ params: { name } }));
   }
   
   // 模拟getStaticProps：根据name获取对应数据
   async function getData(name) {
     // 替换为你的实际数据获取逻辑
     return { id: name, content: `静态数据内容：${name}` };
   }
   
   async function generateFiles() {
     const paths = await getPaths();
     const outputDir = path.join(process.cwd(), 'public', 'data');
   
     // 确保输出目录存在
     await fs.mkdir(outputDir, { recursive: true });
   
     for (const { params: { name } } of paths) {
       const data = await getData(name);
       await fs.writeFile(
         path.join(outputDir, `${name}.json`),
         JSON.stringify(data, null, 2)
       );
       console.log(`已生成：public/data/${name}.json`);
     }
   }
   
   generateFiles().catch(err => {
     console.error('生成静态JSON失败：', err);
     process.exit(1);
   });
   

2. 修改package.json的构建命令，让脚本在Next.js构建前自动执行：

   "scripts": {
     "prebuild": "node scripts/generate-static-json.js",
     "build": "next build",
     // 其他脚本...
   }
   

3. 执行yarn build时，脚本会先生成所有public/data/[name].json文件，再进行Next.js的构建流程。

方案二：利用静态导出+动态API路由 #

思路 #

创建动态API路由并结合getStaticPaths/getStaticProps生成数据，再通过next export将API路由导出为静态JSON文件，最后按需移动到public目录。

实现步骤 #

1. 创建动态API路由pages/api/data/[name].js：

   export async function getStaticPaths() {
     return {
       paths: ['user1', 'user2', 'product1'].map(name => ({ params: { name } })),
       fallback: false
     };
   }
   
   export async function getStaticProps({ params }) {
     const { name } = params;
     // 替换为你的实际数据获取逻辑
     const data = { id: name, content: `API生成的静态数据：${name}` };
     return { props: { data } };
   }
   
   export default function DataAPI({ data }) {
     // 返回JSON格式响应
     return new Response(JSON.stringify(data), {
       headers: { 'Content-Type': 'application/json' }
     });
   }
   

2. 修改next.config.js开启静态导出配置：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     output: 'export',
     // 其他配置...
   };
   
   module.exports = nextConfig;
   

3. 执行yarn build后，导出的JSON文件会存放在out/api/data/目录下，你可以在postbuild脚本中添加自动移动文件的逻辑，将其转移到public/data/目录。

方案对比 #

• 方案一优势：完全贴合“构建阶段直接生成到public”的需求，无需依赖Next.js API路由，生成的文件可直接通过/data/[name].json访问，性能最优。
• 方案二优势：复用了Next.js的getStaticPaths/getStaticProps范式，适合已经熟悉Next.js静态生成逻辑的开发者，仅需额外处理文件移动步骤。

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