NextJS - 1. NextJS란? / 시작하기

 

 

Next.js란?

NextJS 공식 사이트의 소개

Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크다.

 

 

 

Next.js를 쓰는 이유

SSR(서버 사이드 렌더링)을 위해서.

 

SSR이 필요한 이유:

초기 페이지 로드 시간이 빠르다.

 

* 리액트는 CSR(클라이언트 사이드 렌더링) 방식을 채택한 SPA

 

 

Next.js를 사용하지 않고도 React에서 SSR 구현이 가능하지만 매우 복잡하다.

 

Next.js의 작동 원리:

1. 초기에 사용자가 Server에 페이지 접속을 요청하면, SSR방식으로 렌더링 될 HTML을 보냄.
2. 브라우저에서 JavaScript를 다운로드하고 React를 실행함.
3. 사용자, 페이지가 서로 상호작용하여 다른 페이지로 이동할 땐, Server가 아닌 CSR방식으로 브라우저에서 처리함.

 

 

검색 엔진 최적화(SEO)를 하기 위해서 SSR이 중요한 역할을 한다. 

 

검색 엔진 작동 원리:

검색 엔진 봇들은 사이트의 데이터를 크롤링할 때, JavaScript 파일을 해석할 수 없다는 특징을 가졌다. 때문에 HTML 파일에서 크롤링을 하게 된다.
CSR방식은 Client 측에서 페이지를 구성하기 전까지 HTML에 아무것도 없으므로 데이터를 수집할 수 없는 상태이기 때문에 검색 엔진에 노출이 어렵다.
반면에, SSR은 Server 측에서 화면을 그려서 보내주는 방식이다. 때문에 HTML 안에 이미 컨텐츠들을 포함하고 있는 상태이며, 크롤러 봇들이 데이터를 수집하는데 수월하다.

 

 

---

Next.js는 React를 기반으로 한 프레임워크이며, SSR을 구현하고 SEO에 유리하기 때문에 사용한다.

다른 페이지로 이동할 경우 CSR 방식으로 서버가 아닌 브라우저에서 처리하므로 SPA 장점도 유지할 수 있다.

---

 

 

 

Next.js 주요 기능

 

typescript support

타입스크립트 활용을 위해 웹팩을 만지거나 바벨을 만질 필요가 없다. 타입스크립트를 설치하고 (yarn add typescript @types/node @types/react) 명령어 (yarn run dev)만 하면 자동으로 tsconfig, next-end.d.ts가 생성되어 타입스크립트로 코딩이 가능하다.

 

automatic routing

pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅된다. (pages/page1.tsx -> localhost:3000/page1)

public 폴더도 pages의 폴더와 동일하게 라우팅 할 수 있다. 그러나 모든 사람이 페이지에 접근할 수 있으므로 지양하도록 한다.

 

code splitting

dynamic import를 이용하면 손쉽게 코드 스플리팅이 가능하다.

코드 스플리팅은 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것이다. 모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있다.

// src/notify.js

export default function notify() {
  console.log('notify');
}

// src/App.js

import React from 'react';

function App() {
  const onClick = () => {
    import('./notify').then(res => res.default());
  };
  
  return (
    <div>
      <p onClick={onClick}>Hello World</p>
    </div>
  );
}

export default App;

 

 

​

Next.js 시작하기

 

npx create-next-app@latest

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- eslint
- eslint-config-next

or

 

npx create-next-app@latest --typescript

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- eslint
- eslint-config-next
- typescript
- @types/react
- @types/node

 

 

기본 구성

create-next-app

 

 

create-next-app --typescript

 

 

 

 

 

참고 사이트

next.js 기본 개념 알아보기

Next.js를 사용하는 이유

NextJS 시작하기 – 노마드 코더 Nomad Coders