在项目文件夹创建一个nextjs app：

    1. npx create-next-app --ts .

    安装依赖：

    1. yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled

    custom document
    cdn方式引入roboto字体：

    1. import Document, {
    2.   Html,
    3.   Head,
    4.   Main,
    5.   NextScript,
    6.   DocumentContext,
    7. } from "next/document";
    9. class MyDocument extends Document {
    10.   static async getInitialProps(ctx: DocumentContext) {
    11.     const initialProps = await Document.getInitialProps(ctx);
    12.     return initialProps;
    13.   }
    15.   render() {
    16.     return (
    17.       <Html>
    18.         <Head>
    19.           <link
    20.             rel="stylesheet"
    21.             href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    22.             />
    23.         </Head>
    24.         <body>
    25.           <Main />
    26.           <NextScript />
    27.         </body>
    28.       </Html>
    29.     );
    30.   }
    31. }
    33. export default MyDocument;

    material-ui theme creator