{"componentChunkName":"component---src-templates-blog-post-js","path":"/react/2022-12.18---next-study-04/","result":{"data":{"site":{"siteMetadata":{"title":"주 1회 작성하는 개발 블로그","author":"JinhyeongKim","siteUrl":"https://bnt10.github.io","comment":{"disqusShortName":"bnt10-github-io","utterances":"JinHyongKim/blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"5c40115b-4ca8-57d6-857f-1796dc5471c6","excerpt":"들어가기 앞서 검색엔진최적화(SEO)를 위해서 사이트의 head안에 meta 데이터 관리가 중요합니다. 따라서 이번에는\nNext.js에서 Meta Data를 처리하는 방법에 대해서 정리 하였습니다. 1. Component Next.js 에서 페이지에 head를 추가하는 방법은 간단합니다. 의 컴포넌트를 사용하면 됩니다. 2. _app.js head를 각 페이지마다 추가하지 않고 App 전체의 기본 head를 관리하고 싶은경우 _app.js에 추가하면 됩니다. _app.js…","html":"

들어가기 앞서

\n

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

\n

1. <Head> Component

\n

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

\n
import Head from 'next/head'\n\nfunction IndexPage() {\n  return (\n    <div>\n      <Head>\n        <title>My page title</title>\n        <meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" />\n      </Head>\n      <p>Hello world!</p>\n    </div>\n  )\n}\n\nexport default IndexPage
\n

2. _app.js

\n

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

\n

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

\n
import type { AppProps } from 'next/app'\nimport Head from 'next/head'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    <Layout>\n      <Head>\n        <title>My page title</title>\n        <meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" />\n      </Head>\n      <Component {...pageProps} />\n    </Layout>\n  )\n}\n\nexport default MyApp
\n

3. _document.js

\n

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

\n

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

\n

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

\n

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

\n

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

\n
// 기본적인 _document의 형태\n\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\n\nclass MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx)\n    return { ...initialProps }\n  }\n\n  render() {\n    return (\n      <Html>\n        <Head />\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </Html>\n    )\n  }\n}\n\nexport default MyDocument
\n

4. _app.js vs _document.js

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

","tableOfContents":"","frontmatter":{"title":"Next.js & React Study (4)","date":"December 18, 2022"}}},"pageContext":{"slug":"/react/2022-12.18---next-study-04/","previous":{"fields":{"slug":"/react/2022-12.17---next-study-03/"},"frontmatter":{"title":"Next.js & React Study (3)"}},"next":null}},"staticQueryHashes":["2486386679","3128451518"]}