Развертывание веб-сайтов Next.js на Статические веб-приложения Azure

  • Статья

Next.js поддержку Статические веб-приложения Azure можно классифицировать как две модели развертывания:

Гибридные приложения Next.js (предварительная версия)

Статические веб-приложения поддерживает развертывание гибридных веб-сайтов Next.js. Это обеспечивает поддержку всех Next.js функций, таких как маршрутизатор приложений и компоненты сервера React.

Гибридные Next.js приложения размещаются с помощью Статические веб-приложения глобально распределенного узла статического содержимого и управляемых внутренних функций. Next.js серверные функции размещаются в выделенном экземпляре Служба приложений для обеспечения полной совместимости функций.

С помощью гибридных Next.js приложений страниц и компонентов можно динамически отрисовыть, статически отрисовывая или добавочная отрисовка. Next.js автоматически определяет лучшую модель отрисовки и кэширования на основе получения данных для оптимальной производительности.

Основные функции, доступные в предварительной версии:

Следуйте инструкциям по развертыванию гибридных Next.js приложений , чтобы узнать, как развернуть гибридное приложение Next.js в Azure.

Неподдерживаемые функции в предварительной версии

Следующие функции Статические веб-приложения не поддерживаются для Next.js с гибридной отрисовкой:

  • Связанные API с помощью Функции Azure, службы приложение Azure, приложений контейнеров Azure или Azure Управление API.
  • Локальная эмуляция и развертывание SWA CLI.
  • Частичная поддержка staticwebapp.config.json файла.
    • Резервный вариант навигации не поддерживается.
    • Перезаписи маршрутов в приложении Next.js должны быть настроены в next.config.jsпределах .
    • Конфигурация в staticwebapp.config.json файле имеет приоритет над конфигурацией внутри next.config.js.
    • Настройка сайта Next.js должна обрабатываться с помощью next.config.js полной совместимости функций.
  • skip_app_build и skip_api_build не может использоваться в образе Azure/static-web-apps-deploy@v1 развертывания.
  • Добавочное статическое восстановление (ISR) не поддерживает кэширование изображений.

Примечание.

Максимальный размер приложения для гибридного приложения Next.js составляет 250 МБ. Используйте автономную функцию, Next.js для оптимизированных размеров приложений. Если это недостаточно, рассмотрите возможность использования статического HTML-файла, экспортированного Next.js, если размер приложения превышает 250 МБ.

Статический экспорт HTML

Вы можете развернуть статический сайт Next.js с помощью функции статического экспорта HTML Next.js. Эта конфигурация создает статические HTML-файлы во время сборки, которые кэшируются и используются повторно для всех запросов. См. поддерживаемые функции Next.js статических экспортов.

Статические Next.js сайты размещаются в глобально распределенной сети Статические веб-приложения Azure для оптимальной производительности. Кроме того, можно добавить связанные серверные части для API.

Чтобы включить статический экспорт приложения Next.js, добавьте output: 'export' в следующую конфигурацию next.config.js.

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

Необходимо также указать в output_location конфигурации GitHub Actions/Azure DevOps. По умолчанию это значение равно out Next.js по умолчанию. Если в конфигурации Next.js указано пользовательское расположение вывода, значение, указанное для сборки, должно соответствовать значению, настроенному в экспорте Next.js.

Если вы используете пользовательские скрипты сборки, установите значение IS_STATIC_EXPORTtrue в задаче Статические веб-приложения файла GitHub Actions/Azure DevOps YAML.

В следующем примере показано задание GitHub Actions, которое включено для статических экспортов.

      - 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

Следуйте инструкциям по развертыванию статических Next.js веб-сайтов , чтобы узнать, как развернуть статическое экспортируемое приложение Next.js в Azure.