[Next.js] 개념 정리 (2)

next.js 기본 개념 알아보기

---

Next.js는 프론트엔드 기술로 Zeit에서 만든 React 프레임워크입니다.

React 프레임워크인 만큼 사용하는 언어는 typeScript와 javaScript입니다.

React는 UI를 만들기 위한 라이브러리입니다.

라이브러리이기 때문에 핵심적인 기능만 제공하고, 그 외의 기능은 별도의 3rd party 라이브러리로 제공합니다.

(제대로 된 프로젝트를 만들기 위해서는 React만으로는 부족하기 때문에 다른 라이브러리를 조합 해야 합니다.)

 

Next.js는 React로 프론트엔드 개발 시 필요한 여러가지 유용한 기능을 기본으로 제공 해줍니다.

1. SSR이라고 불리는 서버 사이드 렌더링을 기본으로 제공합니다.

2. 파일 시스템 기반의 라우팅 기능을 제공합니다.

 

파일 기반의 라우팅을 사용하면 아주 간단하게 페이지를 추가 할 수 있습니다.

 

예를 들어 /about 페이지를 만들고 싶은 경우 about.js 파일을 만들면 되고

/help 페이지를 만들고 싶은 경우 help.js 파일을 만들면 됩니다.

 

3. React는 스크립트로 화면을 그리기 때문에 새로고침을 할 때 화면이 깜빡입니다.

SSR을 적용 시 깜빡임이 없고 화면 렌더링 속도가 빠르며, SEO를 적용하기도 유리합니다.

 

이러한 기능을 위한 설정은 모두 zero configuration으로 지원합니다.

즉, 아무런 설정 없이도 위와 같은 기능을 사용 할 수 있다는 것입니다.

 

최근 프론트엔드 개발을 할 때 초반 설정에 많은 시간이 소요되고

내가 개발을 하는 건지, 설정을 하는 건지, WebPack을 하는 건지 헷갈리는 경우가 많습니다.

 

Next.js는 이런 걱정없이 코드에 집중 할 수 있고, 필요하다면 WebPack, Babel 설정을 쉽게 확장 할 수 있습니다.