다음을 통해 공유

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

  • 아티클

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

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

Static Web Apps는 하이브리드 Next.js 웹 사이트 배포를 지원합니다. 이렇게 하면 앱 라우터 및 React 서버 구성 요소와 같은 모든 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 서비스 선택: Azure Functions, Azure App Service, Azure Container Apps 또는 Azure API Management를 사용하여 연결된 API입니다.
  • SWA CLI 기능: 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 애플리케이션의 최대 앱 크기는 250MB입니다. 최적화된 앱 크기에 Next.js의 독립 실행형 기능을 사용합니다. 이것으로 충분하지 않으면 앱 크기 요구 사항이 250MB 이상인 경우 정적 HTML 내보내기 Next.js를 사용하는 것이 좋습니다.

서버 쪽 렌더링

다음 단계에서는 사용자 지정 백 엔드를 표준 플랜 및 정적 웹앱 위에 연결하는 방법을 보여 줍니다.

참고 항목

연결된 백 엔드는 표준 플랜 이상을 사용하는 사이트에서만 사용할 수 있습니다.

  1. Azure Portal에서 정적 웹앱으로 이동합니다.

  2. 설정을 선택한 다음, 측면 메뉴에서 API를 선택합니다.

  3. 연결된 백 엔드 구성을 선택합니다.

  4. 새 App Service 요금제를 만들거나 기존 App Service 요금제를 선택합니다.

    선택한 App Service 요금제는 S1 SKU 이상을 사용해야 합니다.

  5. 링크를 클릭합니다.

정적 HTML 내보내기

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

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

Next.js 애플리케이션의 정적 내보내기를 사용하도록 설정하려면 next.config.js의 nextConfig에 output: 'export'을(를) 추가합니다.

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