回答編集履歴
3
曖昧な文章に詳細を追記 & カスタム→カスタマイズに置換
answer
CHANGED
|
@@ -61,9 +61,9 @@
|
|
|
61
61
|
|
|
62
62
|
正しく出力されない、あるいはエラーが発生する場合は、ファイルが当手順に従って正しく構成されているか確認してください。
|
|
63
63
|
|
|
64
|
-
### カスタ
|
|
64
|
+
### カスタマイズしたDocumentクラスでServerStyleSheetを使用する
|
|
65
65
|
|
|
66
|
-
Next.jsのデフォルトの`Document`クラスは[こちら](https://github.com/vercel/next.js/blob/f0d2e64371c298741fb425932c96f75c653333ee/packages/next/pages/_document.tsx#L71-L117)で確認できます。このクラスの`static getInitialProps`静的メソッドを次のコードで拡張します：
|
|
66
|
+
`pages/_document.[jt]sx?`にファイルを置くことで、カスタマイズした`Document`クラスを使用することができます。（Next.jsのデフォルトの`Document`クラスは[こちら](https://github.com/vercel/next.js/blob/f0d2e64371c298741fb425932c96f75c653333ee/packages/next/pages/_document.tsx#L71-L117)で確認できます。）このクラスの`static getInitialProps`静的メソッドを次のコードで拡張します：
|
|
67
67
|
|
|
68
68
|
```
|
|
69
69
|
// 以下の3行の`import`文は必須です
|
2
カテゴリーがTypeScriptでしたのでコードに型指定を追加しました
answer
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
## 前書
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
この回答は問題の原因がstyled-componentsにあると想定しての内容になります。以下の手順で作業を行ったにもかかわらず問題が解決されない場合は、Next.jsのCSSインポート機能でスタイルシートを読み込んでいないか（例：`import styles from '../styles/SomeStyle.module.css'`）確認してください。当該機能を利用している場合、Next.jsのCSSインポート機能は[SSRをサポートしていない](https://github.com/vercel/next.js/issues/14286)ため、他のアプローチでスタイルを設定する必要があります。styled-componentsを利用している場合は[`createGlobalStyle`がおすすめです](https://styled-components.com/docs/api#helpers)。
|
|
4
4
|
|
|
5
|
-
また、この回答は問題の原因がstyled-componentsにあると想定しての内容になります。以下の手順で作業を行ったにもかかわらず問題が解決されない場合は、Next.jsのCSSインポート機能でスタイルシートを読み込んでいないか（例：`import styles from '../styles/SomeStyle.module.css'`）確認してください。当該機能を利用している場合、Next.jsのCSSインポート機能は[SSRをサポートしていない](https://github.com/vercel/next.js/issues/14286)ため、他のアプローチでスタイルを設定する必要があります。styled-componentsを利用している場合は[`createGlobalStyle`がおすすめです](https://styled-components.com/docs/api#helpers)。
|
|
6
|
-
|
|
7
5
|
## 回答
|
|
8
6
|
|
|
9
7
|
styled-componentsで正しくSSRを行うためには[専用の設定](https://styled-components.com/docs/advanced#server-side-rendering)を行う必要があります。
|
|
@@ -70,16 +68,18 @@
|
|
|
70
68
|
```
|
|
71
69
|
// 以下の3行の`import`文は必須です
|
|
72
70
|
import React from 'react'
|
|
73
|
-
import Document from 'next/document'
|
|
71
|
+
import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
|
|
74
72
|
import { ServerStyleSheet } from 'styled-components'
|
|
75
73
|
|
|
76
74
|
export default class MyDocument extends Document {
|
|
77
75
|
// 拡張部ここから〜
|
|
78
|
-
static async getInitialProps(
|
|
76
|
+
static async getInitialProps(
|
|
77
|
+
ctx: DocumentContext
|
|
78
|
+
): Promise<DocumentInitialProps> {
|
|
79
79
|
const sheet = new ServerStyleSheet()
|
|
80
80
|
const originalRenderPage = ctx.renderPage
|
|
81
|
-
|
|
81
|
+
|
|
82
|
-
ctx.renderPage = () =>
|
|
82
|
+
ctx.renderPage = (): ReturnType<DocumentContext['renderPage']> =>
|
|
83
83
|
originalRenderPage({
|
|
84
84
|
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
|
|
85
85
|
})
|
1
typo修正
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
JavaScriptの使用を前提としています。TypeScriptのサポートが必要な場合は、追記していただければ確認次第回答を更新します。
|
|
4
4
|
|
|
5
|
-
また、この回答は問題の原因が
|
|
5
|
+
また、この回答は問題の原因がstyled-componentsにあると想定しての内容になります。以下の手順で作業を行ったにもかかわらず問題が解決されない場合は、Next.jsのCSSインポート機能でスタイルシートを読み込んでいないか（例：`import styles from '../styles/SomeStyle.module.css'`）確認してください。当該機能を利用している場合、Next.jsのCSSインポート機能は[SSRをサポートしていない](https://github.com/vercel/next.js/issues/14286)ため、他のアプローチでスタイルを設定する必要があります。styled-componentsを利用している場合は[`createGlobalStyle`がおすすめです](https://styled-components.com/docs/api#helpers)。
|
|
6
6
|
|
|
7
7
|
## 回答
|
|
8
8
|
|