[NextJS] next.js 개발중 권장 사항

 

Next.JS 에서는  애플리케이션을 구축할 때 최고의 성능과 사용자 경험을 보장하기 위해 다음과 같은 기능을 사용하는 것을 권장하고 있다.

 

라우팅 및 렌더링

- Layouts: 페이지 간에 UI를 공유하고 탐색 시 일부 렌더링을 활성화하기 위해 레이아웃을 사용하기

 

- <Link> 컴포넌트: 클라이언트 측 탐색 및 프리페치에 <Link> 컴포넌트를 사용하기

 

- 에러 처리: production 환경에서 catch-all 에러와 404 에러를 수용하려면 사용자 정의 에러 페이지를 만들어서 유연하게 처리하기

 

- 합성 패턴: 서버 및 클라이언트 컴포넌트에 대한 권장 합성 패턴을 따르고 "use client" 경계의 배치를 확인하여 불필요하게 클라이언트 측 JavaScript 번들 크기를 증가시키지 않도록 주의하자.

- 동적 함수: cookies() 및 searchParams prop과 같은 동적 함수는 전체 라우트를 동적 렌더링으로 선택하게 한다(또는 루트 레이아웃에서 사용 시 전체 애플리케이션). 동적 함수 사용이 의도된 것인지, 적절한 곳에서 <Suspense> 경계로 둘러싸고 있는지 확인해야 한다.

 

- Partial Prerendering (실험적): 라우트의 일부를 동적으로 만들 수 있도록 허용하고 전체 라우트를 동적 렌더링으로 선택하지 않도록 한다.

 

데이터 가져오기 및 캐싱

- 서버 컴포넌트: 서버 컴포넌트를 사용하여 서버에서 데이터를 가져오는 이점을 활용하자.

 

- 라우트 핸들러: 클라이언트 컴포넌트에서 백엔드 리소스에 액세스(접근)하기 위해 라우트 핸들러를 사용하자. 그러나 추가 서버 요청을 피하기 위해 서버 컴포넌트에서 라우트 핸들러를 호출하지 않도록 주의해라.

 

-스트리밍: 로딩 UI 및 React Suspense를 사용하여 서버에서 클라이언트로 UI를 점진적으로 전송하고 데이터를 가져올 때 전체 라우트가 차단되지 않도록 해야 한다.

 

- 병렬 데이터 가져오기: 적절한 경우에 데이터를 병렬로 가져와서 네트워크 폭포를 줄이자. 또한 적절한 곳에서 데이터를 사전로드하는 것을 고려하자.

 

- 데이터 캐싱: 데이터 요청이 캐시되는지 확인하고 필요한 경우 캐싱에 포함시키자. fetch를 사용하지 않는 요청은 캐시되어 있는지 확인하자.

 

- 정적 이미지: public 디렉토리를 사용하여 애플리케이션의 정적 자산 (예: 이미지)을 자동으로 캐시하자.

 

UI 및 접근성

- 양식 및 유효성 검사: 양식 제출, 서버 측 유효성 검사 및 오류 처리를 처리하기 위해 서버 액션(server actions)을 사용하자.

 

- 글꼴 모듈: 글꼴 파일을 자동으로 다른 정적 자산과 함께 호스팅하고 외부 네트워크 요청을 제거하여 레이아웃 이동을 줄이는 Font Module을 사용하자.

 

- <Image> 컴포넌트: Image Component를 사용하여 이미지를 최적화하고 레이아웃 이동을 방지하며 WebP 또는 AVIF와 같은 현대적인 형식으로 제공하자.

 

- <Script> 컴포넌트: Script Component를 사용하여 외부 스크립트를 자동으로 지연시키고 메인 스레드를 차단하지 않도록 최적화하자.

 

- ESLint: 접근성 문제를 조기에 확인하기 위해 내장된 eslint-plugin-jsx-a11y 플러그인을 사용하자.

 

보안

- Tainting: 데이터 객체 및/또는 특정 값이 클라이언트에 노출되지 않도록 tainting을 사용하자.

 

- 서버 액션: 서버 액션을 호출하는 데 사용자가 인가되었는지 확인하자. 권장되는 보안 사례를 검토하자.

 

- 환경 변수: .env.* 파일이 .gitignore에 추가되었는지 확인하고 공개 변수만 NEXT_PUBLIC_로 접두사를 붙이자.

 

- 콘텐츠 보안 정책: 다양한 보안 위협 (예: 크로스 사이트 스크립팅, 클릭 재킹 및 기타 코드 삽입 공격)으로부터 애플리케이션을 보호하기 위해 콘텐츠 보안 정책을 추가하는 것을 고려하자

 

메타데이터 및 SEO

- Metadata API: 페이지 제목, 설명 등을 추가하여 애플리케이션의 검색 엔진 최적화를 향상시키기 위해 Metadata API를 사용하자.

 

- Open Graph (OG) 이미지: 소셜 공유를 위해 애플리케이션을 준비하기 위해 OG 이미지를 생성하자.

- 사이트맵 및 로봇: 사이트맵 및 로봇 파일을 생성하여 검색 엔진이 페이지를 크롤링하고 색인화하도록 돕자.

 

타입 안전성

- TypeScript 및 TS 플러그인: 더 나은 타입 안전성을 위해 TypeScript 및 TypeScript 플러그인을 사용하라. 이를 통해 오류를 조기에 찾을 수 있다.

 

프로덕션으로 이동하기 전

프로덕션으로 이동하기 전에 로컬에서 애플리케이션을 빌드하고 빌드 오류를 잡기 위해 next build를 실행한 다음, 프로덕션과 유사한 환경에서 애플리케이션 성능을 측정하기 위해 next start를 실행하자.

 

Core Web Vitals

- Lighthouse: 익명 모드에서 Lighthouse를 실행하여 사용자가 사이트를 경험하는 방식을 더 잘 이해하고 개선할 수 있는 지점을 식별하자. 이는 시뮬레이션 테스트이며 Core Web Vitals과 같은 필드 데이터를 살펴보는 것과 결합되어야한다.

 

----- > useReportWebVitals 훅: 이 훅을 사용하여 Core Web Vitals 데이터를 분석 도구로 내보내자.

 

번들 분석

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

 

또한 다음 도구를 사용하여 새로운 종속성을 애플리케이션에 추가하는 데 어떤 영향이 있는지 이해할 수 있다.

- Import Cost
- Package Phobia
- Bundle Phobia
- bundlejs

 

배포 이후

애플리케이션을 배포하는 위치에 따라 추가 도구 및 통합을 사용하여 애플리케이션 성능을 모니터링하고 개선하는 데 도움이 될 수 있다.

 

Vercel 배포의 경우 다음을 권장한다.

- Analytics: 내장된 분석 대시보드를 사용하여 애플리케이션의 트래픽을 이해하고 고유 방문자 수, 페이지 뷰 등을 포함한 정보를 얻자.

 

- Speed Insights: 방문자 데이터를 기반으로 실제 성능 정보를 제공하는 Speed Insights를 사용하여 웹 사이트가 현장에서 어떻게 성능을 내는지 실제로 확인하자.

 

-로깅: 런타임 및 활동 로그를 사용하여 문제를 디버깅하고 애플리케이션을 프로덕션에서 모니터링하자. 또는 통합 페이지에서 제3자 도구 및 서비스 목록을 확인하자

 

출처

Deploying: Production Checklist | Next.js