From b53186c8872e4966e14a4e64ff1271d5561d46c3 Mon Sep 17 00:00:00 2001
From: Kohei Watanabe
Date: Tue, 9 Jul 2019 15:46:11 +0900
Subject: [PATCH] =?UTF-8?q?Next.js=209=20=E5=AF=BE=E5=BF=9C=E3=81=AA?=
=?UTF-8?q?=E3=81=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.babelrc | 6 -
.eslintrc.yml | 20 -
next-env.d.ts | 8 +
next.config.js | 19 +-
package.json | 28 +-
pages/_document.tsx | 42 +-
styles/MainTheme.tsx | 72 +-
styles/TopAppBar.tsx | 46 +-
styles/boot.ts | 2 -
tsconfig.json | 27 +-
types/@mdx-js/tag.d.ts | 6 -
yarn.lock | 3434 +++++++++++++++++-----------------------
12 files changed, 1562 insertions(+), 2148 deletions(-)
delete mode 100644 .babelrc
delete mode 100644 .eslintrc.yml
create mode 100644 next-env.d.ts
delete mode 100644 styles/boot.ts
delete mode 100644 types/@mdx-js/tag.d.ts
diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 4a76d03..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "presets": [
- "next/babel",
- "@zeit/next-typescript/babel"
- ]
-}
diff --git a/.eslintrc.yml b/.eslintrc.yml
deleted file mode 100644
index c6c6944..0000000
--- a/.eslintrc.yml
+++ /dev/null
@@ -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: {}
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..2620bff
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,8 @@
+///
+///
+declare module "@mdx-js/react" {
+ let MDXProvider: React.FC<{
+ components?: object;
+ childlen?: ReactNode;
+ }>;
+}
diff --git a/next.config.js b/next.config.js
index 8cec44d..00a5cc5 100644
--- 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"]
+});
diff --git a/package.json b/package.json
index bff139f..b500659 100644
--- 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"
}
}
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 79b6d8d..397f091 100644
--- 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()
+ });
+ const initialProps = await Document.getInitialProps(ctx);
+ return {
+ ...initialProps,
+ styles: [initialProps.styles, sheets.getStyleElement()]
+ } as DocumentInitialProps;
+ };
+
render() {
return (
-
-
+
+
+
+
+
+
-
+
);
}
}
diff --git a/styles/MainTheme.tsx b/styles/MainTheme.tsx
index 064f42e..2e04809 100644
--- 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 (
-
- {children}
-
- );
-};
-
-const MainTheme: React.FC<{}> = ({ children }) => {
- return (
-
-
-
-
-
-
-
-
-
-
- {children}
-
-
-
- );
-};
+const MainTheme: React.FC = ({ children }) => (
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+);
export default MainTheme;
diff --git a/styles/TopAppBar.tsx b/styles/TopAppBar.tsx
index ab824fa..714b171 100644
--- 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 (
-
-
- {
- router.push(routes[value].pathname);
- setValue(value);
- }}
- variant="fullWidth"
- indicatorColor="primary"
- textColor="primary"
- >
- {routes.map(({ icon }, i) => (
-
- ))}
-
-
-