Next.js의 <Head> 사용방법 (MetaData)

FrontEnd/Next.js

Next.js의 <Head> 사용방법 (MetaData)

Bumang 2024. 4. 22. 11:31

예전에 사용해봤던 React Snap, React Helmet의 사용법과 유사하다.

그러나 ReactSnap이나 ReactHelmet처럼 번거로운 설정들이 필요없다는 것이 장점이다.

Next.js에서 Head 설정하기

우선 아래와 같이 import 시켜준다.

import Head from "next/head";

전체적으로 이름을 정해주려면 우선 _app.js파일(page router) 혹은 Document파일 등에 가서 아래와 같이 지정해준다.

메타태그 또한 같이 지정가능하다.

메타태그는 검색엔진을 검색할 때 중요한 태그가 되니 되도록이면 넣어주도록 하자.

 <Head>
        <title>Next Events</title>
        <meta name='description' content='NextJS Events' />
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
      </Head>

그러나 페이지마다 다른 Head title 설정도 가능하다.

Head 태그 안에다가 title / image / description, og tag 등을 넣어주면 된다.

import Head from "next/head";

import { getFeaturedEvents } from '../helpers/api-util';
import EventList from '../components/events/event-list';

function HomePage(props) {
  return (
    <div>
      <Head>
        <title>내 홈페이지</title>
        <meta name="description" content="Find a lot of great events that allow you to evolve..."/>
      </Head>
      <EventList items={props.events} />
    </div>
  );
}

동적 라우팅일 때도, props로 각기 다른 정보를 담아 <Head></Head>태그 안에서 사용할 수도 있다.

function PostDetailPage(props) {
  return (
    <Fragment>
      <Head>
        <title>{props.post.title}</title>
        <meta name='description' content={props.post.excerpt} />
      </Head>
      <PostContent post={props.post} />
    </Fragment>
  );
}

아직 안 해봤지만 ReactSnap이나 ReactHelmet을 같이 쓸 땐,

메타데이터를 각각의 코드에 모두 적용하는 반복이 싫어서 Tag라는 메타데이터 주입용 컴포넌트를 만들어서 관리하였다.

<Tag title={title} desc={desc} ... /> 컴포넌트 안에 원하는 메타데이터를 넣어서 사용 가능하게 딱 한 줄로 정리하였다.