From 22a9eb074b6f039dd776b730e53ef2e62ad2231c Mon Sep 17 00:00:00 2001 From: IAMKOTARO Date: Sat, 24 Jun 2023 21:33:52 +0900 Subject: [PATCH 01/17] =?UTF-8?q?material=20ui=E3=81=AE=E5=B0=8E=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 + pages/_app.tsx | 52 +++--- pages/_document.tsx | 117 +++++++++--- pages/index.tsx | 9 +- src/createEmotionCache.ts | 19 ++ src/theme.ts | 30 +++ yarn.lock | 371 ++++++++++++++++++++++++++++++++++++-- 7 files changed, 533 insertions(+), 70 deletions(-) create mode 100644 src/createEmotionCache.ts create mode 100644 src/theme.ts diff --git a/package.json b/package.json index 8269d13..fc1416e 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,11 @@ "@apollo/client": "^3.7.12", "@apollo/server": "^4.7.0", "@as-integrations/next": "^1.3.0", + "@emotion/react": "^11.11.1", + "@emotion/server": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.11.16", + "@mui/material": "^5.13.6", "@nextui-org/react": "^1.0.0-beta.12", "@types/react": "18.2.0", "@types/react-dom": "18.2.1", diff --git a/pages/_app.tsx b/pages/_app.tsx index 1aeeb12..cee09c5 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,31 +1,31 @@ -import '@/styles/globals.css' -import type { AppProps } from 'next/app' -import { NextUIProvider, createTheme } from '@nextui-org/react'; -import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client' +import * as React from 'react'; +import Head from 'next/head'; +import { AppProps } from 'next/app'; +import { ThemeProvider } from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import { CacheProvider, EmotionCache } from '@emotion/react'; +import theme from '../src/theme'; +import createEmotionCache from '../src/createEmotionCache'; -const client = new ApolloClient({ - uri: '/api/graphql', - cache: new InMemoryCache(), -}) +// Client-side cache, shared for the whole session of the user in the browser. +const clientSideEmotionCache = createEmotionCache(); -export default function App({ Component, pageProps }: AppProps) { - - const theme = createTheme({ - type: "dark", // it could be "light" or "dark" - theme: { - colors: { - primary: '#4ADE7B', - secondary: '#F9CB80', - error: '#FCC5D8', - }, - } - }) +export interface MyAppProps extends AppProps { + emotionCache?: EmotionCache; +} +export default function MyApp(props: MyAppProps) { + const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; return ( - - + + + + + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + - - - ) -} + + + ); +} \ No newline at end of file diff --git a/pages/_document.tsx b/pages/_document.tsx index 5337175..91c6524 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,26 +1,95 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document'; -import { CssBaseline } from '@nextui-org/react'; - -class MyDocument extends Document { - static async getInitialProps(ctx: any) { - const initialProps = await Document.getInitialProps(ctx); - return { - ...initialProps, - styles: <>{initialProps.styles} - }; - } - - render() { - return ( - - {CssBaseline.flush()} - -
- - - - ); - } +import * as React from 'react'; +import Document, { + Html, + Head, + Main, + NextScript, + DocumentProps, + DocumentContext, +} from 'next/document'; +import createEmotionServer from '@emotion/server/create-instance'; +import { AppType } from 'next/app'; +import theme, { roboto } from '../src/theme'; +import createEmotionCache from '../src/createEmotionCache'; +import { MyAppProps } from './_app'; + +interface MyDocumentProps extends DocumentProps { + emotionStyleTags: JSX.Element[]; +} + +export default function MyDocument({ emotionStyleTags }: MyDocumentProps) { + return ( + + + {/* PWA primary color */} + + + + {emotionStyleTags} + + +
+ + + + ); } -export default MyDocument; +// `getInitialProps` belongs to `_document` (instead of `_app`), +// it's compatible with static-site generation (SSG). +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + // Resolution order + // + // On the server: + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. document.getInitialProps + // 4. app.render + // 5. page.render + // 6. document.render + // + // On the server with error: + // 1. document.getInitialProps + // 2. app.render + // 3. page.render + // 4. document.render + // + // On the client + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. app.render + // 4. page.render + + const originalRenderPage = ctx.renderPage; + + // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance. + // However, be aware that it can have global side effects. + const cache = createEmotionCache(); + const { extractCriticalToChunks } = createEmotionServer(cache); + + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App: React.ComponentType & MyAppProps>) => + function EnhanceApp(props) { + return ; + }, + }); + + const initialProps = await Document.getInitialProps(ctx); + // This is important. It prevents Emotion to render invalid HTML. + // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 + const emotionStyles = extractCriticalToChunks(initialProps.html); + const emotionStyleTags = emotionStyles.styles.map((style) => ( +