next.js 사용하기

안녕하세요! 새콤하고달콤입니다.

오늘은 next.js를 설치해보고 간단하게 실습하는 과정을 진행해보도록 하겠습니다.

 

 * next.js 

1. universal 리액트 어플리케이션의 서버렌더링을 쉽게 구현할 수 있게 도와주는 프로그램입니다.

2. universal이란, 어디서든 작동한다는 것을 말합니다. 서버에서 미리 사전 작업을 해놓고, 클라이언트에게 던져줘서, 클라이언트가 좀 더 작업을 하게하고, 양쪽에서 코드와 뷰를 공유합니다.

3. SPA의 경우, 초기 렌더링할 때, 렌더링 비용이 많이 발생하기 때문에 좋지 못한 성능을 가져올 경우가 있습니다. 이를 해결하기 위해서 초기에 서버사이드 렌더링을 진행함으로서, 초기 렌더링 문제를 해결할 수 있습니다.

 

 * 환경 설정

- 다음의 패키지를 설치합니다. 

yarn add react react-dom next

 

- package.json의 scripts 부분에 dev:next로 설정합니다.

{
  "name": "FrontEnd",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "next": "^10.0.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "scripts":{
    "dev":"next"
  }
}

 

- 그리고 next를 사용할 때 pages 디렉토리 내에 js파일을 저장해야 next로 페이지를 렌더링할 수 있습니다.

- pages 디렉토리 내에 index.js 파일을 생성합니다.

const Index = () =>(
  <div>
    <h1>
      반갑습니다. next.js입니다.
    </h1>
  </div>
);
export default Index;

 

그리고 yarn run dev를 이용해서 호출하면 끝