어떤 웹 사이트이던지 메타 데이터는 중요합니다!
고맙게도 Next.js 에서는 메타데이터를 추가하는게 쉽습니다.
Head 컴포넌트 추가하기
next js 에서 Head 컴포넌트를 제공해줍니다.
import Head from "next/head";
먼저 next.js에서 제공하는 Head 컴포넌트를 임포트합니다.
그리고 <Head> 컴포넌트 내부에 title과 meta 태그를 넣어줄 수 있습니다.
예를 들어, pages/index.js 파일에 다음과 같이 코드를 작성하면 됩니다.
return (
<div>
<Head>
<title>페이지 타이틀</title>
<meta name="description" content="검색 엔진에서 검색되는 데이터" />
</Head>
<p>Hello world!</p>
</div>
);이렇게 <meta>태그를 추가해주게 된다면 검색 엔진 최적화에 도움이 될 수 있습니다.
동적으로 head 내용 추가하기
<Head>
<title>{event.title}</title>
<meta name="description" content={event.description} />
<Head>위 코드와 같이 동적으로 title이나 content의 내용을 변경해줄 수 있습니다. (event는 제 코드상의 객체 입니다. 여러분의 것으로 사용해주시면 됩니다.)
이렇게 동적으로 타이틀과 컨텐트를 설정해줄 수 있지만 모든 페이지에 <head>를 적용하는 것은 쉽지 않습니다. 복붙을 반복해야하기 때문이고 코드 유지보수에도 좋지 못합니다.
Head 컴포넌트 재사용하기
만약 하나의 페이지 컴포넌트에 여러 return statement가 있다면 다음과 같이 head 변수를 만들어줘서 재사용 할 수 있도록 한다.
const pageHead = {
<Head>
<title>Filtered Events</title>
<meta
name='description'
content={`우리 사이트는 ${something}을 잘합니다.`}
/>
</Head>
}_app.js 파일에 Head 컴포넌트 추가하기
_app.js 파일에 <Head> 컴포넌트를 추가하게 된다면 모든 페이지에 적용할 수 있습니다.
function MyApp({ Component, pageProps }) {
return (
<Head>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</Head>
<Component {...pageProps} />
);
}여기서 유의해야할 점이 있습니다.
Next.js는 자동으로 <Head> 컴포넌트 안의 태그들을 합칩니다.
_app.js에 <Head> 컴포넌트가 있고 다른 페이지 컴포넌트에 <head> 컴포넌트가 있다면 두 헤드 컴포넌트는 합쳐지게 됩니다.
그리고 만약 두 헤드 컴포넌트에 같은 태그가 있다면 마지막으로 불러와지는 태그가 페이지에 랜더링 되게 됩니다.
예를 들면 아래 코드에서 페이지의 title은 "하세요"가 됩니다
<Head>
<title>"안녕</title>
<Head>
<Head>
<title>"하세요"</title>
<meta name="description" content={event.description} />
<Head>