[NextJS] Next에서 페이지에 심은 meta태그가 pre-render되지 않는 문제 해결.
아마 Next.js를 사용하는 가장 큰 이유 중 하나는 바로 SEO때문일 것이다. Next.js에서는 그래서 쉽게 meta태그를 심을 수 있도록
Head라는 컴포넌트를 제공한다. 이 컴포넌트를 사용하면 아래와 같이 손쉽게 메타 태그들을 작성할 수 있다.
import { NextPageContext } from 'next'
export default function Main(){
return (
<div>
<Head>
<title>세상은 너의 굴이야</title>
<meta name="description" content="이곳에 오신 것을 환영합니다."/>
</Head>
</div>
)
}
문제 발견
SEO를 하기 위해서 넣은 메타 태그인데, 막상 배포를 해보면 source에 내가 추가한 meta태그들이 보이지 않았다.
즉, 메타태그들이 클라이언트에서 랜더가 되고, static하게 랜더되는 것이 아니었음. 그럼 메타태그를 넣은 의미가 크게 없다.
og태그 암만 열심히 추가해도, 링크 공유했을 때 메타 정보가 하나도 표기되지 않을 뿐더러, seo에도 별 소용이 없기 때문이다.
page 컴포넌트에 추가한 Head컴포넌트는 클라이언트 사이드에서 랜더링 되지만, _app.js에 추가한 Head컴포넌트는 pre-render가 된다는 사실을 알아냈다.
이것을 이용해서 문제를 해결해보았다.
문제 해결
1. <Head> 컴포넌트를 _app.js에만 추가한다. (코드참고)
function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter()
return (
<Suspense>
<Head>
<title>{pageProps?.title}</title>
<meta name="description" content={pageProps?.description}/>
<meta property="og:title" content={pageProps?.title} />
</Head>
<Component {...pageProps} />
</Suspense>
)
}
2. 페이지 컴포넌트에서 getInitialProps를 추가하고, 메타태그에 넣고싶은 값들을 리턴시킨다.
//in Main page component..
import { NextPageContext } from 'next'
export default function Main(){
return <div>…</div>
}
Main.getInitialProps = async (ctx: NextPageContext) => {
return {
title: ’Title you wanna show’,
description: ’Desc you wanna show’
}
}
3. 다시 _app.js로 돌아와 console.log(pageProps)를 해보면, 페이지 컴포넌트에서 getInitialProps로 리턴한 값들이 그대로 들어오고 있는 것을 확인할 수 있다.
4. 코드를 저장하고 내가 만든 웹페이지에서 option + command + u 키를 눌러 source코드를 확인해보면 내가 추가한 메타태그들이 잘 보이는 것을 확인할 수 있다.
stackoverflow에 작성한 답변이다. 더 보기 쉬울 것 같아 첨부함
'프론트엔드' 카테고리의 다른 글
| [React] useRef, forwardRef 사용법 (0) | 2023.02.12 |
|---|---|
| [React] React Hook이란? (0) | 2023.02.12 |
| [Next] next-export-i18n 사용 시 lang 쿼리 파라미터 자동으로 붙이기 (2) | 2022.11.09 |
| [Next][Error] Hydration failed because the initial UI does not match what was rendered on the server. 발생 시 (0) | 2022.10.10 |
| [MDN] MIME 타입이란? (2) | 2022.10.08 |