react-helmet
-
헤드태그에들어가는 meta title script style 이 네가지를 관리해준다 => 검색엔진이 알아먹을 수 있게 !! (거진 표준이다? 사이트 들어가보면 og:title, og: description... 이런거 볼 수 있다. )
-
import Helmet from "react-helmet"; -
SSR까지 적용 해줘야 한다.
import React from "react";
import { Helmet } from "react-helmet";
import Document, { Main, NextScript } from "next/document";
// 리액트에서는 Component를 extends하지만 넥스트는 Document를 extends한다!
class MyDocument extends Document {
static getInitialProps(context) {
const page = context.renderPage((App) => (props) => <App {...props} />);
return { ...page, helmet: Helmet.renderStatic() };
}
render() {
const { htmlAttributes, bodyAttributes, ...helmet } = this.props.helmet;
const htmlAttrs = htmlAttributes.toComponent();
const bodyAttrs = bodyAttributes.toComponent();
return (
<html {...htmlAttrs}>
<head>{Object.values(helmet).map((el) => el.toComponent())}</head>
<body {...bodyAttrs}>
<Main />
<NextScript />
</body>
</html>
);
}
}
export default MyDocument;
박레고의 개발 블로그