Next.js - 프로젝트 세팅 및 리액트와 차이점

1. next.js 설치

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

설치 명령어 입력시 아래와 같이 세팅 항목들을 설정할 수 있다.

yarn create next-app
yarn create v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-next-app@13.3.0" with binaries:
      - create-next-app
✔ What is your project named? … next-study
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*

 

2. 개발 서버 띄워보기 (localhost:3000)

npm run dev

 

package.json에서 scripts 확인

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

 

3. 각 폴더 구조

ㄴpages : 파일명에 따라 라우팅 경로가 생성된다.

                    ex) pages/about.js는 /about 에 매핑된다.

ㄴpublic : 정적 소스들의 저장소 (이미지, 폰트 등) 

                     공통 디레토리 내 파일은 baseURL(/)로 참조할 수 있다.

 

4. React와의 차이점

Next.js는 React 프레임워크 이고, React는 라이브러리 이다.

 

#React.js

리액트는 사용자 인터페이스(사용자가 화면에서 보고 상호작용하는 요소)를 구축하기 위한 자바스크립트 라이브러리 이다.

라이브러리는 리액트에서 제공하는 다양한 여러 기능을 개발자 편의에 맞게 만들 수 있도록 해준다.

자유도가 높은 편이라 개발자마다 소스 구조를 다르게 가져갈 수 있으며, 컴포넌트의 이름 등을 customizing 할 수 있다.

 

#Next.js

Next는 프레임워크로 정해진 규칙에 따라 개발을 진행해야 한다.

리액트에 필요한 툴과 configuration들을 처리하고, 추가적인 구조나 기능, 어플리케이션 최적화 등을 제공한다.

 

 

4-1. Pre-Rendering

일반적으로 브라우저는 자바스크립트를 가져와서 사용자가 보는 UI를 만들어 낸다.

리액트는 client side rendering을 하는데 이 순서는 다음과 같이 3가지로 요약할 수 있겠다.

 

1) 브라우저가 HTML 형태의 비어있는 div를 가져온다.

     - 페이지의 소스 코드를 보면  <div id="root"></div> 이렇게 빈 HTML만 확인된다.

2) 그 후에 브라우저가 모든 자바스크립트를 가져와서 js와 React.js를 실행시킨다.

3) 그 후에 UI가 생성되면서 어플리케이션이 유저에게 보인다.

 

🚨 이 때 브라우저가 로딩되는 속도가 길어지면 문제가 발생할 여지가 있다.

react.js를 불러오는 데까지 많은 시간이 걸린다. 이 말은 곧, 최악의 경우 흰 화면만 사용자가 보게 될 수도 있는 것이다.

물론 loading 페이지를 띄움으로서 어느정도 해소할 수는 있지만, '흰 화면'이 나오는 경우는 결코 바람직하다고 볼 수 없을 것이다.

 

Next.js에는 이러한 점을 해소하기 위해 static pre-rendering을 지원한다.

페이지의 소스 코드에서 실제 HTML 코드를 확인할 수 있다. 아주 느린 연결을 하거나 자바스크립트를 비활성화 시켜도 리액트와 달리 적어도 HTML 만큼은 보여줄 수 있는 것이다.

 

4-2. Hydration

React.js를 프론트엔드 안에서 실행하는 것을 'Hydration'이라고 부른다.

Next.js는 백엔드에서 react.js를 미리 동작시켜서 페이지를 미리 만드는데, 이는 컴포넌트들이 렌더링되는 것이고, 그 컴포넌트들은 렌더링이 끝나면 HTML이 된다. 그러면 next.js가 이 만들어진 HTML을 페이지의 소스코드에 넣어서 보여주게 되는 것이다. 그래서 자바스크립트나 리액트가 로딩중이더라도 유저는 콘텐츠들을 볼 수 있는 것이다.

그리고 난 후, React.js의 Hydrate 메서드를 사용하여 클라이언트 측에서 렌더링된 HTML을 서버 측에서 생성된 HTML과 일치시킨다. 그러면 우리가 생각하는 일반적인 리액트 어플리케이션이 된다.

 

4-3. Client-Side Rendering vs Server-Side Rendering