Azure Static Web Apps に Next.js Web サイトをデプロイする

Azure Static Web Apps での Next.js のサポートは、次の 2 つのデプロイ モデルとして分類できます。

• ハイブリッド: ハイブリッド Next.js サイト。アプリ ルーター、ページ ルーター、React サーバー コンポーネントなど、すべての Next.js 機能のサポートが含まれます

• 静的: 静的 Next.js サイト。Next.js の静的 HTML エクスポート オプションを使います。

ハイブリッド Next.js アプリケーション (プレビュー)

Static Web Apps では、ハイブリッド Next.js Web サイトのデプロイがサポートされています。 これにより、アプリ ルーターや React サーバー コンポーネントなど、すべての Next.js 機能のサポートが有効になります。

ハイブリッド Next.js アプリケーションは、Static Web Apps のグローバルに分散された静的コンテンツ ホストとマネージド バックエンドの機能を使ってホストされます。 Next.js のバックエンド機能は、機能の完全な互換性が保証されるように専用の App Service インスタンスでホストされます。

ハイブリッド Next.js アプリケーションでは、ページとコンポーネントの動的レンダリング、静的レンダリング、または増分レンダリングが可能です。 Next.js は、最適なパフォーマンスのため、データのフェッチに基づいて最適なレンダリングとキャッシュのモデルを自動的に決定します。

プレビューで使用できる主な機能は次のとおりです。

• アプリ ルーターとページ ルーター
• React サーバー コンポーネント
• ハイブリッド レンダリング
• ルート ハンドラー
• イメージの最適化
• 国際化
• ミドルウェア
• 認証

ハイブリッド Next.js アプリケーションを Azure にデプロイする方法については、ハイブリッド Next.js アプリケーションのデプロイに関するチュートリアルに従ってください。

プレビューでサポートされていない機能

Static Web Apps の次の機能は、ハイブリッド レンダリングを使用する Next.js ではサポートされていません。

• Azure Functions、Azure App Service、Azure Container Apps、または Azure API Management を使用するリンクされた API。
• SWA CLI のローカル エミュレーションとデプロイ。
• staticwebapp.config.json ファイルの部分的なサポート。
  • ナビゲーション フォールバックはサポートされていません。
  • Next.js アプリケーション内のルートへのルートの書き換えは、next.config.js 内で構成する必要があります。
  • staticwebapp.config.json ファイル内の構成は、next.config.js 内の構成より優先されます。
  • 機能の完全な互換性のためには、next.config.js を使って Next.js サイトの構成を処理する必要があります。
• skip_app_build と skip_api_build は、Azure/static-web-apps-deploy@v1 デプロイ イメージ内では使用できません。
• 増分静的再生成 (ISR) では、イメージのキャッシュはサポートされていません。

Note

ハイブリッド Next.js アプリケーションの最大アプリ サイズは 250 MB です。 最適化されたアプリ サイズには、Next.js によるスタンドアロン機能を使用します。 これでも十分でない場合、アプリ サイズの要件が 250 MB を超える場合は、静的 HTML エクスポート済み Next.js の使用を検討してください。

静的 HTML エクスポート

Next.js の静的 HTML エクスポート機能を使用して、Next.js 静的サイトを展開できます。 この構成では、ビルド中に静的 HTML ファイルが生成され、すべての要求に対してキャッシュおよび再利用されます。 Next.js の静的エクスポートのサポートされている機能を参照してください。

静的 Next.js サイトは、最適なパフォーマンスのため、Azure Static Web Apps のグローバルに分散されたネットワークでホストされます。 さらに、API のリンクされたバックエンドを追加できます。

Next.js アプリケーションの静的エクスポートを有効にするには、next.config.js で output: 'export' を nextConfig に追加します。

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

GitHub Actions と Azure DevOps の構成で、output_location を指定する必要もあります。 既定では、この値は Next.js の既定値に従って out に設定されます。 Next.js の構成でカスタム出力の場所が示されている場合、ビルドに指定する値は、Next.js のエクスポートで構成されているものと一致する必要があります。

カスタム ビルド スクリプトを使用している場合は、GitHub Actions/Azure DevOps YAML ファイルの Static Web Apps タスクで IS_STATIC_EXPORT を true に設定します。

次の例は、静的エクスポートに対して有効になっている 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 アプリケーションを Azure にデプロイする方法については、静的にレンダリングされた Next.js Web サイトのデプロイに関するチュートリアルに従ってください。