NextJS - 使用 static 導出一次構建多個項目？

Question

我有一個小型 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 ，因為我只需要一個 static 導出。 運行此命令后，我將獲得/out/project1以及運行該站點所需的所有文件。

我的問題是-更改 Next.js 構建過程的首選方法是什么，因此next build && next export期間它將運行 API 調用https://enpoint.com/some-query/project1 out/project1對於project2和project3 ？

一旦我建立了我的項目，我想最終得到：

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

有任何想法嗎？ 我一直在尋找文檔，但沒有運氣。

Answer 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: {...}
  }
}

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