제작 체크리스트

Next.js 애플리케이션을 제작 단계에서 운영 환경으로 이동하기 전에는 사용자 경험, 성능 및 보안을 최적화하기 위해 구현해야 하는 몇 가지 최적화 및 패턴이 있습니다.

본 페이지는 애플리케이션을 구축할 때 참고할 수 있는 최적의 사례를 제공하며, 제작 전과 배포 후에 알아야 할 Next.js 자동 최적화에 대해 안내합니다.

자동 최적화

이러한 Next.js 최적화 기능들은 기본적으로 활성화되어 있으며 구성이 필요하지 않습니다:

• 서버 컴포넌트: Next.js는 기본적으로 서버 컴포넌트를 사용합니다. 서버 컴포넌트는 서버에서 실행되며 클라이언트에서 렌더링하기 위해 JavaScript가 필요하지 않습니다. 따라서 클라이언트 측 JavaScript 번들의 크기에 영향을 주지 않습니다. 그리고 상호 작용이 필요한 경우 Client 컴포넌트를 사용할 수 있습니다.
• 코드 분할: 서버 컴포넌트는 라우트 세그먼트별로 자동 코드 분할을 지원합니다. 필요에 따라 Client 컴포넌트 및 적절한 타사 라이브러리를 지연 로딩할 수도 있습니다.
• 프리패칭: 사용자가 새로운 경로로 이동하는 링크를 뷰포트에 입력하면 Next.js는 해당 경로를 백그라운드에서 프리패칭합니다. 이를 통해 새로운 경로로의 이동이 거의 즉시 이루어집니다. 필요에 따라 프리패칭을 비활성화할 수도 있습니다.
• 정적 렌더링: Next.js는 서버 및 클라이언트 컴포넌트를 빌드 시에 서버에서 정적으로 렌더링하고 렌더된 결과를 캐시하여 애플리케이션 성능을 향상시킵니다. 특정 경로에 대해 동적 렌더링을 선택할 수도 있습니다.
• 캐싱: Next.js는 데이터 요청, 서버 및 클라이언트 컴포넌트의 렌더링 결과, 정적 자산 등을 캐시하여 네트워크 요청의 수를 감소시킵니다. 필요에 따라 캐싱을 비활성화할 수도 있습니다.

기본 설정은 애플리케이션 성능을 향상시키고 네트워크 요청마다 전송된 데이터의 양과 비용을 줄이기 위해 설정되어 있습니다.

개발하는 동안

애플리케이션을 개발하면서 최상의 성능과 사용자 경험을 보장하기 위해 다음 기능들을 사용하는 것을 권장합니다:

라우팅 및 렌더링

• 레이아웃: 레이아웃을 사용하여 페이지 전체에서 UI를 공유하고 네비게이션 시 부분적 렌더링을 활성화합니다.
• Link 컴포넌트: 클라이언트 측 네비게이션 및 프리페칭을 위해 Link 컴포넌트를 사용합니다.
• 에러 처리: 프로덕션 환경에서 일반적인 오류와 404 오류를 우아하게 처리하기 위해 사용자 정의 에러 페이지를 만듭니다.
• 구성 패턴: 서버 및 클라이언트 컴포넌트에 대한 권장 구성 패턴을 따르고, "use client" 바운더리의 배치를 확인하여 클라이언트 측 JavaScript 번들을 불필요하게 증가시키지 않도록합니다.
• 동적 함수: cookies()나 searchParams 프로퍼티와 같은 동적 함수를 사용할 때 전체 라우트를 동적 렌더링(또는 최상위 레이아웃에서 전체 애플리케이션)으로 변경시킬 수 있음을 유의하세요. 동적 함수 사용이 의도적인지 확인하고 적절한 곳에 Suspense 바운더리로 감싸주세요.

유용한 정보: 일부 라우트의 동적 부분만 동적으로 렌더링하도록 하는 부분 프리렌더링(실험적)은 전체 라우트가 동적 렌더링되지 않도록 합니다.

데이터 가져오기 및 캐싱

• 서버 구성 요소: 서버 구성 요소를 사용하여 서버에서 데이터를 가져오는 이점을 활용하세요.
• 라우트 핸들러: 클라이언트 구성 요소에서 백엔드 리소스에 액세스하기 위해 라우트 핸들러를 사용하세요. 그러나 추가 서버 요청을 피하려면 서버 구성 요소에서 라우트 핸들러를 호출하지 마세요.
• 스트리밍: 로딩 UI와 React Suspense를 사용하여 UI를 서버에서 클라이언트로 점진적으로 전송하고 데이터를 가져오는 동안 전체 라우트가 차단되는 것을 방지하세요.
• 병렬 데이터 가져오기: 적절한 경우 데이터를 병렬로 가져와 네트워크 폭포를 줄이세요. 또한 적절한 경우 데이터 사전로딩을 고려하세요.
• 데이터 캐싱: 데이터 요청이 캐싱되었는지 확인하고 적절한 경우 캐싱을 선택하세요. fetch를 사용하지 않는 요청은 캐싱되도록 보장하세요.
• 정적 이미지: 애플리케이션의 정적 에셋(예: 이미지)을 자동으로 캐싱하기 위해 공용 디렉토리를 사용하세요.

UI 및 접근성

• 양식 및 유효성 검사: 서버 액션을 사용하여 양식 제출, 서버 측 유효성 검사 및 오류 처리를 처리하세요.

• 폰트 모듈: 폰트 모듈을 사용하여 폰트 파일을 최적화하고, 다른 정적 자산과 함께 호스팅하며, 외부 네트워크 요청을 제거하여 레이아웃 이동을 줄입니다.

• Image 컴포넌트: Image 컴포넌트를 사용하여 이미지를 최적화하고, 레이아웃 이동을 방지하며, WebP 또는 AVIF와 같은 현대적인 포맷으로 제공합니다.

• Script 컴포넌트: Script 컴포넌트를 사용하여 서드파티 스크립트를 최적화하고, 자동으로 스크립트를 지연시켜 메인 스레드를 차단하지 않습니다.

• ESLint: 접근성 문제를 조기에 식별하기 위해 내장 eslint-plugin-jsx-a11y 플러그인을 사용합니다.

보안

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

메타데이터 및 SEO

• 메타데이터 API: 페이지 제목, 설명 등을 추가하여 애플리케이션의 검색 엔진 최적화(SEO)를 개선하는 데 Metadata API를 사용하세요.
• 오픈 그래프 (OG) 이미지: 소셜 공유를 위해 애플리케이션에 OG 이미지를 생성하세요.
• 사이트맵 및 로봇: 사이트맵 및 로봇 파일을 생성하여 검색 엔진이 페이지를 크롤링하고 색인화하는 데 도움을 줄 수 있습니다.

타입 안전성

• TypeScript와 TS 플러그인: TypeScript와 TypeScript 플러그인을 사용하여 더 나은 타입 안전성을 제공하고 오류를 조기에 잡을 수 있습니다.

프로덕션으로 진행하기 전에

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

핵심 웹 핵심 지표

• 라이트하우스 : 라이트하우스를 시크릿 창에서 실행하여 사용자가 사이트를 경험하는 방식을 더 잘 이해하고 개선할 부분을 식별할 수 있습니다. 이는 시뮬레이션 테스트이며 필드 데이터(예: 핵심 웹 핵심 지표)를 확인하는 것과 결합해야 합니다.

• useReportWebVitals 훅: 이 훅을 사용하여 핵심 웹 비탈스 데이터를 분석 도구에 전송하세요.

번들 분석

@next/bundle-analyzer 플러그인을 사용하여 JavaScript 번들의 크기를 분석하고, 애플리케이션의 성능에 영향을 미칠 수 있는 큰 모듈과 의존성을 확인하세요.

또한, 다음 도구들을 사용하여 새로운 의존성을 추가하는 것이 어떤 영향을 미칠지 이해할 수 있습니다:

• 수입 비용
• 패키지 공포
• 번들 공포
• 번들제이에스

배포 이후

애플리케이션을 배포하는 위치에 따라 추가 도구와 통합 기능을 활용하여 성능을 모니터링하고 향상시킬 수 있습니다.

Vercel로 배포하는 경우 다음을 권장합니다:

• Analytics

  • 내장된 분석 대시보드로 애플리케이션 트래픽을 이해하는 데 도움이 됩니다. 고유 방문자 수, 페이지 뷰 등을 포함한 정보를 제공합니다.

• 속도 인사이트

  • 방문자 데이터를 기반으로 한 현실 성능 인사이트를 제공하여 웹 사이트가 현장에서 어떻게 작동하는지 실질적으로 확인할 수 있습니다.

• 로그

  • 런타임 및 활동 로그를 제공하여 이슈를 디버깅하고 제품으로서의 애플리케이션을 모니터링할 수 있습니다. 또는 제3자 도구 및 서비스 목록을 보려면 통합 페이지를 참조하세요.

참고 사항: Vercel에서 제품 서비스 배포에 대한 최상의 실천 방법을 상세히 살펴보고 웹 사이트 성능을 향상시키는 전략을 확인하려면 Vercel 제품 체크리스트를 참조하세요.

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