Блог

У меня есть небольшая 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 amp;amp; next export так, как все, что мне нужно, это статический экспорт. Как только я запускаю эту команду, я получаю /out/project1 все файлы, необходимые для запуска сайта.

Мой вопрос — каков предпочтительный способ изменения Next.js процесс сборки, поэтому во next build amp;amp; next export время него будут выполняться вызовы API для https://enpoint.com/some-query/project1 , build out/project1 , а затем повторять те же шаги для project2 и project3 ?

Как только я создам свой проект, я хочу, чтобы в итоге:

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

Есть идеи? Я искал в документах, но безуспешно.

Самое простое решение, которое я знаю, — запустить процесс сборки несколько раз с разными переменными среды.

Настройка команд сборки

 "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 на основе переменных env

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

Возможно, это не самый лучший ответ, но я надеюсь, что это поможет.