ProgrammingFrontendNext.js

[Next.js] Head 사용 방법

, , , , ,

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

Title 설정

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

1
2
3
4
5
6
7
8
9
10
11
12
import Head from 'next/head';

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

태그 중복 방지

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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을 받아서 화면마다 제목을 설정할 수 있습니다.

1
2
3
4
5
6
7
8
9
import Head from 'next/head';

export default function Seo({ title }) {
  return (
    <Head>
      <title>{`${title} | Title`}</title>
    </Head>
  );
}
1
2
3
4
5
6
7
8
9
10
import Seo from '@/components/Seo';

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

참고

Share