Next.js 사용하기 - 그런데 이제 CRA를 곁들인

성공할 수 있을까

Next.js란?

서버사이드 렌더링을 지원하는 React 기반 프레임워크

왜 사용하는가?

• 초기 로딩 성능 개선
• SEO(검색엔진) 최적화
• 더욱 빠른 페이지 로드를 위한 코드 스플리팅 자동화

Universal Rendering

Server-side rendering과 Client-side rendering을 혼합한 방법

• Static Generation(ssg)

  • 작성한 page들의 모든 컴포넌트를 정적 HTML 파일로 build-time에 렌더링하여 준비시킨 뒤 각각의 페이지들이 요청할 때에 페이지에 해당하는 html파일들을 내어준다.

• Server-side Rendering(ssr)

  • 페이지가 요청하는 순간에 그 페이지에 알맞은 컴포넌트를 정적 html파일로 렌더링하여 브라우저 내어준다.

Demystifying SSR, CSR, universal and static rendering with animations

설치

yarn add next

만들어놓은 React App에 Next를 설치했다.

처음부터 next-app을 만들거라면 아래 코드를 입력한다.

yarn create next-app --typescript

pages 폴더 생성

pages 폴더를 생성하고 메인페이지가 될 index.js 파일을 세팅해 주어야 한다.

이때 확장자명은 js, jsx, ts, tsx 어느것을 사용해도 무방하다.

index.js 세팅

CRA로 만든 앱을 사용할 때는 react-router-dom의 Route를 사용했었지만 Next.js에서는 pages 안에 파일을 만들면, 파일명으로 페이지를 라우팅한다.

기존 Route 에서 / 경로였던 home.tsx 파일명을 index.tsx로 바꾸고 나머지 페이지들도 추가했다.

컴포넌트에 링크를 걸어야 한다면 Next에서 제공하는 Link를 사용한다.

Next.js를 배우기전에…!

_app.jsx 파일 생성

만약 각 페이지의 컴포넌트들을 감싸야 한다면 _app.jsx 파일을 생성한다.

Next의 모든 page는 렌더링을 거치기 전에 _app.js 를 거친다고 한다.

CRA로 만든 앱을 사용할 때의 App 컴포넌트라고 생각하면 된다.

Component는 각 페이지 컴포넌트들이 오게되고, pageProps는 getInitialProps(Next의 서버사이드 실행 로직)를 통해 내려 받은 props들을 나타낸다.

import React from "react";
import { RecoilRoot } from "recoil";

function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

export default App;

Next.js 설치, 라우팅, 구동방식 next js 에 recoil 적용하기
React로 Next.js 처럼 Server-side-rendering 구현하기

에러

• window is undefined
  • window는 client-side에만 존재한다. 고로 React Component내에서 window를 사용하고 싶다면 useEffect를 사용한다.
  • Next.js “window,document is not defined” 해결하는 법