<title> 과 같은 페이지의 메타데이터를 수정하려면 어떻게 해야 할까?
<title>은 <head> 태그의 일부이니 <head> 태그 수정하는 방법을 살펴보자.
<Head>
<title>Create Next App</title>
<link rel='icon' href='/favicon.ico' />
</Head>
하지만 소문자 <head> 대신 <Head>가 사용되었음을 알 수 있다.
<Head>는 Next.js에 내장된 React 컴포넌트로 페이지 <head>를 수정할 수 있게 해준다.
이 컴포넌트는 next/head 모듈에서 임포트 할 수 있다.
first-post.js에 Head 추가하기
아까 만든 posts/first-post 경로에 <title> 태그를 하나 추가해보겠다.
파일 최상단에서 임포트 하고 Head 컴포넌트를 추가하면 된다.
import Head from 'next/head';
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
</>
);
}
http://localhost:3000/posts/first-post 에 접속하면 브라우저 탭에 "First Post"라고 표시된다.
개발자 도구를 확인해보면 title 태그가 <head>에 추가된 것을 확인할 수 있다.
추가학습필요
- Head 컴포넌트에 대해 더 자세히 알아보기위해 next/head에 대한 API reference를 확인하기
- lang 속성을 추가하는 등 <html> 태그를 사용자 정의하려면 pages/_document.js 파일을 생성하여 사용자 정의할 수 있음(Custom Document 참조).
'개발 > Next.js' 카테고리의 다른 글
| [Docs] CSS 스타일링 & Layout 컴포넌트 (0) | 2023.05.07 |
|---|---|
| [Docs] 서드파티 자바스크립트 추가하기 (0) | 2023.05.07 |
| [Docs] 정적 파일 사용하기 (0) | 2023.04.26 |
| [Docs] 페이지 간 이동하기 (0) | 2023.04.18 |
| [Docs] Next.js로 앱 생성하기 (0) | 2023.04.18 |