Azure Static Web Apps'te Next.js web sitelerini dağıtma

Azure Static Web Apps'te Next.js desteği iki dağıtım modeli olarak kategorilere ayırılabilir:

• Karma: Uygulama Yönlendiricisi, Sayfa Yönlendiricisi ve React Server Bileşenleri gibi tüm Next.js özellikleri için destek içeren karma Next.js siteleri

• Statik: Next.js Statik HTML Dışarı Aktarma seçeneğini kullanan statik Next.js siteleri.

Karma Next.js uygulamaları (önizleme)

Statik Web Uygulamaları, karma Next.js web sitelerinin dağıtılmasına yönelik destek sağlar. Bu, Uygulama Yönlendiricisi ve React Server Bileşenleri gibi tüm Next.js özellikleri için destek sağlar.

Karma Next.js uygulamaları, Statik Web Apps genel olarak dağıtılmış statik içerik konağı ve yönetilen arka uç işlevleri kullanılarak barındırılır. Next.js arka uç işlevleri, tam özellik uyumluluğu sağlamak için ayrılmış bir App Service örneğinde barındırılır.

Karma Next.js uygulamalarıyla sayfalar ve bileşenler dinamik olarak işlenebilir, statik olarak işlenebilir veya artımlı olarak işlenebilir. Next.js, en iyi performans için verilerinizi getirme işlemine göre en iyi işleme ve önbelleğe alma modelini otomatik olarak belirler.

Önizlemede kullanılabilen temel özellikler şunlardır:

• Uygulama Yönlendiricisi ve Sayfalar Yönlendiricisi
• React Server Bileşenleri
• Karma işleme
• Yol İşleyicileri
• Görüntü iyileştirme
• Uluslararası duruma getirme
• Ara Yazılım
• Kimlik Doğrulaması

Karma Next.js uygulamasını Azure'a dağıtmayı öğrenmek için karma Next.js uygulamalarını dağıtma öğreticisini izleyin.

Önizlemede desteklenmeyen özellikler

Statik Web Apps'in aşağıdaki özellikleri karma işleme ile Next.js için desteklenmez:

• Azure hizmetleri: Azure İşlevleri, Azure Uygulaması Hizmeti, Azure Container Apps veya Azure API Management kullanan bağlı API'ler'i seçin.
• SWA CLI özellikleri: SWA CLI yerel öykünmesi ve dağıtımı.
• Kısmi özellikler desteği: Dosyadaki staticwebapp.config.json aşağıdaki özellikler desteklenmez:
  • Gezinti geri dönüşü desteklenmiyor.
  • Next.js uygulamasının içindeki yollara yönlendirme yeniden yazma işlemleri içinde next.config.jsyapılandırılmalıdır.
  • Dosya içindeki yapılandırma, staticwebapp.config.json içindeki next.config.jsyapılandırmadan önceliklidir.
  • Next.js sitesinin yapılandırması, tam özellik uyumluluğu için kullanılarak next.config.js işlenmelidir.
• Derleme atlama: Next.js uygulamaları skip_api_build=trueiçin, Static Web Apps geliştirme bağımlılıklarını kaldırmaz veya keskin paketi varsayılan olarak eklemez. Bu iyileştirmeleri istiyorsanız, geçirmeden skip_app_build=trueönce bunları özel derleme adımlarınıza ekleyin.
• Artımlı statik yeniden oluşturma (ISR):Görüntü önbelleğe alma desteklenmez.

Not

Karma Next.js uygulaması için maksimum uygulama boyutu 250 MB'tır. İyileştirilmiş uygulama boyutları için Next.js tek başına özelliğini kullanın. Bu yeterli değilse, uygulama boyutu gereksiniminiz 250 MB'tan fazlaysa Statik HTML dışarı aktarılan Next.js kullanmayı göz önünde bulundurun.

Sunucu tarafı işleme

Aşağıdaki adımlarda, özel arka ucu Standart planınızla ve statik web uygulamalarının üzerinde ilişkilendirme adımları gösterilmektedir.

Not

Bağlantılı arka uçlar yalnızca Standart planı veya üzerini kullanan sitelerde kullanılabilir.

1. Azure portalında statik web uygulamanıza gidin.

2. Ayarlar'ı ve ardından yan menüden API'leri seçin.

3. Bağlı arka ucu yapılandır'ı seçin.

4. Yeni bir App Service Planı oluşturun veya mevcut bir App Service Planını seçin.

   Seçtiğiniz App Service Planı en az bir S1 SKU kullanmalıdır.

5. Bağlantı'ya tıklayın.

Statik HTML dışarı aktarma

Next.js statik HTML dışarı aktarma özelliğini kullanarak Next.js statik site dağıtabilirsiniz. Bu yapılandırma, derleme sırasında tüm istekler için önbelleğe alınan ve yeniden kullanılan statik HTML dosyaları oluşturur. Next.js statik dışarı aktarmaların desteklenen özelliklerine bakın.

Statik Next.js siteleri, en iyi performans için Azure Static Web Apps genel olarak dağıtılmış ağda barındırılır. Ayrıca, API'leriniz için bağlı arka uçlar ekleyebilirsiniz.

Next.js bir uygulamanın statik dışarı aktarmasını etkinleştirmek için içindeki nextConfig output: 'export'öğesine ekleyinnext.config.js.

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

GitHub Actions/Azure DevOps yapılandırmasında da öğesini output_location belirtmeniz gerekir. Varsayılan olarak, bu değer varsayılan Next.js göre ayarlanır out . Next.js yapılandırmasında özel bir çıkış konumu belirtilirse, derleme için sağlanan değer Next.js dışarı aktarmada yapılandırılan değerle eşleşmelidir.

Özel derleme betikleri kullanıyorsanız GitHub Actions/Azure DevOps YAML dosyasının Statik Web Uygulamaları görevinde olarak ayarlayın IS_STATIC_EXPORTtrue .

Aşağıdaki örnekte, statik dışarı aktarmalar için etkinleştirilen GitHub Actions işi gösterilmektedir.

      - 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

Statik olarak dışarı aktarılan bir Next.js uygulamasını Azure'a dağıtmayı öğrenmek için statik olarak işlenmiş Next.js web sitelerini dağıtma öğreticisini izleyin.