🎉 공식문서 번역에 참여해주세요.  🐙  Github 바로가기  🐙
Docs
Pages Router
Building Your Application
Deploying
Production Checklist

Production Checklist

Next.js 애플리케이션을 프로덕션으로 배포하기 전에 최상의 사용자 경험, 성능 및 보안을 보장하기 위해 고려해야 할 몇 가지 최적화 및 패턴이 있습니다.

이 페이지에서는 애플리케이션을 빌드할 때, 프로덕션으로 이동하기 전에, 배포 후 사용할 수 있는 모범 사례와 자동 Next.js 최적화에 대해 안내합니다.

자동 최적화

다음 Next.js 최적화는 기본적으로 활성화되어 있으며 별도의 구성 없이 사용할 수 있습니다:

  • 코드 분할: Next.js는 페이지별로 애플리케이션 코드를 자동으로 코드 분할합니다. 즉, 현재 페이지에 필요한 코드만 로드됩니다. 필요에 따라 서드파티 라이브러리를 지연 로드하는 것도 고려할 수 있습니다.
  • 프리페칭: 링크가 사용자 뷰포트에 들어오면 Next.js는 백그라운드에서 해당 경로를 프리페칭합니다. 이로 인해 새로운 경로로의 탐색이 거의 즉시 이루어집니다. 필요에 따라 프리페칭을 옵트아웃할 수 있습니다.
  • 자동 정적 최적화: Next.js는 차단 데이터 요구사항이 없는 페이지가 정적이라는 것을 자동으로 판단합니다. 최적화된 페이지는 캐시될 수 있으며 여러 CDN 위치에서 최종 사용자에게 제공될 수 있습니다. 필요에 따라 서버 사이드 렌더링을 선택할 수 있습니다.

이러한 기본 설정은 애플리케이션 성능을 향상시키고 각 네트워크 요청 시 전송되는 데이터 양과 비용을 줄이는 것을 목표로 합니다.

개발 중

애플리케이션을 빌드하는 동안 최상의 성능과 사용자 경험을 보장하기 위해 다음 기능을 사용하는 것이 좋습니다:

라우팅 및 렌더링

데이터 가져오기 및 캐싱

  • API Routes: 백엔드 리소스에 액세스하기 위해 Route Handlers를 사용하고 민감한 비밀이 클라이언트에 노출되지 않도록 합니다.
  • 데이터 캐싱: 데이터 요청이 캐시되는지 여부를 확인하고 필요한 경우 캐싱을 옵트인합니다. getStaticProps를 사용하지 않는 요청이 적절히 캐시되는지 확인합니다.
  • 증분 정적 재생성: 전체 사이트를 다시 빌드하지 않고 빌드 후 정적 페이지를 업데이트하려면 증분 정적 재생성을 사용합니다.
  • 정적 이미지: 애플리케이션의 정적 자산을 자동으로 캐시하기 위해 public 디렉토리를 사용합니다.

UI 및 접근성

  • 폰트 모듈: Font Module을 사용하여 폰트를 최적화하고, 폰트 파일을 다른 정적 자산과 함께 자동으로 호스팅하며, 외부 네트워크 요청을 제거하고 레이아웃 이동 (opens in a new tab)을 줄입니다.
  • <Image> 컴포넌트: 이미지 최적화 컴포넌트를 사용하여 이미지를 자동으로 최적화하고, 레이아웃 이동을 방지하며, WebP 또는 AVIF와 같은 최신 형식으로 제공합니다.
  • <Script> 컴포넌트: 서드파티 스크립트를 최적화하는 컴포넌트를 사용하여 스크립트를 자동으로 지연시키고 메인 스레드를 차단하지 않도록 합니다.
  • ESLint: 내장된 eslint-plugin-jsx-a11y 플러그인을 사용하여 초기 접근성 문제를 찾아냅니다.

보안

  • 환경 변수: .env.* 파일을 .gitignore에 추가하고 공개 변수만 NEXT_PUBLIC_ 접두사를 사용하도록 합니다.
  • 콘텐츠 보안 정책: 크로스 사이트 스크립팅, 클릭재킹 및 기타 코드 삽입 공격과 같은 다양한 보안 위협으로부터 애플리케이션을 보호하기 위해 콘텐츠 보안 정책을 추가하는 것을 고려합니다.

메타데이터 및 SEO

  • <Head> 컴포넌트: next/head 컴포넌트를 사용하여 페이지 제목, 설명 등을 추가합니다.

타입 안전성

  • TypeScript 및 TS 플러그인: TypeScript 및 TypeScript 플러그인을 사용하여 더 나은 타입 안전성을 확보하고, 오류를 조기에 발견할 수 있습니다.

프로덕션으로 가기 전에

프로덕션으로 가기 전에 next build를 실행하여 로컬에서 애플리케이션을 빌드하고 빌드 오류를 확인한 후, next start를 실행하여 프로덕션과 유사한 환경에서 애플리케이션의 성능을 측정할 수 있습니다.

핵심 웹 바이탈

  • Lighthouse (opens in a new tab): 인프라에서 Lighthouse를 실행하여 사용자가 사이트를 어떻게 경험하는지 더 잘 이해하고 개선할 영역을 식별합니다. 이는 시뮬레이션된 테스트이며, 필드 데이터(예: 핵심 웹 바이탈)와 함께 확인해야 합니다.

번들 분석

@next/bundle-analyzer 플러그인을 사용하여 JavaScript 번들의 크기를 분석하고 애플리케이션 성능에 영향을 미칠 수 있는 큰 모듈 및 종속성을 식별합니다.

또한, 다음 도구를 사용하여 애플리케이션에 새로운 종속성을 추가할 때의 영향을 이해할 수 있습니다:

배포 후

애플리케이션을 배포한 후에는 추가 도구 및 통합을 사용하여 애플리케이션의 성능을 모니터링하고 개선할 수 있습니다.

Vercel 배포의 경우, 다음을 권장합니다:

알아두면 좋은 점:

Vercel에서의 프로덕션 배포에 대한 모범 사례를 종합적으로 이해하고 웹사이트 성능을 개선하기 위한 자세한 전략을 확인하려면 Vercel Production Checklist (opens in a new tab)를 참조하십시오.

이 권장 사항을 따르면 사용자를 위해 더 빠르고, 더 신뢰할 수 있으며, 더 안전한 애플리케이션을 구축할 수 있습니다.

DeployingStatic Exports