Next.js

Next.js는 React의 프레임워크이다.

Next.js는 React에서 SSR(Server Side Rendering)을 쉽게 구현하기 위해 사용하는게 가장 큰 이유이다.

CSR & SSR

기본적으로 React는 CSR(Client Side Rendering)로 동작한다.

CSR -
장점 : CSR은 렌더링을 서버가 아닌 브라우저에게 맡겨서 트래픽을 감소시키고, 빠른 페이지 이동이 가능하다.
단점 : 페이지가 많을수록 자바스크립트의 용량도 커질 뿐더러 초기 페이지를 가져오는 로딩시간이 오래 걸린다.

SSR -
장점 : SSR은 pre-rendering을 통해 초기 페이지의 로딩속도가 CSR에 비해 빠르며, SEO(검색엔진최적화)가 가능하다.
단점 : CSR과는 반대로 페이지 이동시마다 페이지를 생성하기 때문에 로딩속도가 느리다.

pre-rendering : 미리 각 페이지의 HTML을 생성하여 더 좋은 성능과 SEO를 가져온다.
(React의 경우 pre-rendering이 없어 javscript를 비활성화하면 앱을 볼 수 없게된다.)

요약 : CSR을 하는 React의 취약함을 next.js를 사용하므로써 SSR을 가능하게 해주며 SSG(Static Side Generate / 정적 사이트 생성)도 가능하게 해준다.

---

설치 & 실행

npx create-next-app@latest

next.js 최신 버전으로 설치

npx create-next-app@latest --typescript

typescript와 next.js를 같이 사용하고 싶다면 뒤에 --typescript를 붙여주면 된다.

typescript 없이 설치

패키지를 설치하겠냐고 물어본다면 y를 입력해주면 되고,
그 다음 원하는 프로젝트 명을 입력해주면 된다.

혹시나 까먹었을까봐 TypeScript와,ESLint를 같이 설치할거냐고 물어보는데 지금은 필요없기 때문에 No를 눌러주면 된다.

설치 완료 후 방금 전에 만든 프로젝트 이름을 code와 함께 입력하면 vscode로 실행된다.

code 프로젝트 이름

code nextjs-intro

package.json을 들여다 보면 next.js의 현재 최신버전(22년12월기준 / 13.0.6) 이 설치 된 것을 확인할 수 있다.
참고로 강의에서는 12.0.7 버전이므로 13.0.6 버전과 비교하며 진행해야 할거같다.

npm run dev

코드를 입력하면 서버를 실행시켜 준다.

그리고 url 주소에 접속하여 서버가 잘 동작하는지 확인해 주면 끝