NextJS (1) 기본개념

Next.js란 무엇인가?

◼︎ JavaScript 생태계 Web framework 3대장

1) React : 가장 많이 사용. 페이스북에서 개발한 오픈소스 라이브러리, 컴포넌트 기반 UI

2) Angular

3) Vue

◼︎ NextJS : React 기반 Framework

- React의 단점

1) SPA(Single Page Application)으로, 사용자 경험(UX)에 장점이 있지만, 모든 JS 코드를 불러오기 때문에 첫페이지 로딩에 시간 소요

2) SEO(Search Engine Optimization)에 불리 => SSR(Sever-side Rendering) 적용으로 해결

>> SSR은 SEO에 유리하지만, 페이지 이동 시 깜박임 존재, 서버에 부담을 줘 성능상 불리

- NextJS : SPA와 SSR의 단점을 해결. React에서 SSR을 하기 위한 복잡한 요소(Webpack설정, Data loading, Code-splitting)를 간편화

◼︎ NextJS 특징

1) 사전 렌더링 및 서버사이드렌더링

2) Hot Code Reloading 지원하는 개발환경

3) 자동 코드 분할

4) 웹팩/바벨 설정 처리

5) Typescript 내장/지원

6) 파일 기반 Route

7) Styled-jsx 지원

◼︎ 설치

1) Node.js 설치 (node, npm, npx 설치)

2) CNA(Create-Next App)으로 설치하기

$ npx create-next-app my-app

3) 수동 설치

$ mkdir my-app
cd my-app
npm init -y (or yarn init -y)
npm install react react-dom next (yarn add react react-dom next)

4) Eslint, prettier 설정