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");
|
||||
const withMDX = require("@zeit/next-mdx");
|
||||
|
||||
module.exports = [
|
||||
[
|
||||
withMDX({
|
||||
module.exports = require("@next/mdx")({
|
||||
extension: /\.mdx?$/
|
||||
}),
|
||||
{
|
||||
pageExtensions: ["md", "mdx"]
|
||||
}
|
||||
],
|
||||
[withTypescript]
|
||||
].reduce((o, [f, a]) => f(Object.assign(o, a)), {});
|
||||
})({
|
||||
pageExtensions: ["ts", "tsx", "md", "mdx"]
|
||||
});
|
||||
|
|
|
|||
28
package.json
28
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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
const MainTheme: React.FC = ({ children }) => (
|
||||
<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>
|
||||
<Box paddingTop={6}>
|
||||
<Container>
|
||||
<Typography component="div" variant="body1">
|
||||
{children}
|
||||
</Typography>
|
||||
</Container>
|
||||
</Box>
|
||||
</MDXProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
export default MainTheme;
|
||||
|
|
|
|||
|
|
@ -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,7 +15,6 @@ const TopAppBar: React.FC<{ router: any }> = ({ router }) => {
|
|||
);
|
||||
});
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar color="default">
|
||||
<Tabs
|
||||
value={value}
|
||||
|
|
@ -38,7 +31,6 @@ const TopAppBar: React.FC<{ router: any }> = ({ router }) => {
|
|||
))}
|
||||
</Tabs>
|
||||
</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": {
|
||||
"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"]
|
||||
}
|
||||
|
|
|
|||
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