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

Production Checklist

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

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

자동 최적화

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

  • Server Components: Next.js는 기본적으로 Server Components를 사용합니다. Server Components는 서버에서 실행되며 클라이언트에서 렌더링할 때 JavaScript가 필요하지 않습니다. 따라서 클라이언트 측 JavaScript 번들의 크기에 영향을 미치지 않습니다. 필요한 경우 Client Components를 사용할 수 있습니다.
  • 코드 분할: Server Components는 경로 세그먼트별로 자동 코드 분할을 활성화합니다. 필요에 따라 Client Components 및 서드파티 라이브러리를 지연 로드하는 것도 고려할 수 있습니다.
  • 프리페칭: 링크가 사용자 뷰포트에 들어오면 Next.js는 백그라운드에서 해당 경로를 프리페칭합니다. 이로 인해 새로운 경로로의 탐색이 거의 즉시 이루어집니다. 필요에 따라 프리페칭을 옵트아웃할 수 있습니다.
  • 정적 렌더링: Next.js는 빌드 타임에 서버에서 Server 및 Client Components를 정적으로 렌더링하고 렌더링 결과를 캐시하여 애플리케이션 성능을 향상시킵니다. 필요에 따라 특정 경로에 대해 동적 렌더링을 선택할 수 있습니다.
  • 캐싱: Next.js는 데이터 요청, Server 및 Client Components의 렌더링 결과, 정적 자산 등을 캐싱하여 서버, 데이터베이스 및 백엔드 서비스로의 네트워크 요청 수를 줄입니다. 필요에 따라 캐싱을 옵트아웃할 수 있습니다.

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

개발 중

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

라우팅 및 렌더링

알아두면 좋은 점: 부분 사전 렌더링(실험적)은 경로의 일부가 동적이더라도 전체 경로가 동적 렌더링으로 전환되지 않도록 합니다.

데이터 가져오기 및 캐싱

  • Server Components: Server Components를 사용하여 서버에서 데이터를 가져오는 이점을 활용합니다.
  • Route Handlers: Client Components에서 백엔드 리소스에 액세스하기 위해 Route Handlers를 사용합니다. 그러나 추가 서버 요청을 피하기 위해 Server Components에서 Route Handlers를 호출하지 마십시오.
  • 스트리밍: Loading UI 및 React Suspense를 사용하여 서버에서 클라이언트로 UI를 점진적으로 전송하고 데이터를 가져오는 동안 전체 경로가 차단되지 않도록 합니다.
  • 병렬 데이터 가져오기: 필요한 경우 데이터를 병렬로 가져와 네트워크 워터폴을 줄입니다. 또한 적절한 경우 데이터 미리 로드를 고려합니다.
  • **[데이터 캐싱](/docs/app/build

ing-your-application/caching#data-cache):** 데이터 요청이 캐시되는지 여부를 확인하고 필요한 경우 캐싱을 옵트인합니다. fetch를 사용하지 않는 요청이 캐시되는지 확인합니다.

  • 정적 이미지: 애플리케이션의 정적 자산을 자동으로 캐시하기 위해 public 디렉토리를 사용합니다.

UI 및 접근성

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

보안

  • 타이팅: 데이터 객체 및/또는 특정 값을 타이팅하여 민감한 데이터가 클라이언트에 노출되지 않도록 합니다.
  • Server Actions: 사용자가 Server Actions를 호출할 수 있는 권한이 있는지 확인합니다. 권장 보안 관행을 검토합니다.
  • 환경 변수: .env.* 파일을 .gitignore에 추가하고 공개 변수만 NEXT_PUBLIC_ 접두사를 사용하도록 합니다.
  • 콘텐츠 보안 정책: 크로스 사이트 스크립팅, 클릭재킹 및 기타 코드 삽입 공격과 같은 다양한 보안 위협으로부터 애플리케이션을 보호하기 위해 콘텐츠 보안 정책을 추가하는 것을 고려합니다.

메타데이터 및 SEO

  • 메타데이터 API: 페이지 제목, 설명 등을 추가하여 애플리케이션의 검색 엔진 최적화(SEO)를 향상시키기 위해 메타데이터 API를 사용합니다.
  • Open Graph(OG) 이미지: 애플리케이션을 소셜 공유에 대비하기 위해 OG 이미지를 생성합니다.
  • 사이트맵 및 로봇: 검색 엔진이 페이지를 크롤링하고 인덱싱할 수 있도록 사이트맵 및 로봇 파일을 생성합니다.

타입 안전성

  • 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