블로그만들기(3) - Next.js의 구조

anjoy·2021년 2월 11일
0

블로그만들기

목록 보기
3/13
post-thumbnail

Next.js는 React용 SSR 프레임워크이다.

next 명령어를 통해 프로젝트를 실행하면 위에서 말한 export를 통해 빌드 시점에 미리 Page들을 파악하고 이를 각 HTML로 생성해놓는다.

next export 명령어로 routing 경로로 정적 웹사이트를 만들 수 있는 기능도 제공하고 있다.

Next.js의 기본 구조

Next.js의 기본 구조는 다음과 같다.

pages/ // HTML Document, Application Container, 각종 페이지 등을 작성한다.
    _document.js // HTML Document.
    _app.js // Application Container. 공통의 레이아웃을 작성한다.
    _error.js // Error Page.
    index.js // Root Page /로 시작되는 경로를 말한다.
    hello.js // Hello Page /hello로 시작되는 경로를 말한다.
static/ // 정적 파일 (이미지, 파일 등)을 업로드 한다.
next.config.js // Next.js의 환경 설정 파일이다. 라우팅 설정, typescript, less 등의 webpack 플러그인을 설정한다.

이와 같이 웹 페이지를 랜더링하려면 기본적으로 pages directory 내부에 index[.js|.ts|.tsx|.jsx]파일이 존재해야 한다.

또한, _app, _document, _error 파일들을 통해 보다 편리하게 기본 레이아웃이나 에러 페이지 등을 작성해 사용할 수 있다.

_document

_document.js는 SPA에서 시작되는 index.html라고 생각하면 된다.

기본적으로 Next.js에서 기본 값으로 설정되어 있어 따로 작성을 해주지 않아도 되며 Document를 커스텀할 때만 작성해주면 된다.

커스텀 Document에는 next/document<Html>, <body>,<Main>, <NextScript> 태그를 반드시 작성해주어야 한다.

작성 예시는 다음과 같다.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

_app

React에서 App.js라는 이름의 파일로 공통의 레이아웃을 작성하듯 Next.js에서는 pages/_app.js를 통해 해당 어플리케이션의 공통 레이아웃을 작성할 수 있다.

또한, _app.js에서 Global CSS를 추가하거나 componentDidCatch를 통한 사용자 정의 오류 처리를 진행할 수 있다.

작성 예시는 다음과 같다.

// import App from 'next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp

Props로 전달되는 Component는 경로에 따라 랜더되는 page들이다. 기본 경로에서는 pages/index.js로 전달받는다.

pageProps는 Date Fetch 메소드 중 하나를 통해 미리 로드된 페이지의 initial props가 포함되어 있는 Object이다.

_error

404 Error가 발생할 때 404페이지를 랜더링 한다면 SSR 환경에서 로드가 증가함에 따라 Cost가 증가하고 느려질 수 있다.

따라서, Next.js에서는 기본 정적 404 Error 페이지를 제공한다.

pages/404.js 파일을 통해 404 Error 정적 페이지를 생성할 수 있는데 그 외의 에러는 pages/_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

위와 같이 statusCode를 Props로 받아 적절하게 이용하면 404.js를 따로 사용하지 않고 _error.js로 에러 페이지를 정적으로 사용할 수 있는 것 같다.

profile
안녕하세요 벨로그에서 자기소개를 한 줄로 쓰라고 되어있는데 최대한 한 줄로 자기 소개를 해보겠습니다. 제 이름은 .....

0개의 댓글