🚀
【Next.js和訳】Advanced Features/Custom `Document`
この記事について
この記事は、Advanced Features/Custom `Document`の記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Document
Custom カスタム Document
は通常、アプリケーションの <html>
と <body>
タグを拡張するために使用されます。Next.js ページは周囲のドキュメントのマークアップの定義を省略するため、これが必要です。
デフォルトの 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">
ここで使用されている <Head />
コンポーネントは、next/head
のものとは異なります。ここで使用される <Head />
コンポーネントは、すべてのページに共通する <head>
コードにのみ使用されるべきです。<title>
タグなど、その他のケースでは、ページまたはコンポーネントでnext/head
を使用することをお勧めします。
ctx
オブジェクトはgetInitialProps
で受け取ったものと同じですが、1 つだけ追加されています。
-
renderPage
:Function
- 実際の React レンダリングロジックを(同期的に)実行するコールバックです。Aphrodite のrenderStatic
のようなサーバーレンダリングのラッパーをサポートするために、この関数を装飾すると便利です。
警告
-
Document
はサーバーでのみレンダリングされるため、onClick
のようなイベントハンドラーは機能しません。 -
<Main />
の外側にある React コンポーネントはブラウザによって初期化されません。ここにアプリケーションロジックやカスタム CSS(styled-jsx
など)を追加しないでください。すべてのページで共有コンポーネント(メニューやツールバーなど)が必要な場合は、代わりにApp
コンポーネントを確認してください。 -
Document
のgetInitialProps
関数は、クライアントサイドの遷移中、またはページが静的に最適化されている場合には呼び出されません。 -
Document
は現在、getStaticProps
またはgetServerSideProps
のような Next.js のData Fetching methodsをサポートしていません。
renderPage
Customizing さらにカスタマイズするために、引数としてオプションオブジェクトを取ります。
import Document from "next/document"
class MyDocument extends Document {
static async getInitialProps(ctx) {
const originalRenderPage = ctx.renderPage
ctx.renderPage = () =>
originalRenderPage({
// リアクトツリー全体を包み込むのに便利です。
enhanceApp: (App) => App,
// ページ単位で包み込むのに便利です。
enhanceComponent: (Component) => Component,
})
// 親の `getInitialProps` を実行すると、カスタムの `renderPage` が含まれるようになります。
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
}
export default MyDocument
TypeScript
組み込みの DocumentContext
タイプを使用して、ファイル名を ./pages/_document.tsx
のように変更できます。
import Document, { DocumentContext } from "next/document"
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
}
export default MyDocument
Discussion