프론트 개발 블로그

[Next.js ] 1) Next.js 란? 본문

Next.js

[Next.js ] 1) Next.js 란?

maybe.b50 2021. 4. 16. 19:16

1) Next.js 란?


Next.js 는 React 프레임워크로 생산을 위해 만들어졌습니다.

여기에서 말하는 생산이란 프로덕션, 즉 실제 서비스를 운영하는 환경을 말합니다.

 

The React Framework for Production

 

프로덕션에 필요한 기능, 

- 하이브리드 정적 및 서버 렌더링 

- TypeScript 지원

- 스마트 번들링

- route 프리 패치 등 

최고의 개발자 경험을 제공하고, config(구성)이 필요하지 않습니다.

 

왜 Next.js 인가요?

  • 이미지 최적화 : 인스턴트 빌드를 통한 <image> 및 자동 이미지 최적화
  •  Interantionailzed (국제적인 라우팅) : 빌트 인 도메인 및 서브 도메인 라우팅 및 자동 언어 감지 
  • Next.js Analytics : 실제 방문자 데이터 및 페이지 별 이해를 기반으로 a true lighthouse score 
  • Zero config : 자동 컴파일 및 번들링. 처음부터 생산에 최적화 되었습니다.
  • Hybrid - SSG and SSR : 단일 프로젝트에서 빌드 시(SSG) 또는 요청 시 (SSR)에 페이지를 사전 렌더링 합니다. 
  • 점진적인 정적 생성(Incremental Static Generation) : 빌드 시간 후에 정적으로 사전 렌더링 된 페이지를 점진적으로 추가하고 업데이트 합니다.
  • TypeScript 지원 : 자동 타입스크립트 구성 및 컴파일
  • 빠른 새로 고침 : Facebook 규모에서 입증된 빠르고 안정적인 라이브 편집 경험
  • 파일 시스템 라우팅 : 'pages' 디렉토리의 모든 구성 요소는 경로(Route)가 됩니다.
  • API 경로 : 선택적으로 백엔드 기능을 제공하는 API 엔드 포인트를 생성합니다. 
  • 내장 CSS 지원 :  CSS 모듈로 컴포넌트 수준 스타일을 만듭니다. 내장 Sass 지원 
  • 코드 분할 및 번들링 : 구글 크롬 팀에서 만든 최적화 된 번들 분할 알고리즘입니다.
  • 그리고 더 : 지원 환경 변수, 미리보기 모드, 사용자 정의 태그, 자동 Polyfills, 그리고 더 'Head' (헤드 페이지에 요소를 추가하기 위한 기본 제공 구성 요소를 노출함) 

 

 

반응형