Next.js

Next.js란?

React JS를 이용한 Server Side Rendering framework

1. SSR
2. 자동으로 코드 스플릿
3. Client Side Rounting을 제공(내장)
4. Webpack 기반의 개발 환경
5. Express나 다른 Node.js 서버 구현

SSR?

Server Side Rendering의 약어로써 서버에서 렌더링 작업을 합니다. 사용자가 웹페이지에 접근할 때, 서버에 페이지에 대한 요청을 하며 서버에서는 HTML, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환합니다. 반대로 CSR(Client Side Rendering)은 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 요청이 올 때마다 이를 클라이언트가 해석하고 렌더링하는 방식입니다.

How to use?

1. 기본적으로 Node.js, NPM or Yarn 설치
2. Project Directory 생성 및 next & react & react-dom 설치

  
    mkdir [프로젝트 디렉토리]
    cd [프로젝트 디렉토리]
    npm init
    npm install --save next react react-dom
    mkdir pages
  

3. package.json에 Script 편집

  
"scripts": {
    "dev": "next -p 9090",
    "build": "next build",
    "start": "next start"
  }
    

그리고

npm run dev

를 실행하면 404 page가 나옵니다.

pages/index.js 에 다음의 코드를 작성합니다.

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index; 

그러면 Hello Next.js가 출력된 것을 볼 수 있습니다.

그 이외의 Next.js

Result of Basic