My Boundary As Much As I Experienced

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} ... /> 컴포넌트 안에 원하는 메타데이터를 넣어서 사용 가능하게 딱 한 줄로 정리하였다.

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

Next.js에서 '_'가 붙은 파일은 뭘 의미하는 것일까? (_app.tsx, _document.tsx, _error.tsx)  (0) 2024.04.22
Next.js Page Router의 _app.js의 역할  (0) 2024.04.22
Next.js가 제공하는 <Link>태그와 <Image> 태그가 제공하는 브라우저 최적화 이점  (0) 2024.04.22
Next.js에서 Slug 활용하기 & Shallow Routing  (0) 2024.04.20
SSG(Static-Site-Generation)의 장점은 정적사이트를 CDN에 저장할 수 있다는 것  (0) 2024.04.19
'FrontEnd/Next.js' Related Articles more