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

  • 아티클

Azure Static Web Apps의 Next.js 지원은 다음 두 가지 배포 모델로 분류할 수 있습니다.

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

Static Web Apps는 하이브리드 Next.js 웹 사이트 배포를 지원합니다. 이렇게 하면 앱 라우터 및 React Server 구성 요소와 같은 모든 Next.js 기능을 지원할 수 있습니다.

하이브리드 Next.js 애플리케이션은 전역적으로 분산된 정적 콘텐츠 호스트 및 관리되는 백 엔드 함수를 사용하여 Static Web Apps를 사용하여 호스트됩니다. Next.js 백 엔드 함수는 전체 기능 호환성을 보장하기 위해 전용 App Service 인스턴스에서 호스트됩니다.

하이브리드 Next.js 애플리케이션을 사용하면 페이지 및 구성 요소를 동적으로 렌더링하거나, 정적으로 렌더링하거나, 증분 방식으로 렌더링할 수 있습니다. Next.js 최적의 성능을 위해 데이터 페치에 따라 최상의 렌더링 및 캐싱 모델을 자동으로 결정합니다.

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

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

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

Static Web Apps의 다음 기능은 하이브리드 렌더링을 사용하는 Next.js 지원되지 않습니다.

  • Azure Functions, Azure 앱 Service, Azure Container Apps 또는 Azure API Management를 사용하는 연결된 API입니다.
  • SWA CLI 로컬 에뮬레이션 및 배포.
  • 파일에 대한 staticwebapp.config.json 부분 지원입니다.
    • 탐색 대체는 지원되지 않습니다.
    • Next.js 애플리케이션 내의 경로에 대한 경로 다시 쓰기를 구성 next.config.js해야 합니다.
    • 파일 next.config.js내의 구성이 staticwebapp.config.json .
    • 전체 기능 호환성을 위해 next.config.js Next.js 사이트에 대한 구성을 처리해야 합니다.
  • skip_app_buildskip_api_build 배포 이미지 내에서 Azure/static-web-apps-deploy@v1 사용할 수 없습니다.
  • ISR(증분 정적 다시 생성)은 이미지 캐싱을 지원하지 않습니다.

참고 항목

하이브리드 Next.js 애플리케이션의 최대 앱 크기는 250MB입니다. 최적화된 앱 크기에 Next.js의 독립 실행형 기능을 사용합니다. 이것이 충분하지 않은 경우 앱 크기 요구 사항이 250MB를 초과하는 경우 Next.js 내보낸 정적 HTML을 사용하는 것이 좋습니다.

정적 HTML 내보내기

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

정적 Next.js 사이트는 최적의 성능을 위해 Azure Static Web Apps 전역 분산 네트워크에서 호스트됩니다. 또한 API에 대한 연결된 백 엔드를 추가할 수 있습니다.

Next.js 애플리케이션의 정적 내보내기를 사용하도록 설정하려면 다음의 nextConfig에 추가 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

또한 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 웹 사이트 배포 자습서를 따릅니다.