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 컴포넌트를 가져올 수 있습니다.
first-post.js에 Head 추가하기
우리의 /posts/first-post 경로에는 <title>을 추가하지 않았습니다. 하나 추가해보겠습니다.
pages/posts/first-post.js 파일을 열고 파일의 맨 위에 next/head에서 Head를 가져오는 import를 추가하세요:
import Head from 'next/head';
그런 다음, 내보낸 FirstPost 컴포넌트를 업데이트하여 Head 컴포넌트를 포함시킵니다. 일단은 타이틀 태그만 추가하겠습니다:
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 파일을 생성하여 할 수 있습니다. custom Document 문서를 확인하여 더 알아보세요.
'Dev > Next JS' 카테고리의 다른 글
| [공식문서] NextJS - Assets, Metadata, and CSS #6 (0) | 2023.08.15 |
|---|---|
| [공식문서] NextJS - Assets, Metadata, and CSS #5 (0) | 2023.08.15 |
| [공식문서] NextJS - Assets, Metadata, and CSS #3 (0) | 2023.08.15 |
| [공식문서] NextJS - Assets, Metadata, and CSS #1 (0) | 2023.08.15 |
| [공식문서] NextJS - Assets, Metadata, and CSS #2 (0) | 2023.08.15 |
