리액트는 가장 인기 있는 자바스크립트 라이브러리가 되었으며 수백만 개 이상의 웹 사이트에서 다양한 목적으로 사용되고 있습니다.

다만 리액트에는 한 가지 큰 문제점이 있습니다.
바로 리액트가 기본적으로 클라이언트 사이드에서만 작동한다는 점입니다.

사용자의 웹 브라우저에서만 실행되기 때문에 리액트를 사용한 웹 애플리케이션은 검색 엔진 최적화 search engine optimization(SEO)의 효과를 거의 볼 수 없으며, 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 애플리케이션 실행 초기에 성능 부담이 생깁니다.

이 문제를 해결하기 위해 많은 개발자들이 웹 애플리케이션을 서버에서 미리 렌더링 해두는 방법을 연구하기 시작했습니다. 서버 사이드 렌더링을 사용할 수 있다면 리액트 앱을 순수한 HTML 페이지로 미리 렌더링 해둔 다음 브라우저가 이를 다운로드하여 즉각 화면에 표시하고, 클라이언트에서 자바스크립트 번들을 다 받으면 사용자가 웹 앱과 상호 작용할 수 있게 됩니다.

이러한 연구의 결과로 나온 것이 바로 Next.js 입니다.

📗Next.js

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링 server-side rendering(SSR), 정적 사이트 생성 static site generation(SSG), 증분 정적 재생성 incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공합니다.

여기서 말하는 서버 사이드 렌더링 server-side rendering (SSR)은 무엇일까?
그 전에 클라이언트 사이드 렌더링 client-side rendering (CSR)에 대해 알아보자.

CSR

CSR란 쉽게 말해서 클라이언트에서 모두 처리하는 것인데, 서버에서 전체 페이지를 한 번 렌더링하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식입니다. 서버 사이드 렌더링과 달리 서버에서 HTML 문서를 요청하는 것이 아니라, 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 것입니다.

SSR

SSR은 클라이언트에서 모든 것을 처리하지 않고, 웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만들게 되고, 만들어진 HTML과 HTML 파일을 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보냅니다.

🔥Next.js 시작하기

이제 본격적으로 Next.js를 시작해봅시다.

먼저 Next.js를 시작하기 위해서는 node.js를 설치해야 합니다.

node 설치

https://nodejs.org/ko

node 다운로드 사이트에 들어가 최신 기능을 가진 현재 버전보다는 안정적이고 신뢰도 높은 LTS 버전으로 선택해서 다운로드를 합니다.

node 설치가 완료 되었다면 Next.js를 사용하기 위해서 create-next-app을 설치해야 합니다.

create-next-app 설치

npm install -g create-next-app

설치가 완료 되었다면 잘 설치 되었는지 확인합니다.

create-next-app --version

문제없이 설치 하였다면, create-next-app의 버전이 표시됩니다.

Next.js 프로젝트 생성

이제 설치한 create-next-app을 사용하여 Next.js 프로젝트를 생성해 봅시다.

npx create-next-app 프로젝트 이름

참고로 리액트 프로젝트 생성하는 명령어는 다음과 같습니다.

npm create-react app 프로젝트 이름

이렇게 하면 Next.js 프로젝트 생성에 성공합니다.

프로젝트를 실행하기 위해서 다음의 명령어로 실행합니다.

npm run dev

dev는 Next.js 프로젝트를 개발 모드(development mode)로 실행한다는 의미입니다.