fix

renzholy · Aug 17, 2021 · da8b61f · da8b61f
1 parent b057e0f
commit da8b61f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,8 +2,7 @@
   "extends": [
     "airbnb-typescript",
     "plugin:react-hooks/recommended",
-    "prettier",
-    "next"
+    "prettier"
   ],
   "plugins": ["prettier", "react", "import"],
   "env": {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -5,14 +5,12 @@ import { useMonacoInit } from 'hooks/use-monaco'
 import { Provider } from 'react-redux'
 import { store } from 'stores/index'
 import { initializeIcons, ThemeProvider } from '@fluentui/react'
-import { useEffect } from 'react'
 import './global.css'
 
+initializeIcons()
+
 export default function MyApp({ Component, pageProps }: AppProps) {
   useMonacoInit()
-  useEffect(() => {
-    initializeIcons()
-  }, [])
 
   return (
     <>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -0,0 +1,48 @@
+import Document, {
+  DocumentContext,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document'
+import { InjectionMode, Stylesheet, resetIds } from '@fluentui/react'
+
+const stylesheet = Stylesheet.getInstance()
+
+stylesheet.setConfig({
+  injectionMode: InjectionMode.none,
+  namespace: 'server',
+})
+
+/**
+ * @see https://github.com/microsoft/fluentui/wiki/Server-side-rendering-and-browserless-testing
+ */
+export default class MyDocument extends Document<{ styleTags: string }> {
+  static async getInitialProps({ renderPage }: DocumentContext) {
+    stylesheet.reset()
+    resetIds()
+
+    // eslint-disable-next-line react/display-name, react/jsx-props-no-spreading
+    const page = renderPage((App) => (props) => <App {...props} />)
+
+    return { ...page, styleTags: stylesheet.getRules(true) }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <style
+            type="text/css"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: this.props.styleTags }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}