Next.js 9 対応など

2025-01-30 22:08:02 +00:00 · 2019-07-09 15:46:11 +09:00 · 2019-07-09 15:46:11 +09:00 · b53186c887
commit b53186c887
parent 12089402f4
12 changed files with 1562 additions and 2148 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,6 +0,0 @@
-{
-  "presets": [
-    "next/babel",
-    "@zeit/next-typescript/babel"
-  ]
-}
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@ -1,20 +0,0 @@
-env:
-  browser: true
-  es6: true
-extends:
-  - plugin:prettier/recommended
-  - prettier/@typescript-eslint
-globals:
-  Atomics: readonly
-  SharedArrayBuffer: readonly
-parser:
-  '@typescript-eslint/parser'
-parserOptions:
-  ecmaFeatures:
-    jsx: true
-  ecmaVersion: 2018
-  sourceType: module
-plugins:
-  - react
-  - '@typescript-eslint'
-rules: {}
--- a/next-env.d.ts
+++ b/next-env.d.ts
@ -0,0 +1,8 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+declare module "@mdx-js/react" {
+  let MDXProvider: React.FC<{
+    components?: object;
+    childlen?: ReactNode;
+  }>;
+}
--- a/next.config.js
+++ b/next.config.js
@ -1,14 +1,5 @@
-const withTypescript = require("@zeit/next-typescript");
-const withMDX = require("@zeit/next-mdx");
-
-module.exports = [
-  [
-    withMDX({
-      extension: /\.mdx?$/
-    }),
-    {
-      pageExtensions: ["md", "mdx"]
-    }
-  ],
-  [withTypescript]
-].reduce((o, [f, a]) => f(Object.assign(o, a)), {});
+module.exports = require("@next/mdx")({
+  extension: /\.mdx?$/
+})({
+  pageExtensions: ["ts", "tsx", "md", "mdx"]
+});
--- a/package.json
+++ b/package.json
@ -5,28 +5,20 @@
  "license": "MIT",
  "private": true,
  "dependencies": {
-    "@material-ui/core": "^4.0.1",
-    "@material-ui/icons": "^4.0.1",
-    "@material-ui/styles": "^4.0.1",
-    "@zeit/next-mdx": "^1.2.0",
-    "@zeit/next-typescript": "^1.1.1",
-    "next": "^8.1.0",
+    "@material-ui/core": "^4.2.0",
+    "@material-ui/icons": "^4.2.1",
+    "@material-ui/styles": "^4.2.0",
+    "@mdx-js/loader": "^1.0.21",
+    "@next/mdx": "^9.0.0",
+    "next": "^9.0.0",
    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "typescript": "^3.5.1"
+    "react-dom": "^16.8.6"
  },
  "devDependencies": {
-    "@types/next": "^8.0.5",
-    "@types/react": "^16.8.19",
-    "@typescript-eslint/eslint-plugin": "^1.9.0",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.13.0",
-    "prettier": "^1.17.1"
+    "@types/node": "^12.6.1",
+    "typescript": "^3.5.3"
  },
  "scripts": {
-    "dev": "next",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx ."
+    "dev": "next"
  }
 }
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -1,16 +1,48 @@
 import React from "react";
-import Document, { Head, Main, NextScript } from "next/document";
-
+import Document, {
+  DocumentContext,
+  DocumentInitialProps,
+  Html,
+  Head,
+  Main,
+  NextScript
+} from "next/document";
+import { ServerStyleSheets } from "@material-ui/styles";
+import { theme } from "../styles/MainTheme";
 export default class extends Document {
+  static getInitialProps = async (ctx: DocumentContext) => {
+    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: [initialProps.styles, sheets.getStyleElement()]
+    } as DocumentInitialProps;
+  };
+
  render() {
    return (
-      <html lang="ja" dir="ltr">
-        <Head />
+      <Html lang="ja" dir="ltr">
+        <Head>
+          <meta
+            name="viewport"
+            content="width=device-width,minimum-scale=1,initial-scale=1"
+          />
+          <meta name="theme-color" content={theme.palette.primary.main} />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap"
+          />
+        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
-      </html>
+      </Html>
    );
  }
 }
--- a/styles/MainTheme.tsx
+++ b/styles/MainTheme.tsx
@ -1,14 +1,11 @@
-import "./boot";
-import { ThemeProvider, makeStyles } from "@material-ui/styles";
-import {
-  CssBaseline,
-  createMuiTheme,
-  Typography,
-  Link as MuiLink,
-  Grid
-} from "@material-ui/core";
+import { ThemeProvider } from "@material-ui/styles";
+import { createMuiTheme } from "@material-ui/core/styles";
 import { orange, teal } from "@material-ui/core/colors";
-import { MDXProvider } from "@mdx-js/tag";
+import Typography from "@material-ui/core/Typography";
+import MuiLink from "@material-ui/core/Link";
+import Box from "@material-ui/core/Box";
+import Container from "@material-ui/core/Container";
+import { MDXProvider } from "@mdx-js/react";
 import React, { ReactNode } from "react";
 import Head from "next/head";
 import Link from "next/link";
@ -24,7 +21,6 @@ export const theme = createMuiTheme({
    }
  },
  typography: {
-    useNextVariants: true,
    fontFamily: '"Noto Sans JP", "Helvetica", "Arial", sans-serif'
  }
 });
@ -50,44 +46,18 @@ export const components = {
  )
 };

-export const Container: React.FC<{}> = ({ children }) => {
-  const classes = makeStyles({
-    root: {
-      padding: [8, 3, 1].map(n => `${theme.spacing.unit * n}px`).join(" "),
-      [theme.breakpoints.up("sm")]: {
-        padding: [9, 4, 1].map(n => `${theme.spacing.unit * n}px`).join(" ")
-      }
-    }
-  })();
-  return (
-    <Grid className={classes.root} container>
-      {children}
-    </Grid>
-  );
-};
-
-const MainTheme: React.FC<{}> = ({ children }) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <Head>
-        <meta
-          name="viewport"
-          content="width=device-width,minimum-scale=1,initial-scale=1"
-        />
-        <meta name="theme-color" content={theme.palette.primary.main} />
-        <link
-          rel="stylesheet"
-          href="https://fonts.googleapis.com/css?family=Noto+Sans+JP"
-        />
-      </Head>
-      <CssBaseline />
-      <MDXProvider components={components}>
-        <Typography component="div" variant="body1">
-          <TopAppBar />
-          <Container>{children}</Container>
-        </Typography>
-      </MDXProvider>
-    </ThemeProvider>
-  );
-};
+const MainTheme: React.FC = ({ children }) => (
+  <ThemeProvider theme={theme}>
+    <MDXProvider components={components}>
+      <TopAppBar />
+      <Box paddingTop={6}>
+        <Container>
+          <Typography component="div" variant="body1">
+            {children}
+          </Typography>
+        </Container>
+      </Box>
+    </MDXProvider>
+  </ThemeProvider>
+);
 export default MainTheme;
--- a/styles/TopAppBar.tsx
+++ b/styles/TopAppBar.tsx
@ -1,15 +1,9 @@
 import React, { useState } from "react";
 import { withRouter } from "next/router";
-import { makeStyles } from "@material-ui/styles";
 import { AppBar, Tabs, Tab } from "@material-ui/core";
 import routes from "../routes";

-const TopAppBar: React.FC<{ router: any }> = ({ router }) => {
-  const classes = makeStyles({
-    root: {
-      flexGrow: 1
-    }
-  })();
+const TopAppBar = withRouter(({ router }) => {
  const [value, setValue] = useState(
    routes.findIndex(({ pathname }) => pathname === router.pathname)
  );
@ -21,24 +15,22 @@ const TopAppBar: React.FC<{ router: any }> = ({ router }) => {
    );
  });
  return (
-    <div className={classes.root}>
-      <AppBar color="default">
-        <Tabs
-          value={value}
-          onChange={(_, value) => {
-            router.push(routes[value].pathname);
-            setValue(value);
-          }}
-          variant="fullWidth"
-          indicatorColor="primary"
-          textColor="primary"
-        >
-          {routes.map(({ icon }, i) => (
-            <Tab key={i} icon={icon} />
-          ))}
-        </Tabs>
-      </AppBar>
-    </div>
+    <AppBar color="default">
+      <Tabs
+        value={value}
+        onChange={(_, value) => {
+          router.push(routes[value].pathname);
+          setValue(value);
+        }}
+        variant="fullWidth"
+        indicatorColor="primary"
+        textColor="primary"
+      >
+        {routes.map(({ icon }, i) => (
+          <Tab key={i} icon={icon} />
+        ))}
+      </Tabs>
+    </AppBar>
  );
-};
-export default withRouter(TopAppBar);
+});
+export default TopAppBar;
--- a/styles/boot.ts
+++ b/styles/boot.ts
@ -1,2 +0,0 @@
-import { install } from "@material-ui/styles";
-install();
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,23 +1,24 @@
 {
  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
-    "lib": ["dom", "es2017"],
-    "module": "esnext",
-    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "preserveConstEnums": true,
-    "removeComments": false,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
-    "target": "esnext",
-    "typeRoots": ["node_modules/@types", "types"]
-  }
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }
--- a/types/@mdx-js/tag.d.ts
+++ b/types/@mdx-js/tag.d.ts
@ -1,6 +0,0 @@
-declare module "@mdx-js/tag" {
-  class MDXProvider extends React.Component<{
-    components: any;
-    childlen?: ReactNode;
-  }> {}
-}
--- a/yarn.lock
+++ b/yarn.lock