[NextJS] NextJS의 기본

somin·2021년 11월 21일

nextjs

NextJS

목록 보기

1/2

NextJS란?

1. 프로젝트 시작

npx create-next-app 파일이름

위의 명령어로 설치시 webpack과 babel을 이용해 컴파일과 번들링이 자동으로 됨
자동 refresh 기능 : 수정하면 화면에 바로 반영
Server Side Rendering 및 Static 파일 지원

2. 특징

1) Routes

pages 폴더에 페이지들을 만들면 다른 작업 없이 Routing 처리가 됨
다이나믹 라우팅 지원 : 파일명에 대괄호([]) 활용

// Dynamic Routes
// 파일명 : [id].js

import { useRouter } from "next/router";

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return <p>Post: {id}</p>;
};

export default Post;

2) Pre-rendering

Next.js : 모든 페이지를 사전 렌더링하기 때문에 더 좋은 퍼포먼스와 검색 엔진 최적화(SEO)에 장점이 있음
형태 : 정적 생성, Server Side Rendering(SSR, Dynamic Rendering)
*언제 html 파일을 생성하는 가에 차이가 있음

정적 생성

프로젝트가 빌드하는 시점에 html 파일들을 생성하고 모든 요청에 재사용

퍼포먼스를 이유로 Next.js는 정적 생성을 권고

정적 생성된 페이지들은 CDN에 캐시됨

getStaticProps / getStaticPaths

SSR

매 요청마다 html 파일들이 생성

CDN에 캐시되지 않기 때문에 느릴 수 있으나 항상 최신 상태 유지

getServerSideProps

3) 에러 페이지

에러 페이지를 서버에서 렌더링한다면 그만큼 비용이 발생하고, 사용자들은 느리게 느낌
Next.js : 에러 페이지를 정적 파일로 제공
*원하는 디자인과 정보를 담아 빌드타임에 정적 생성되는 404 페이지 만들 수 있음(서버 에러도 동일)

500 Error

production 모드에서 확인해야 함 : 개발 모드에서는 어디서 에러가 났는지 로그를 보여주기 때문

정적으로 최적화는 불가능 : 서버에 에러 코드를 보내는 작업을 동반하는 행위가 발생하기 때문

npm run build > npm start

// _error.js
// 클라이언트, 서버 에러를 모두 처리
// 하지만 클라이언트 에러는 정적 파일로 제공하는 것이 좋으므로 따로 생성
function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : "An error occurred on client"}
    </p>
  );
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

// 404.js
// 빌드 타임에 정적 생성되는 파일
export default function Error404() {
  return (
    <div style={{ padding: "200px 0", textAlign: "center", fontSize: 30 }}>
      404 : 페이지를 찾을 수 없습니다.
    </div>
  );
}

페이지 레이아웃

1. _app.js

_app.js

레이아웃을 만들기 위해선 _app.js를 이용
*모든 페이지는 _app.js를 통하기 때문

페이지 전환시 레이아웃 및 상태값을 유지할 수 있음

componentDidCatch를 이용해 커스텀 에러 핸들링 가능

추가적인 데이터를 페이지로 주입시켜 주는 것이 가능

글로벌 CSS를 선언하는 곳이기도 함

// _app.js
function MyApp({ Component, pageProps }) {
  // Component : 현재 페이지를 의미, 페이지 전환시 Component의 props가 변경됨
  // pageProps : data patching method를 통해 미리 가져온 초기 객체
  return <Component {...pageProps} />;
}

2. _document.js

Next에서 제공하는 document를 커스터마이징할 수 있음
Next.js : 마크업 정의를 건너 뛰고 페이지를 만들기 때문에 Html, Head, body등의 태그를 사용하기 위해선 _document.js 파일이 필요
서버에서만 렌더링되고 onClick등의 이벤트 핸들러는 작동하지 않음

// _document.js
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {

  render() {
    return (
      <Html lang="ko">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;