質問編集履歴

5

編集

2020/12/03 00:04

投稿

yyyrrr
yyyrrr

スコア17

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- next.js、react, styled-componentsを使って開発をしています。
1
+ react, styled-componentsを使って開発をしています。
2
2
 
3
3
  初期描画時に画面のレイアウトが一瞬崩れてしまいます。
4
4
 

4

編集

2020/12/03 00:04

投稿

yyyrrr
yyyrrr

スコア17

test CHANGED
@@ -1 +1 @@
1
- next.js 初期描画時にスタイルが崩れる。
1
+ 初期描画時にスタイルが崩れる。
test CHANGED
File without changes

3

編集

2020/12/01 23:24

投稿

yyyrrr
yyyrrr

スコア17

test CHANGED
File without changes
test CHANGED
@@ -46,16 +46,6 @@
46
46
 
47
47
 
48
48
 
49
- ctx.renderPage = (): ReturnType<DocumentContext['renderPage']> =>
50
-
51
- originalRenderPage({
52
-
53
- enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
54
-
55
- });
56
-
57
-
58
-
59
49
  const initialProps = await Document.getInitialProps(ctx);
60
50
 
61
51
 

2

編集

2020/11/28 21:45

投稿

yyyrrr
yyyrrr

スコア17

test CHANGED
File without changes
test CHANGED
@@ -5,3 +5,97 @@
5
5
  多分SSRを使っているのが原因だと思うのですが解決方法がわからないので投稿しました。
6
6
 
7
7
  わかる人いましたらご教授して欲しいです
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+ // 追記
16
+
17
+ ```ここに言語を入力
18
+
19
+ import React from 'react';
20
+
21
+ import NextDocument, {
22
+
23
+ Head,
24
+
25
+ Main,
26
+
27
+ NextScript,
28
+
29
+ DocumentInitialProps,
30
+
31
+ DocumentContext,
32
+
33
+ } from 'next/document';
34
+
35
+ import { ServerStyleSheet } from 'styled-components';
36
+
37
+
38
+
39
+ class Document extends NextDocument {
40
+
41
+ static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
42
+
43
+ const sheet = new ServerStyleSheet();
44
+
45
+ const originalRenderPage = ctx.renderPage;
46
+
47
+
48
+
49
+ ctx.renderPage = (): ReturnType<DocumentContext['renderPage']> =>
50
+
51
+ originalRenderPage({
52
+
53
+ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
54
+
55
+ });
56
+
57
+
58
+
59
+ const initialProps = await Document.getInitialProps(ctx);
60
+
61
+
62
+
63
+ return {
64
+
65
+ ...initialProps,
66
+
67
+ styles: [...React.Children.toArray(initialProps.styles), sheet.getStyleElement()],
68
+
69
+ };
70
+
71
+ }
72
+
73
+ render() {
74
+
75
+ return (
76
+
77
+ <Head>
78
+
79
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
80
+
81
+ <body>
82
+
83
+ <Main />
84
+
85
+ <NextScript />
86
+
87
+ </body>
88
+
89
+ </Head>
90
+
91
+ );
92
+
93
+ }
94
+
95
+ }
96
+
97
+
98
+
99
+ export default Document;
100
+
101
+ ```

1

編集

2020/11/16 01:36

投稿

yyyrrr
yyyrrr

スコア17

test CHANGED
File without changes
test CHANGED
@@ -4,4 +4,4 @@
4
4
 
5
5
  多分SSRを使っているのが原因だと思うのですが解決方法がわからないので投稿しました。
6
6
 
7
- わかる人いましたらご教授して欲しいです
7
+ わかる人いましたらご教授して欲しいです