[Next.js] Meta Data

Next.js에서 HTML의 title 태그와 같은 페이지의 메타 데이터를 수정 하기 위해서는 어떻게 해야 할까요?

title 태그는 HTML의 head 태그의 일부이기 때문에 Next.js에서 head 태그를 수정하는 방법에 대해 알아보겠습니다.

Head 사용하여 index.js 수정하기

1) title을 수정 할 페이지를 엽니다. (pages/index.js)

2) 페이지 상단에 next/head의 Head를 import 하는 코드를 작성합니다.

import Head from "next/head";

3) 아래와 Head 요소 안에 title, link를 추가합니다. (그 외에도 meta keyword, meta content 등도 추가 할 수 있습니다.)

import Link from "next/link";
import Image from "next/image";
import Head from "next/head";

export default function Home() {
  return (
    <h1 className="title">
      <Head>
        <title>My Blog</title>
        <link rel="icon" href="/images/profile.jpg"></link>
        <meta keyword="My Blog"></meta>
        <meta content="My Blog"></meta>
      </Head>
      <Image
        src="/images/profile.jpg"
        width={100}
        height={100}
        alt="루피"
      ></Image>
      Learn{" "}
      <Link href="/posts/first-post">
        <a>Next.js!</a>
      </Link>
    </h1>
  );
}

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

'프레임워크 > Next.js' 카테고리의 다른 글

[Next.js] CSS (0)	2022.02.17
[Next.js] 외부 자바스크립트 (0)	2022.02.17
[Next.js] Image (0)	2022.02.17
[Next.js] Link (0)	2022.02.17
[Next.js] (4) 외부 이미지 파일 사용하기 (0)	2022.02.16