NextJS

[NextJS] 페이지 제목 설정: NextJS에서 HTML Head Title 태그를 쉽게 설정하는 방법

깃짱 2023. 12. 22. 10:00
반응형
반응형

 

 

소스 코드 보러가기 👉🏻 https://github.com/gitchan-Study/2023-next-js-beginner

 

GitHub - gitchan-Study/2023-next-js-beginner: 노마드코더 [NextJS 시작하기] 학습 코드

노마드코더 [NextJS 시작하기] 학습 코드. Contribute to gitchan-Study/2023-next-js-beginner development by creating an account on GitHub.

github.com

 

 

 

💋 페이지 제목 설정

NextJS에서 제공하는 "next/head"를 import해서 쉽게 설정할 수 있다.

 

components/seo.js

import Head from "next/head";

export default function Seo({title}) {
	return (
		<Head>
			<title>{title} | Gitchan Movies</title>
		</Head>
	)
};

 

개인적으로 모든 페이지에 Head 태그를 달기보다는, 컴포넌트로 만들어서 분리한 후에 각 페이지마다 적용하는 것이 좋은 것 같다.

 

pages/index.js

import Seo from "@/components/Seo";

export default function Home() {
	return (
		<div>
			<Seo title="Home"/>
			<h1>Hello</h1>
		</div>
	);
}

 

pages/about.js

import Seo from "@/components/Seo";

export default function About() {
	return (
		<div>
			<Seo title="About"/>
			<h1>About</h1>
		</div>
	);
};

 

 

 

💋 참고자료

 

도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟
비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!

 

반응형