반응형
반응형
소스 코드 보러가기 👉🏻 https://github.com/gitchan-Study/2023-next-js-beginner
💋 페이지 제목 설정
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>
);
};
💋 참고자료
- https://github.com/gitchan-Study/2023-next-js-beginner/pull/4/files
- https://nomadcoders.co/nextjs-fundamentals/lectures/3445
도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟
비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!
반응형