Compartir a través de

Implementación de sitios web de Next.js en Azure Static Web Apps

  • Artículo

La compatibilidad de Next.js en Azure Static Web Apps puede clasificarse en dos modelos de implementación:

Aplicación Next.js híbrida (versión preliminar)

Static Web Apps admite la implementación de sitios web híbridos de Next.js. Esto permite la compatibilidad con todas las características de Next.js, como App Router y los componentes de React Server.

Las aplicaciones Next.js híbridas se hospedan con el host de contenido estático distribuido globalmente y las funciones de back-end administradas de Static Web Apps. Las funciones de back-end de Next.js se hospedan en una instancia dedicada de App Service para garantizar la compatibilidad total con las características.

Con las aplicaciones de Next.js híbridas, las páginas y los componentes se pueden representar de forma dinámica, estática o incremental. Next.js determina de manera automática el mejor modelo de representación y de almacenamiento en caché en función de la captura de datos para obtener un rendimiento óptimo.

Las características clave que están disponibles en la versión preliminar son:

Siga el tutorial de implementación de aplicaciones de Next.js híbridas para aprender a implementar una aplicación de Next.js híbrida en Azure.

Características no admitidas en versión preliminar

Las siguientes características de Static Web Apps no se admiten para Next.js con representación híbrida:

  • Seleccionar servicios de Azure: API vinculadas que usan Azure Functions, Azure App Service, Azure Container Apps o Azure API Management.
  • Características de la CLI de SWA: emulación e implementación local de la CLI de SWA.
  • Soporte parcial de características: no se admiten las siguientes propiedades en el archivo staticwebapp.config.json:
    • No se admite la reserva de navegación.
    • Las reescrituras de rutas a las rutas que se encuentran dentro de la aplicación de Next.js deben configurarse en next.config.js.
    • La configuración que se encuentra dentro del archivo staticwebapp.config.json tiene prioridad sobre la configuración dentro de next.config.js.
    • La configuración del sitio de Next.js debe controlarse mediante next.config.js para obtener una compatibilidad completa con las características.
  • Compilación omitiendo: para aplicaciones de Next.js si skip_api_build=true, Static Web Apps no quita las dependencias de desarrollo ni agrega el paquete sharp de manera predeterminada. Si quiere estas optimizaciones, agréguelas a los pasos de compilación personalizados antes de pasar skip_app_build=true.
  • Regeneración estática incremental (ISR): no se admite el almacenamiento en caché de imágenes.

Nota:

El tamaño máximo de la aplicación de Next.js híbrida es 250 MB. Use la característica independiente de Next.js para tamaños de aplicación optimizados. Si esto no fuera suficiente, considere la posibilidad de usar la exportación a HTML estático de Next.js si el requisito de tamaño de la aplicación es superior a 250 MB.

Representación del lado servidor

Los siguientes pasos muestran cómo asociar un back-end personalizado al plan estándar y a las aplicaciones web estáticas superiores.

Nota:

Los back-end vinculados solo están disponibles para los sitios que usan el plan estándar o superior.

  1. Vaya a la aplicación web estática en Azure Portal.

  2. Seleccione Configuración y, después, API en el menú lateral.

  3. Seleccione Configurar back-end vinculado.

  4. Cree un nuevo plan de App Service o seleccione un plan de App Service existente.

    El plan de App Service seleccionado debe usar al menos una SKU de S1.

  5. Haga clic en Link.

Exportación HTML estática

Puede implementar un sitio estático de Next.js mediante la característica de exportación HTML estática de Next.js. Esta configuración genera archivos HTML estáticos durante la compilación, que se almacenan en caché y se reutilizan para todas las solicitudes. Consulte las características admitidas de las exportaciones estáticas de Next.js.

Los sitios de Next.js estáticos se hospedan en la red distribuida globalmente de Azure Static Web Apps para obtener un rendimiento óptimo. Además, puede agregar back-end vinculados para las API.

Para habilitar la exportación estática de una aplicación de Next.js, agregue output: 'export' a nextConfig en next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

También debe especificar el valor de output_location en la configuración de Acciones de GitHub/Azure DevOps. De forma predeterminada, este valor está establecido en out según los valores predeterminados de Next.js. Si se indica una ubicación de salida personalizada en la configuración de Next.js, el valor proporcionado para la compilación debe coincidir con el configurado en la exportación de Next.js.

Si usa scripts de compilación personalizados, establezca IS_STATIC_EXPORT en true en la tarea Static Web Apps del archivo YAML de Acciones de GitHub/Azure DevOps.

En el ejemplo siguiente se muestra el trabajo de Acciones de GitHub que está habilitado para las exportaciones estáticas.

      - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "out" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

Siga el tutorial implementación de sitios web de Next.js de representación estática para aprender a implementar una aplicación de Next.js exportada estáticamente en Azure.