Next.js & React Study (4)

December 18, 2022

들어가기 앞서

검색엔진최적화(SEO)를 위해서 사이트의 head안에 meta 데이터 관리가 중요합니다. 따라서 이번에는 Next.js에서 Meta Data를 처리하는 방법에 대해서 정리 하였습니다.

1. <Head> Component

Next.js 에서 페이지에 head를 추가하는 방법은 간단합니다. next/head 의 <Head> 컴포넌트를 사용하면 됩니다.

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

2. _app.js

head를 각 페이지마다 추가하지 않고 App 전체의 기본 head를 관리하고 싶은경우 _app.js에 추가하면 됩니다.

_app.js 는 모든 페이지에서 렌더링되는 애플리케이션 컴포넌트입니다. 모든 컴포넌트에 head를 추가하고 싶다면 아래와 같이 추가하면 됩니다. 물론 각 페이지의 <Head> component가 존재하는 경우 가장 최신의 <head> 정보로 덮어쓰기가 됩니다.

import type { AppProps } from 'next/app'
import Head from 'next/head'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

3. _document.js

_app.js 다음에 실행되며 _document.js는 전체 HTML 문서를 커스터마이징할 수 있게 해줍니다

쉽게 정리하면, 공통적으로 적용할 HTML 마크업을 커스텀 하는 공간으로 볼 수 있습니다. _document.js는 정적인 것중에 공통 적용할 사항들을 처리합니다.

_document를 작성할 때는 Document 클래스를 상속받는 클래스 컴포넌트로 작성해야만 하며, 렌더 함수는 꼭<Html>, <Head>, <Main>, <NextScript> 요소를 리턴해줘야 합니다.

_document에서 사용하는 <Head> 태그는 next/head가 아닌 next/document 모듈에서 불러와야 하는데요, _document의 <Head>태그에는 모든 문서에 공통적으로 적용될 내용(Ex. charset, 뷰포트 메타태그 등)이 들어가야 합니다.

주의 :_document는 언제나 서버에서 실행되므로 브라우저 api 또는 이벤트 핸들러가 포함된 코드는 실행되지 않습니다. 또한 <Main /> 부분을 제외한 부분은 브라우저에서 실행되지 않으므로 이곳에 비즈니스 로직을 추가해서는 안되며, _app과 마찬가지로 getStaticProps와 getServerSideProps 를 통해 데이터를 불러올 수 없습니다.

// 기본적인 _document의 형태

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

4. _app.js vs _document.js

head를 _app.js에 추가하여 전역적으로 사용해도 된다고 정리 하였습니다. 또한 _document.js에 사용해도 된다고 정리했습니다. 과연 어디써야 맞는걸까요?

이 의문에 대한 해답은 공식문서를 참고하여 정리 하였습니다.

_app.js는 React Element에 대한 초기화 과정을 담당합니다.

_.document.js는 정적인 <html>, <body>에 대한 설정을 하는 것으로 표기 되어 있습니다.

_app.js는 전역적으로 컴포넌트 관리
_document.js는 전역적 정적 HTML 마크업을 담당

위 내용으로 판단했을때 _document.js 에서 <Head>를 통한 meta data 관리가 타당하다 할 수 있습니다.

Written by@JinhyeongKim
주 1회 작성하는 개발 블로그

GitHub