Nextjs 성능 최적화

1. 코드 최적화

• Next.js는 자동으로 코드 스플리팅을 제공하여 페이지를 필요로 하는 자바스크립트 청크로 분할한다.
• 이를 통해 초기 로딩 속도를 개선하고, 사용자가 방문하지 않은 페이지의 자원을 불러오지 않아도 되므로 필요한 자원만 로드하여 효율적으로 페이지를 로드한다.

2. 이미지 최적화

• Image 컴포넌트를 사용하면 이미지 리소스를 자동으로 최적화한다.
• Image 컴포넌트를 사용하면 적절한 이미지 포맷과 크기를 자동으로 선택하여 웹 페이지의 이미지 로딩 속도를 개선할 수 있다.

3. 캐싱과 브라우저 캐싱 활용

• 정적 캐싱과 브라우저 캐싱을 활용하면 자주 변경되지 않는 페이지나 자원들을 캐싱하여 반복적인 불러오기를 최소화할 수 있다.
• 이를 통해 서버 부하를 줄이고, 사용자 경험을 향상시킬 수 있다.

4. CDN 활용

• 정적 리소스들을 CDN을 활용하여 전세계 여러 지역에서 빠르게 로드할 수 있다.
• CDN은 서버와 가까운 위치에서 리소스를 제공하므로 지연 시간을 최소화하고, 성능을 향상시킵니다.

5. 코드 번들 최적화

• Next.js에서는 프로덕션 빌드 시 코드를 최적화하여 번들 크기를 줄이는 기능을 제공한다.
• 이를 통해 불필요한 코드나 라이브러리를 제거하여 번들 크기를 최소화하고, 로딩 속도를 개선할 수 있다.

6. 성능 모니터링과 튜닝

Lighthouse나 Web Vitals과 같은 도구를 사용하여 웹 사이트의 성능 지표를 측정하고, 성능 향상을 위해 필요한 조치를 취할 수 있다.