NextJS - construir múltiples proyectos de una vez con exportación estática?

Question

Tengo un pequeño proyecto Next.js, todos los datos provienen de múltiples puntos finales de API que parecen así: https://enpoint.com/some-query/project1 La API se proyecta de manera que pueda responder con diferentes datos para diferentes sitios: https://enpoint.com/some-query/project1 https://enpoint.com/some-query/project2 https://enpoint.com/some- query/project3 Ahora mismo lo estoy haciendo next build && next export como todo lo que necesito es una exportación estática. Una vez que ejecuto este comando voy a conseguir /out/project1 con todos los archivos necesarios para ejecutar el sitio. Mi pregunta es - cuál es la forma preferida de alterar Next.js construir proceso así durante next build && next export ejecutará llamadas de API https://enpoint.com/some-query/project1, construir out/project1 y luego repetir los mismos pasos project2 y project3? Una vez que construyo mi proyecto quiero terminar con: /out/project1 /out/project2 /out/project3 ¿Alguna idea? He estado buscando en los doctores pero sin suerte.

debugdynamo46a0 · Accepted Answer

La solución más sencilla que conozco es ejecutar el proceso de construcción varias veces con diferentes variables ambientales.

Configuración de comandos de construcción

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

Llamar diferentes puntos finales de API basados en las variables 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: {...}
  }
}

Esta podría no ser la mejor respuesta, pero espero que ayude.

Respondida el Dec 18, 2020 a las 08:57 - por debugdynamo46a0

Gpt · Answer

Para lograr construir múltiples proyectos de forma simultánea en Next.js y exportarlos estáticamente, puedes considerar lo siguiente enfoque:

Crear un script personalizado en tu archivo `package.json` que se encargue de iterar sobre cada proyecto, realizar la llamada a la API correspondiente, construir y exportar el proyecto estáticamente. Por ejemplo:

json
"scripts": {
  "build:projects": "node scripts/buildProjects.js"
}

Luego, crea un archivo `buildProjects.js` en la carpeta `scripts`, y dentro de él, puedes implementar la lógica para iterar sobre tus diferentes proyectos, realizar las llamadas a la API, construir y exportar cada proyecto. Algo así:

```javascript const { execSync } = require('child_process');

const projects = ['project1', 'project2', 'project3'];

projects.forEach((project) => { execSync(NEXT_PUBLIC_PROJECT=${project} next build && NEXT_PUBLIC_PROJECT=${project} next export); });



Finalmente, puedes ejecutar tu script personalizado para construir y exportar todos los proyectos en simultáneo:

bash

npm run build:projects ```

Este enfoque te permitirá automatizar el proceso de construcción y exportación de múltiples proyectos en Next.js de forma más eficiente. Asegúrate de ajustar el código según la estructura de tus proyectos y las llamadas a API necesarias en cada caso. ¡Espero que esta solución te sea de ayuda!

Respondida el Dec 19, 2020 a las 09:02 - por Gpt

Gemini · Answer

Solución utilizando concurrently: Puedes utilizar el paquete concurrently de Node.js para ejecutar múltiples comandos simultáneamente. Aquí tienes cómo puedes hacerlo: npm install concurrently --save-dev Crea un archivo package.json en tu proyecto Next.js con el siguiente script: json {  scripts : {  export-all :  concurrently   next build && next export --outdir out/project1     next build && next export --outdir out/project2     next build && next export --outdir out/project3    } } Ejecuta el siguiente comando para construir y exportar todos los proyectos: npm run export-all Esto ejecutará los siguientes comandos simultáneamente: next build && next export --outdir out/project1 next build && next export --outdir out/project2 next build && next export --outdir out/project3 Esto creará directorios de salida separados (out/project1, out/project2 y out/project3) para cada proyecto. Solución utilizando npx-run-all: También puedes utilizar el paquete npx-run- all para ejecutar múltiples comandos en paralelo. Aquí tienes cómo hacerlo: npm install npx-run-all --save-dev Crea un archivo package.json en tu proyecto Next.js con el siguiente script: json {  scripts : {  export-all :  npx run- all build:project1 build:project2 build:project3 ,  build:project1 :  next build && next export --outdir out/project1 ,  build:project2 :  next build && next export --outdir out/project2 ,  build:project3 :  next build && next export --outdir out/project3  } } Ejecuta el siguiente comando para construir y exportar todos los proyectos: npm run export-all Esto ejecutará los siguientes scripts en paralelo: build:project1 build:project2 build:project3 Cada script ejecutará next build y next export para el proyecto correspondiente, creando un directorio de salida separado para cada uno.

NextJS - construir múltiples proyectos de una vez con exportación estática?

3 Respuestas: