[Next.js Learn] Assets, Metadata, and CSS(3) - Metadata

지치지 않는 백엔드 개발자 김성주·2023년 6월 2일

목록 보기

36/50

메타데이터(Metadata)

만약 <title>과 같은 페이지의 메타데이터를 수정하려면 어떻게 해야 할까요?

<title>은 <head> HTML 태그의 일부이므로, Next.js 페이지에서 <head> 태그를 어떻게 수정할 수 있는지 알아보겠습니다.

에디터에서 pages/index.js 파일을 열고 다음 줄을 찾으세요:

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

<Head>는 소문자 <head> 대신 사용됩니다. <Head>는 Next.js에 내장된 React 컴포넌트입니다. 이를 사용하여 페이지의 <head>를 수정할 수 있습니다.

next/head 모듈에서 Head 컴포넌트를 가져올 수 있습니다.

`Head`를 `first-post.js`에 추가하기(Adding Head to first-post.js)

우리는 /posts/first-post 경로에 <title>을 추가하지 않았습니다. 하나 추가해 보겠습니다.

pages/posts/first-post.js 파일을 열고 파일의 시작 부분에 다음과 같이 next/head에서 Head를 가져오는 import 문을 추가하세요:

import Head from 'next/head';

그런 다음, 내보낸 FirstPost 컴포넌트를 Head 컴포넌트를 포함하도록 업데이트하세요. 일단은 title 태그만 추가하겠습니다:

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

http://localhost:3000/posts/first-post에 접속해보세요. 브라우저 탭에는 이제 "First Post"라고 표시될 것입니다. 브라우저의 개발자 도구를 사용하면 <head>에 title 태그가 추가되었음을 확인할 수 있어야 합니다.

Head 컴포넌트에 대해 더 알아보려면 next/head의 API 참조를 확인하세요.

예를 들어 <html> 태그를 사용자 정의하고 lang 속성을 추가하려면 pages/_document.js 파일을 생성하여 할 수 있습니다. 사용자 정의 문서(document)에 대한 자세한 내용은 문서의 맞춤형 Document 섹션에서 확인하세요.

출처: https://nextjs.org/learn/basics/assets-metadata-css/metadata