mirror of
https://github.com/kou029w/_.git
synced 2025-01-31 06:18:07 +00:00
Next.js 9 対応など
This commit is contained in:
parent
12089402f4
commit
b53186c887
12 changed files with 1562 additions and 2148 deletions
6
.babelrc
6
.babelrc
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"presets": [
|
|
||||||
"next/babel",
|
|
||||||
"@zeit/next-typescript/babel"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -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: {}
|
|
||||||
8
next-env.d.ts
vendored
Normal file
8
next-env.d.ts
vendored
Normal file
|
|
@ -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;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,5 @@
|
||||||
const withTypescript = require("@zeit/next-typescript");
|
module.exports = require("@next/mdx")({
|
||||||
const withMDX = require("@zeit/next-mdx");
|
extension: /\.mdx?$/
|
||||||
|
})({
|
||||||
module.exports = [
|
pageExtensions: ["ts", "tsx", "md", "mdx"]
|
||||||
[
|
});
|
||||||
withMDX({
|
|
||||||
extension: /\.mdx?$/
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
pageExtensions: ["md", "mdx"]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[withTypescript]
|
|
||||||
].reduce((o, [f, a]) => f(Object.assign(o, a)), {});
|
|
||||||
|
|
|
||||||
28
package.json
28
package.json
|
|
@ -5,28 +5,20 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@material-ui/core": "^4.0.1",
|
"@material-ui/core": "^4.2.0",
|
||||||
"@material-ui/icons": "^4.0.1",
|
"@material-ui/icons": "^4.2.1",
|
||||||
"@material-ui/styles": "^4.0.1",
|
"@material-ui/styles": "^4.2.0",
|
||||||
"@zeit/next-mdx": "^1.2.0",
|
"@mdx-js/loader": "^1.0.21",
|
||||||
"@zeit/next-typescript": "^1.1.1",
|
"@next/mdx": "^9.0.0",
|
||||||
"next": "^8.1.0",
|
"next": "^9.0.0",
|
||||||
"react": "^16.8.6",
|
"react": "^16.8.6",
|
||||||
"react-dom": "^16.8.6",
|
"react-dom": "^16.8.6"
|
||||||
"typescript": "^3.5.1"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/next": "^8.0.5",
|
"@types/node": "^12.6.1",
|
||||||
"@types/react": "^16.8.19",
|
"typescript": "^3.5.3"
|
||||||
"@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"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next",
|
"dev": "next"
|
||||||
"lint": "eslint --ext .js,.jsx,.ts,.tsx ."
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,48 @@
|
||||||
import React from "react";
|
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 {
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<html lang="ja" dir="ltr">
|
<Html lang="ja" dir="ltr">
|
||||||
<Head />
|
<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>
|
<body>
|
||||||
<Main />
|
<Main />
|
||||||
<NextScript />
|
<NextScript />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</Html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,11 @@
|
||||||
import "./boot";
|
import { ThemeProvider } from "@material-ui/styles";
|
||||||
import { ThemeProvider, makeStyles } from "@material-ui/styles";
|
import { createMuiTheme } from "@material-ui/core/styles";
|
||||||
import {
|
|
||||||
CssBaseline,
|
|
||||||
createMuiTheme,
|
|
||||||
Typography,
|
|
||||||
Link as MuiLink,
|
|
||||||
Grid
|
|
||||||
} from "@material-ui/core";
|
|
||||||
import { orange, teal } from "@material-ui/core/colors";
|
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 React, { ReactNode } from "react";
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
@ -24,7 +21,6 @@ export const theme = createMuiTheme({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
typography: {
|
typography: {
|
||||||
useNextVariants: true,
|
|
||||||
fontFamily: '"Noto Sans JP", "Helvetica", "Arial", sans-serif'
|
fontFamily: '"Noto Sans JP", "Helvetica", "Arial", sans-serif'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -50,44 +46,18 @@ export const components = {
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Container: React.FC<{}> = ({ children }) => {
|
const MainTheme: React.FC = ({ children }) => (
|
||||||
const classes = makeStyles({
|
<ThemeProvider theme={theme}>
|
||||||
root: {
|
<MDXProvider components={components}>
|
||||||
padding: [8, 3, 1].map(n => `${theme.spacing.unit * n}px`).join(" "),
|
<TopAppBar />
|
||||||
[theme.breakpoints.up("sm")]: {
|
<Box paddingTop={6}>
|
||||||
padding: [9, 4, 1].map(n => `${theme.spacing.unit * n}px`).join(" ")
|
<Container>
|
||||||
}
|
<Typography component="div" variant="body1">
|
||||||
}
|
{children}
|
||||||
})();
|
</Typography>
|
||||||
return (
|
</Container>
|
||||||
<Grid className={classes.root} container>
|
</Box>
|
||||||
{children}
|
</MDXProvider>
|
||||||
</Grid>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default MainTheme;
|
export default MainTheme;
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,9 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { withRouter } from "next/router";
|
import { withRouter } from "next/router";
|
||||||
import { makeStyles } from "@material-ui/styles";
|
|
||||||
import { AppBar, Tabs, Tab } from "@material-ui/core";
|
import { AppBar, Tabs, Tab } from "@material-ui/core";
|
||||||
import routes from "../routes";
|
import routes from "../routes";
|
||||||
|
|
||||||
const TopAppBar: React.FC<{ router: any }> = ({ router }) => {
|
const TopAppBar = withRouter(({ router }) => {
|
||||||
const classes = makeStyles({
|
|
||||||
root: {
|
|
||||||
flexGrow: 1
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
const [value, setValue] = useState(
|
const [value, setValue] = useState(
|
||||||
routes.findIndex(({ pathname }) => pathname === router.pathname)
|
routes.findIndex(({ pathname }) => pathname === router.pathname)
|
||||||
);
|
);
|
||||||
|
|
@ -21,24 +15,22 @@ const TopAppBar: React.FC<{ router: any }> = ({ router }) => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<div className={classes.root}>
|
<AppBar color="default">
|
||||||
<AppBar color="default">
|
<Tabs
|
||||||
<Tabs
|
value={value}
|
||||||
value={value}
|
onChange={(_, value) => {
|
||||||
onChange={(_, value) => {
|
router.push(routes[value].pathname);
|
||||||
router.push(routes[value].pathname);
|
setValue(value);
|
||||||
setValue(value);
|
}}
|
||||||
}}
|
variant="fullWidth"
|
||||||
variant="fullWidth"
|
indicatorColor="primary"
|
||||||
indicatorColor="primary"
|
textColor="primary"
|
||||||
textColor="primary"
|
>
|
||||||
>
|
{routes.map(({ icon }, i) => (
|
||||||
{routes.map(({ icon }, i) => (
|
<Tab key={i} icon={icon} />
|
||||||
<Tab key={i} icon={icon} />
|
))}
|
||||||
))}
|
</Tabs>
|
||||||
</Tabs>
|
</AppBar>
|
||||||
</AppBar>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
export default withRouter(TopAppBar);
|
export default TopAppBar;
|
||||||
|
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
import { install } from "@material-ui/styles";
|
|
||||||
install();
|
|
||||||
|
|
@ -1,23 +1,24 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"allowSyntheticDefaultImports": true,
|
"skipLibCheck": true,
|
||||||
"jsx": "preserve",
|
"strict": true,
|
||||||
"lib": ["dom", "es2017"],
|
"forceConsistentCasingInFileNames": true,
|
||||||
"module": "esnext",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"preserveConstEnums": true,
|
|
||||||
"removeComments": false,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"sourceMap": true,
|
|
||||||
"strict": true,
|
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"noImplicitReturns": true,
|
"noImplicitReturns": true,
|
||||||
"noImplicitThis": true,
|
"noImplicitThis": true,
|
||||||
"target": "esnext",
|
"esModuleInterop": true,
|
||||||
"typeRoots": ["node_modules/@types", "types"]
|
"module": "esnext",
|
||||||
}
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve"
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules"],
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
6
types/@mdx-js/tag.d.ts
vendored
6
types/@mdx-js/tag.d.ts
vendored
|
|
@ -1,6 +0,0 @@
|
||||||
declare module "@mdx-js/tag" {
|
|
||||||
class MDXProvider extends React.Component<{
|
|
||||||
components: any;
|
|
||||||
childlen?: ReactNode;
|
|
||||||
}> {}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Reference in a new issue