回答編集履歴
3
曖昧な文章に詳細を追記 & カスタム→カスタマイズに置換
test
CHANGED
|
@@ -124,11 +124,11 @@
|
|
|
124
124
|
|
|
125
125
|
|
|
126
126
|
|
|
127
|
-
### カスタ
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
Next.jsのデフォルトの`Document`クラスは[こちら](https://github.com/vercel/next.js/blob/f0d2e64371c298741fb425932c96f75c653333ee/packages/next/pages/_document.tsx#L71-L117)で確認できます。このクラスの`static getInitialProps`静的メソッドを次のコードで拡張します：
|
|
127
|
+
### カスタマイズしたDocumentクラスでServerStyleSheetを使用する
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
`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`静的メソッドを次のコードで拡張します：
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
|
2
カテゴリーがTypeScriptでしたのでコードに型指定を追加しました
test
CHANGED
|
@@ -2,11 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
また、この回答は問題の原因が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)。
|
|
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)。
|
|
10
6
|
|
|
11
7
|
|
|
12
8
|
|
|
@@ -142,7 +138,7 @@
|
|
|
142
138
|
|
|
143
139
|
import React from 'react'
|
|
144
140
|
|
|
145
|
-
import Document from 'next/document'
|
|
141
|
+
import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
|
|
146
142
|
|
|
147
143
|
import { ServerStyleSheet } from 'styled-components'
|
|
148
144
|
|
|
@@ -152,15 +148,19 @@
|
|
|
152
148
|
|
|
153
149
|
// 拡張部ここから〜
|
|
154
150
|
|
|
155
|
-
static async getInitialProps(
|
|
151
|
+
static async getInitialProps(
|
|
152
|
+
|
|
153
|
+
ctx: DocumentContext
|
|
154
|
+
|
|
155
|
+
): Promise<DocumentInitialProps> {
|
|
156
156
|
|
|
157
157
|
const sheet = new ServerStyleSheet()
|
|
158
158
|
|
|
159
159
|
const originalRenderPage = ctx.renderPage
|
|
160
160
|
|
|
161
|
-
|
|
162
|
-
|
|
161
|
+
|
|
162
|
+
|
|
163
|
-
ctx.renderPage = () =>
|
|
163
|
+
ctx.renderPage = (): ReturnType<DocumentContext['renderPage']> =>
|
|
164
164
|
|
|
165
165
|
originalRenderPage({
|
|
166
166
|
|
1
typo修正
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
また、この回答は問題の原因がstyle
|
|
9
|
+
また、この回答は問題の原因が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)。
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|