Azure Static Web Apps에 Next.js 웹 사이트 배포

Azure Static Web Apps에 대한 Next.js 지원은 정적 HTML 내보내기 Next.js 애플리케이션과 하이브리드 렌더링의 두 가지 배포 모델로 분류할 수 있습니다. 여기에는 서버 쪽 렌더링증분 정적 다시 생성이 포함됩니다.

정적 HTML 내보내기

Next.js의 정적 HTML 내보내기 기능을 사용하여 Next.js 정적 사이트를 배포할 수 있습니다. 이 구성은 빌드 중에 정적 HTML 파일을 생성하며 모든 요청에 대해 캐시되고 재사용됩니다.

Next.js 애플리케이션의 정적 내보내기를 사용하도록 설정하려면 package.jsonbuild npm 스크립트에 next export를 추가합니다.

{
    "scripts": {
        "build": "next build && next export"
    }
}

사용자 지정 빌드 스크립트를 사용하는 경우 GitHub Actions/Azure DevOps YAML 파일의 Static Web Apps 작업에서 IS_STATIC_EXPORTtrue로 설정합니다.

다음 예에서는 정적 내보내기에 대해 사용하도록 설정된 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: "public" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

정적으로 내보낸 Next.js 애플리케이션을 Azure에 배포하는 방법을 알아보려면 정적으로 렌더링된 Next.js 웹 사이트 배포 자습서를 따릅니다.

하이브리드 Next.js 애플리케이션(미리 보기)

Static Web Apps는 페이지 기준으로 정적 생성과 SSR(서버 쪽 렌더링) 중에서 선택할 수 있는 하이브리드 Next.js 웹 사이트 배포를 지원합니다. 정적 생성은 성능상의 이유로 SSR보다 자주 사용됩니다.

미리 보기에서 사용할 수 있는 주요 기능은 다음과 같습니다.

하이브리드 Next.js 애플리케이션을 Azure에 배포하는 방법을 알아보려면 하이브리드 Next.js 애플리케이션 배포 자습서를 따릅니다.

미리 보기에서 지원되지 않는 기능

미리 보기 동안 Static Web Apps의 다음 기능은 서버 쪽 렌더링을 사용하는 Next.js에 대해 지원되지 않습니다.

  • Azure Functions, Azure App Service, Azure Container Apps 또는 Azure API Management를 사용하는 API.

  • SWA CLI를 통한 배포.

  • Static Web Apps는 인증 및 권한 부여를 제공했습니다.

    • 대신 Next.js 인증 기능을 사용할 수 있습니다.
  • staticwebapps.config.json 파일

    • 사용자 지정 헤더 및 라우팅과 같은 기능은 next.config.js 파일을 사용하여 제어할 수 있습니다.
  • skip_app_buildskip_api_build는 사용할 수 없습니다.

  • 하이브리드 Next.js 애플리케이션의 최대 앱 크기는 100MB입니다. 요구 사항이 100MB 이상인 경우 정적 HTML 내보내기 Nextjs 앱을 사용하는 것이 좋습니다.

  • ISR(증분 정적 다시 생성)은 이미지 캐싱 및 주문형 유효성 재검사를 지원하지 않습니다.