Next.js 개요

 

Next.js 는 리액트를 서버사이드 렌더링할 때 쓰는 프레임워크이다.

 

특징

1. 웹팩, 자동 컴파일 및 번들링, 개발환경 제공. (next 내부적으론 웹팩과 바벨을 사용)

2. SSR 방식. 

3. TypeScript 를 지원.

4. 파일시스템 라우팅 사용.

5. 내장 css 를 지원.

6. 코드스플리팅 지원.

7. 큰 기업들이 사용하고 있어 안정성이 보장됨. 

 

 

사용법

사용법을 배워보자

필요환경 : Node 10.13v 이상

 

 

Setup

npx create-next-app
# or
yarn create next-app

명령어를 사용하면 Next Project 를 빌드해준다.

 

create-next-app 실행

 

create-next-app 실행 완료

 

- dev: 개발용 서버로 프로젝트를 실행

- build: 배포용으로 빌드파일을 생성

- start: 배포용으로 실행

 

npm run dev 로 개발환경으로 실행.

 

실행 성공

실행성공 웹페이지 (기본주소: localhost:3000)

 

next의 기본폴더 구조를 보면..

 

기본 폴더 구조

pages

pages 아래의 js 파일들은 페이지 라우팅이 적용된다. (_app.js, _document.js 제외)

localhost:3000 으로 접속했을때 보이는 첫 페이지는 index.js 이다.

a.js 를 만든다면 localhost:3000/a

b.js 를 만든다면 localhost:3000/b

이런식으로 접근한다.

 

public

public 폴더는 정적인 파일들 (이미지, 폰트, ...)을 static file 로 serving 하는 곳이다.

 

_app.js

_app.js 는 각 페이지들이 가장 처음 그려지는 곳이다. (initializing) 

따라서 아래의 기능들을 수행할 수 있다.

 

- 페이지 변경 시 레이아웃 유지

- state 유지

- componentDidCatch 사용가능

- 전역 css 추가