NextJS - 使用静态导出一次构建多个项目？答案

【问题标题】：NextJS - build multiple projects at once with static export?NextJS - 使用静态导出一次构建多个项目？
【发布时间】：2020-12-18 08:52:32
【问题描述】：

我有一个小型 Next.js 项目，所有数据都来自多个 API 端点，如下所示：

https://enpoint.com/some-query/project1

API 以一种可以针对不同站点回复不同数据的方式进行投射：

https://enpoint.com/some-query/project1
https://enpoint.com/some-query/project2
https://enpoint.com/some-query/project3

现在我正在做next build && next export，因为我只需要一个静态导出。运行此命令后，我将获得 /out/project1 以及运行该站点所需的所有文件。

我的问题是 - 更改 Next.js 构建过程的首选方法是什么，因此在 next build && next export 期间，它将运行对 https://enpoint.com/some-query/project1 的 API 调用，构建 out/project1，然后对 project2 和 @987654329 重复相同的步骤@?

一旦我构建了我想要结束的项目：

/out/project1
/out/project2
/out/project3

有什么想法吗？我一直在查看文档，但没有运气。

【问题讨论】：

标签： javascript reactjs webpack next.js

【解决方案1】：

我知道的最直接的解决方案是使用不同的环境变量多次运行构建过程。

设置构建命令

"build": "npm-run-all --parallel build:project1 build:project2 build:project3",
"build:project1": "PROJECT_ENV=project1 next build",
"build:project2": "PROJECT_ENV=project2 next build",
"build:project2": "PROJECT_ENV=project3 next build",

根据环境变量调用不同的 API 端点

export async function getStaticProps(context) {
  switch(process.env.PROJECT_ENV) {
    case 'project1': 
      // fetch project 1 data
    case 'project2': 
      // fetch project 2 data
    case 'project3': 
      // fetch project 3 data
  }
  return {
    props: {...}
  }
}

这可能不是最好的答案，但我希望它有所帮助。

【讨论】：