Next, Next 특징, Next 설치

🥓 Next

React(SPA) + SSR

원래 SPA에 SSR을 더하려면 웹서버, 웹팩, 데이터 로딩, 코드 스플리팅 등등이 필요하지만..

Next를 사용하면 그럴 필요가 없다!

 

🥓 Next 특징

사전 렌더링 및 서버 사이드 렌더링(SSR)

Next는 빌드 시 모든 페이지를 미리 렌더링한다. 따라서 처음 페이지를 불러올 때, 미리 렌더링 해서 만들어진 HTML를 빠르게 사용자에게 제공할 수 있다! 이 특징은 검색 엔진 최적화(SEO)에도 좋다. HTML을 불러온 후에는 페이지에 필요한 최소한의 자바스크립트 코드를 불러와 사용한다. 서버 데이터가 필요한 페이지의 경우엔 SSR로 HTML을 생성한다.

Hot Code Reload

코드 변경 사항 저장 시 프로그램이 자동으로 리로드된다.

자동 코드 분할

불필요한 코드가 페이지에 로드되지 않는다.

웹팩, 바벨 기본으로 사용

웹팩과 바벨을 기본으로 사용해 SSR 및 개발에 필요한 설정이 이미 되어있다.

훌륭한 Typescript 지원

타입스크립트의 특징은 아래에!

2022.05.24 - 타입스크립트 특징, 사용하는 이유, 문법

타입스크립트 특징, 사용하는 이유, 문법

파일 기반 네비게이션

React는 react-router 라이브러리로 페이지 경로를 직접 설정해야 하지만 Next의 경우 폴더 경로에 따라 알아서 페이지 경로가 설정된다.

 

🥓 Next 설치

필수

• Node.js 버전 10.13 이상
• MacOS, Windows(WSL 포함) 또는 Linux 운영체제
• npm 혹은 yarn

자동 설치 : CNA(create-next-app)

create-next-app으로 예제가 포함된 간단한 Next 애플리케이션을 만들 수 있다.

$ npx create-next-app

수동 설치하고 페이지에 먀 띄우기

일단 원하는 곳에 폴더를 만들고 터미널에서 해당 폴더로 이동한다.

npm 관리와 프로젝트 설정을 위해 package.json 파일을 만들어야 한다! 아래와 같은 명령어로 기본적인 package.json을 만들 수 있다. -y는 -yes랑 같은 의미로 다음에 입력해야 하는 귀찮은 단계를 없애준다. ~_~

$ yarn init -y

 

다음으론 Next를 실행하는 데 필요한 모듈들을 설치해준다.

$ yarn add next react react-dom

 

설치 후 package.json 파일을 보면 디펜던시가 생성되어 있는 걸 볼 수 있다.

루트 디렉토리에 pages 폴더를 생성한다. pages 폴더는 Next에서 라우팅을 담당한다. pages 폴더 하위에 파일을 만들면 그 파일 이름이 페이지의 경로가 된다! pages 폴더 하위 index.jsx 파일을 만들어 화면을 띄워보자!

const App = () => <div>먀</div>;
export default App;

 

터미널에서 yarn dev로 개발 모드로 페이지를 실행해보자! http://localhost:3000/에 접속하면 끝!

 

.jsx가 아닌 .js로 만들어도 상관없다! JSX는 자바스크립트를 확장한 문법으로 자바스크립트와 마크업을 같이 쓸 수 있다. React에서 쓰도록 만들어진 것으로 HTML과 매우 비슷하다! 하지만 JSX는 웹 브라우저가 직접 읽을 수 없어서 번들링 할 때 바벨을 이용해 자바스크립트로 변환한다. 원래 React면 맨 위에 import React 어쩌고 써줘야 하는데 Next는 암시적으로 알아서 해주기 때문에 그럴 필요가 없다.