nebel/_
1
0
Fork 0
mirror of https://github.com/kou029w/_.git synced 2025-01-31 06:18:07 +00:00
Code Issues Projects Releases Wiki Activity

Next.js 9 対応など

Browse source
This commit is contained in:
Nebel 2019-07-09 15:46:11 +09:00
parent 12089402f4
commit b53186c887
12 changed files with 1562 additions and 2148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.babelrc
View file

@ -1,6 +0,0 @@
{
"presets": [
"next/babel",
"@zeit/next-typescript/babel"
]
}

20
.eslintrc.yml
View file

@ -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
View 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;
}>;
}

17
next.config.js
View file

@ -1,14 +1,5 @@
const withTypescript = require("@zeit/next-typescript"); module.exports = require("@next/mdx")({
const withMDX = require("@zeit/next-mdx");
module.exports = [
[
withMDX({
extension: /\.mdx?$/ extension: /\.mdx?$/
}), })({
{ pageExtensions: ["ts", "tsx", "md", "mdx"]
pageExtensions: ["md", "mdx"] });
}
],
[withTypescript]
].reduce((o, [f, a]) => f(Object.assign(o, a)), {});

28
package.json
View file

@ -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 ."
} }
} }

42
pages/_document.tsx
View file

@ -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>
); );
} }
} }

58
styles/MainTheme.tsx
View file

@ -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({
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}> <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}> <MDXProvider components={components}>
<Typography component="div" variant="body1">
<TopAppBar /> <TopAppBar />
<Container>{children}</Container> <Box paddingTop={6}>
<Container>
<Typography component="div" variant="body1">
{children}
</Typography> </Typography>
</Container>
</Box>
</MDXProvider> </MDXProvider>
</ThemeProvider> </ThemeProvider>
); );
};
export default MainTheme; export default MainTheme;

14
styles/TopAppBar.tsx
View file

@ -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,7 +15,6 @@ 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}
@ -38,7 +31,6 @@ const TopAppBar: React.FC<{ router: any }> = ({ router }) => {
))} ))}
</Tabs> </Tabs>
</AppBar> </AppBar>
</div>
); );
}; });
export default withRouter(TopAppBar); export default TopAppBar;

2
styles/boot.ts
View file

@ -1,2 +0,0 @@
import { install } from "@material-ui/styles";
install();

27
tsconfig.json
View file

@ -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
View file

@ -1,6 +0,0 @@
declare module "@mdx-js/tag" {
class MDXProvider extends React.Component<{
components: any;
childlen?: ReactNode;
}> {}
}

3434
yarn.lock
View file

File diff suppressed because it is too large Load diff