[Next.js] Head 사용 방법

[Next.js] Head 사용 방법Frontend/Next.js2023. 3. 15. 11:55@고지니어스

Table of Contents

Next.js에서 Head 사용 방법에 대해 알아보겠습니다.

Title 설정

Next.js에는 페이지 헤더의 제목을 변경하고 meta를 추가할 수 있는 내장 컴포넌트를 가지고 있습니다.

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Home | Title</title>
      </Head>
      <h1>Hello</h1>
    </div>
  );
}

태그 중복 방지

head에 태그가 중복되는 것을 방지하려면 다음 예제와 같이 태그가 한 번만 렌더링 되도록 하는 key 속성을 사용할 수 있습니다.

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Home | Title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <h1>Hello</h1>
    </div>
  );
}

이 경우 두 번째 meta property="og:title"만 렌더링 됩니다. 중복 키 속성이 있는 meta 태그는 자동으로 처리됩니다.

key를 지정해주지 않으면 meta property="og:title"가 중복해서 2번 랜더링 됩니다. Title 은 지정하지 않아도 2번 랜더링 되지 않습니다.

공통 컴포넌트

공통으로 사용할 컴포넌트 파일(예: Seo.js)을 생성합니다. title prop을 받아서 화면마다 제목을 설정할 수 있습니다.

import Head from 'next/head';

export default function Seo({ title }) {
  return (
    <Head>
      <title>{`${title} | Title`}</title>
    </Head>
  );
}

import Seo from '@/components/Seo';

export default function Home() {
  return (
    <div>
      <Seo title="Home" />
      <h1>Hello</h1>
    </div>
  );
}

참고

https://nextjs.org/docs/api-reference/next/head

저작자표시

'Frontend > Next.js' 카테고리의 다른 글

[Next.js] Dynamic Routes 사용 방법 (0)	2023.03.26
[Next.js] Redirect and Rewrite (0)	2023.03.20
[Next.js] Styles 사용 방법 (0)	2023.03.11
[Next.js] Routing 사용 방법 (0)	2023.03.06
[Next.js] 프로젝트 생성 및 시작 방법 (0)	2023.03.02