Document
カスタム Document
は通常、アプリケーションの <html>
タグと <body>
タグを拡張するために使用されます。これはドキュメントのマークアップ定義を Next.js pages が省略するために必要です。
カスタム Document
には、非同期サーバーレンダリングのデータ要求を表現するための getInitialProps
を含めることもできます。
デフォルトの Document
をオーバーライドするには ./pages/_document.js
ファイルを作成し、次のように Document
クラスを拡張します:
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
ページを適切にレンダリングするには <Html>
, <Head />
, <Main />
と <NextScript />
が必要です。
カスタム属性は lang
のように props として許可されます:
<Html lang="en">
ctx
オブジェクトは getInitialProps
で受け取るものと同等ですが、1 つ追加されています。
renderPage
: Function
- 実際の React レンダリングロジックを(同期的に)実行するコールバックです。 Aphrodite の renderStatic
のようなサーバーレンダリングラッパーをサポートするために、この関数装飾が役立ちますDocument
はサーバーでのみレンダリングされ、onClick
などのイベントハンドラーは機能しません<Main />
の外にある React コンポーネントはブラウザによって初期化されません。ここにアプリケーションロジックを追加 しないで ください。すべてのページで共有コンポーネント(メニューやツールバーなど)が必要な場合は、代わりに App
コンポーネントをご覧くださいDocument
の getInitialProps
関数は、クライアント側の遷移中には呼び出されず、ページが静的に最適化されている場合にも呼び出されませんgetInitialProps
に ctx.req
/ ctx.res
が定義されていないかを確認してください。これらの変数は、ページが Automatic Static Optimization または next export
によって静的にエクスポートされるとき undefined
となります<Head />
タグに <title>
を追加することや、styled-jsx
を使用することです。これらは予期しない動作につながるため pages / _document.js
での利用は避けてください。renderPage
のカスタマイズ
renderPage
をカスタマイズする必要があるのは、css-in-js ライブラリなどで、サーバーサイドレンダリングを適切に処理するために、アプリケーションをラップする時だけです。
カスタマイズするために、オプションオブジェクトを引数として受け取ります:
import Document from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
// react ツリー全体をラップするのに役立ちます
enhanceApp: App => App,
// ページ単位をラップするのに役立ちます
enhanceComponent: Component => Component
});
// 親の `getInitialProps` が実行されると、カスタム `renderPage` が含まれます
const initialProps = await Document.getInitialProps(ctx);
return initialProps;
}
}
export default MyDocument;