Next.js

• Vercel 이 개발한 React 기반의 웹 프레임워크로, 기본적으로 SSR 위주의 풀스택 기반 프레임워크이다.
• 최적화 관련 기능이나, 개발자 편리를 돕는 다양한 기능을 제공한다.

Next.js 사용 이유

1. 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원

   • Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 초기 로딩 속도를 개선하고 SEO(검색 엔진 최적화)를 개선할 수 있다. 이를 통해 사용자 경험을 향상시키고 검색 엔진에서 웹 사이트를 더 잘 인식할 수 있다.

2. 편리한 라우팅 시스템

   • Next.js는 파일 시스템을 기반으로 한 동적 및 정적 라우팅을 제공하는데, 이는 개발자가 페이지를 간편하게 추가하고 관리할 수 있도록 도와준다.

3. 빌트인 CSS 및 Sass 지원

   • CSS 모듈, Sass, Less 및 Styled Components와 같은 다양한 CSS 스타일링 옵션을 지원하여 개발자가 쉽게 스타일을 관리할 수 있다.

4. Hot Module Replacement(HMR) 지원

   • Hot Module Replacement(HMR)을 지원하여 코드 수정 후 즉시 브라우저에 반영되도록 도와주는데, 이를 통해 개발자는 빠르게 개발을 진행할 수 있다.

5. API 라우팅 및 서버리스 함수 지원

   • API 라우팅을 위한 기능을 제공하며, 서버리스 함수를 구현하여 API 엔드포인트를 쉽게 작성하고 관리할 수 있다.

6. TypeScript 지원

   • TypeScript를 공식적으로 지원하여 정적 타입 검사 및 코드의 안정성을 향상시킬 수 있다.

7. 캐시 컨트롤(Cache Control)

   • 정적 자원에 대한 캐싱을 관리하여 브라우저 캐시를 효율적으로 활용하므로, 이를 통해 자주 사용되는 자원의 로딩 시간을 단축하고 네트워크 대역폭을 절약할 수 있다.

8. 이미지 최적화(Image Optimization)

   • 이미지를 자동으로 최적화하여 브라우저에 최적화된 이미지를 제공하므로, 이를 통해 이미지 다운로드 시간을 최소화하고 데이터 사용량을 절감할 수 있다.

9. 자동 코드 분할(Automatic Code Splitting)

   • 페이지별로 자동으로 코드를 분할하여 필요한 코드만 로드되도록 하고, 이를 통해 초기 로딩 시간을 최소화하고 사용자 경험을 향상시킬 수 있다.

10. 프리패치 및 프리로드(Prefetching and Prerendering)

    • 사용자가 다음으로 방문할 페이지를 미리 예측하여 필요한 데이터를 프리패치(pre-fetch)하고, 페이지를 미리 렌더링(prerender)하여 빠른 페이지 전환이 가능하다.

11. 코드 분석 및 번들 최적화(Code Analysis and Bundle Optimization)

    • 빌드 시점에 코드를 분석하여 번들 크기를 최적화하고, 이를 통해 불필요한 코드를 제거하고 번들 크기를 줄여 성능을 향상시킬 수 있다.

12. 제로 구성(Zero Configuration)

    • 기본적으로 최적화된 설정을 제공하므로 개발자가 별도의 설정을 수행하지 않아도 높은 성능을 얻을 수 있다.

13. 커뮤니티 및 생태계

    • 큰 커뮤니티와 다양한 생태계를 가지고 있으며, 많은 개발자들이 사용하고 있어, 문제 해결이나 기술 지원을 받기가 더 쉽다.