add material-ui configuration

2021-03-17 05:26:32 +01:00 · 2021-03-17 05:26:32 +01:00 · 9e75ad97e7
parent 056e6b6a8d
commit 9e75ad97e7
3 changed files with 66 additions and 1 deletions
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    locales: ['pl'],
+    defaultLocale: 'pl',
+  },
+};
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -1,7 +1,21 @@
+import '@kichiyaki/roboto';
+import { useEffect } from 'react';
 import { AppProps } from 'next/app';
+import ThemeProvider from 'libs/material-ui/ThemeProvider';

 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  useEffect(() => {
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles && jssStyles.parentElement) {
+      jssStyles.parentElement.removeChild(jssStyles);
+    }
+  }, []);
+
+  return (
+    <ThemeProvider>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
 }

 export default MyApp;
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -0,0 +1,45 @@
+import React from 'react';
+import Document, {
+  Html,
+  Main,
+  NextScript,
+  DocumentContext,
+  Head,
+} from 'next/document';
+import { ServerStyleSheets } from '@material-ui/styles';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    // Render app and page and get the context of the page with collected side effects.
+    const sheets = new ServerStyleSheets();
+    const originalRenderPage = ctx.renderPage;
+
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: App => props => sheets.collect(<App {...props} />),
+      });
+
+    const initialProps = await Document.getInitialProps(ctx);
+
+    return {
+      ...initialProps,
+      // Styles fragment is rendered after the app and page rendering finish.
+      styles: [
+        ...React.Children.toArray(initialProps.styles),
+        sheets.getStyleElement(),
+      ],
+    };
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}