1. Next.JS란 ?
리액트의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크.
과거 웹사이들도 SSR을 지원했기에 페이지가 여러개로 구성된 Multi Page Form방식을 사용했습니다. 하지만 스마트폰의 등장으로 인해 웹페이지들의 최적화에 대한 문제점이 나타나기 시작했습니다. 그래서, Angular, Vue, React 같은 프레임워크들이 생겨나기 시작했고, CSR(Client Server Rendering)이 가능한 SPA(Single Page Application)이 등장했습니다.
터미널에 아래 명령어를 통해 설치할 수 있습니다.
| npm i next |
2. 핵심기능
1) 코드스플리팅
일반적인 리액트에서는 초기 렌더링 때 모든 컴포넌트들을 내려받습니다. 하지만, 규모, 용량이 커지면 로딩속도가 느려진다는 단점도 존재합니다. Next.JS에서는 이러한 단점을 보완하기 위해 필요에 따라 파일을 내려받을 수 있게 파일을 여러개로 분리하는 코드스플리팅을 사용합니다.
2) Next.JS의 폴더 구조
서버 사이드 렌더링과 자동화된 코드스플리팅을 위하여 약간의 정형화된 구조를 따라야합니다. 각 라우트에 해당하는 파일들은 소문자로 pages 폴더(디렉토리) 안에 넣어야합니다. 나머지는 자유롭게 구성할 수 있습니다.
3) 간단한 클라이언트 사이드 라우팅을 제공
Next.JS는 간단한 라우트 기능을 내장하고 있습니다.
웹페이지를 링크하기위해서는 Link 컴포넌트를 통해 설정해줄 수 있습니다. Link 컴포넌트 사용시 유의할 점은 <Link href=""><a></a></Link>처럼 a태그가 아닌 Link 태그 안에 href를 추가해야된다는 점이 있습니다.
4) Head 설정
react-helmet 같은 기능을 설정할 수 있습니다.
위처럼 Next안의 Head를 import 하여 <Head></Head>안에 설정하실 수 있습니다.
참고자료 : velopert.com/3293, medium.com/@msj9121/next-js-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90-8727f76614c9
'NodeBird 복습 > React' 카테고리의 다른 글
| react nodeBird 1-5(Redux 적용시키기) (0) | 2021.04.13 |
|---|---|
| react nodeBird 1-4 (회원가입폼&커스텀 훅) (0) | 2021.04.11 |
| react nodeBird 1-3(styled-components) (0) | 2021.04.10 |
| react nodeBird 1-2(로그인폼 만들기) (0) | 2021.04.09 |
| react nodeBird 1-1(antd 이용하기) (0) | 2021.04.09 |
