pages/_document.js (27 lines of code) (raw):
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { Helmet } from 'react-helmet';
export default class MyDocument extends Document {
static async getInitialProps(...args) {
const documentProps = await super.getInitialProps(...args);
// see https://github.com/nfl/react-helmet#server-usage for more information
// 'head' was occupied by 'renderPage().head', we cannot use it
return { ...documentProps, helmet: Helmet.renderStatic() };
}
// should render on <html>
get helmetHtmlAttrComponents() {
return this.props.helmet.htmlAttributes.toComponent();
}
// should render on <body>
get helmetBodyAttrComponents() {
return this.props.helmet.bodyAttributes.toComponent();
}
// should render on <head>
get helmetHeadComponents() {
return Object.keys(this.props.helmet)
.filter((el) => el !== 'htmlAttributes' && el !== 'bodyAttributes')
.map((el) => this.props.helmet[el].toComponent());
}
render() {
return (
<Html {...this.helmetHtmlAttrComponents}>
<Head>{this.helmetHeadComponents}</Head>
<body {...this.helmetBodyAttrComponents}>
<Main />
<NextScript />
</body>
</Html>
);
}
}