Modify CustomDocument for using styled-components and material-ui in ssr

KEP-STUDY · May 2, 2021 · 32eed36 · 32eed36
1 parent 0e42b62
commit 32eed36
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 15 deletions.
diff --git a/apps/client/.babelrc b/apps/client/.babelrc
@@ -1,4 +1,16 @@
 {
  "presets": ["@nrwl/next/babel"],
- "plugins": [["styled-components", { "pure": true, "ssr": true }]]
+ "plugins": [
+ ["styled-components", { "ssr": true }],
+ [
+ "module-resolver",
+ {
+ "root": ["./"],
+ "alias": {
+ "@src": "./src"
+ },
+ "extensions": [".js", ".jsx", ".tsx"]
+ }
+ ]
+ ]
 }
diff --git a/apps/client/utils/.gitkeep → apps/client/interfaces/.gitkeep b/apps/client/utils/.gitkeep → apps/client/interfaces/.gitkeep
diff --git a/apps/client/pages/_app.tsx b/apps/client/pages/_app.tsx
@@ -1,19 +1,23 @@
 import React from 'react'
 import { AppProps } from 'next/app'
 import Head from 'next/head'
+import { Header } from 'components'
+import { ThemeProvider } from 'styled-components'
+import theme from 'utils/theme'
 
 function CustomApp({ Component, pageProps }: AppProps) {
  return (
- <>
+ <ThemeProvider theme={theme}>
  <Head>
  <title>리뷰 캠퍼스</title>
  </Head>
  <div className="app">
+ <Header />
  <main>
  <Component {...pageProps} />
  </main>
  </div>
- </>
+ </ThemeProvider>
  )
 }
 

diff --git a/apps/client/pages/_document.tsx b/apps/client/pages/_document.tsx
@@ -1,19 +1,41 @@
-import React, { ReactElement } from 'react'
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import React from 'react'
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
+import { ServerStyleSheets } from '@material-ui/styles'
 
-export default class CustomDocument extends Document<{ styleTags: ReactElement[] }> {
- static getInitialProps({ renderPage }) {
- const sheet = new ServerStyleSheet()
- const page = renderPage((App) => (props) => sheet.collectStyles(<App {...props} />))
- const styleTags = sheet.getStyleElement()
- return { ...page, styleTags }
+export default class CustomDocument extends Document {
+ static async getInitialProps(ctx: DocumentContext) {
+ const styledComponentsSheet = new ServerStyleSheet()
+ const materialSheets = new ServerStyleSheets()
+ const originalRenderPage = ctx.renderPage
+
+ try {
+ ctx.renderPage = () =>
+ originalRenderPage({
+ enhanceApp: (App) => (props) =>
+ styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />)),
+ })
+ const initialProps = await Document.getInitialProps(ctx)
+ return {
+ ...initialProps,
+ styles: (
+ <>
+ {initialProps.styles} {materialSheets.getStyleElement()}
+ {styledComponentsSheet.getStyleElement()}
+ </>
+ ),
+ }
+ } finally {
+ styledComponentsSheet.seal()
+ }
  }
 
  render() {
  return (
- <Html>
- <Head>{this.props.styleTags}</Head>
+ <Html lang="ko">
+ <Head>
+ <meta charSet="utf-8" />
+ </Head>
  <body>
  <Main />
  <NextScript />

diff --git a/apps/client/pages/index.tsx b/apps/client/pages/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import styled from 'styled-components'
 
-export function Index() {
+function Index() {
  return <div>Index Page</div>
 }
 

diff --git a/apps/client/pages/login.tsx b/apps/client/pages/login.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+function Login() {
+ return <div>Login Page</div>
+}
+
+export default Login
diff --git a/apps/client/styles/color.ts b/apps/client/styles/color.ts
@@ -0,0 +1,3 @@
+export const color = {
+ primary: '#0080ff',
+}
diff --git a/apps/client/utils/theme.ts b/apps/client/utils/theme.ts
@@ -0,0 +1,22 @@
+import { createMuiTheme } from '@material-ui/core/styles'
+import red from '@material-ui/core/colors/red'
+
+// Create a theme instance.
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ main: '#556cd6',
+ },
+ secondary: {
+ main: '#19857b',
+ },
+ error: {
+ main: red.A400,
+ },
+ background: {
+ default: '#fff',
+ },
+ },
+})
+
+export default theme