NextJS - 使用 static 导出一次构建多个项目？

Question

I have a small Next.js project, all the data comes from multiple API endpoints that look like this:

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

The API is projected in a way that it could reply with different data for different sites:

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

Right now I'm doing next build && next export as all I need is a static export. Once I run this command I'm getting /out/project1 with all the files necessary to run the site.

My question is - what's the preferred way of altering Next.js build process so during next build && next export it will run API calls to https://enpoint.com/some-query/project1 , build out/project1 and then repeat the same steps for project2 and project3 ?

Once I build my project I want to end up with:

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

Any ideas? I've been looking in the docs but with no luck.

Answer 1

The most straightforward solution I know is to run the build process multiple times with different environmental variables.

Setup build commands

"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",

Call different API endpoints based on the env variables

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

This might not be the best answer but I hope it helps.