Skip to content

Commit cd65696

Browse files
gnokoheatgnokoheat
authored
Update dependencies (#9)
1 parent 6cdb7f6 commit cd65696

File tree

12 files changed

+1619
-2972
lines changed

12 files changed

+1619
-2972
lines changed

‎.babelrc‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
{
2-
"presets": [
3-
"next/babel"
4-
],
2+
"presets": ["next/babel"],
53
"plugins": [
64
[
75
"import",
86
{
97
"libraryName": "antd",
10-
"style": true
8+
"style": "css"
119
}
1210
]
1311
]
14-
}
12+
}

‎.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all"
4+
}

‎components/Layout.less‎ renamed to ‎components/Layout.css‎

File renamed without changes.

‎components/Layout.tsx‎

Lines changed: 90 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,129 @@
1-
import { Component } from 'react';
1+
import React, { useState, FunctionComponent } from 'react';
22
import { Layout, Menu, Breadcrumb } from 'antd';
33
import Link from 'next/link';
4-
import { withRouter } from 'next/router'
4+
import { withRouter, NextRouter } from 'next/router';
5+
import { WithRouterProps } from 'next/dist/client/with-router';
56

67
import {
78
DesktopOutlined,
89
DashboardOutlined,
910
SettingOutlined,
10-
} from '@ant-design/icons'
11+
} from '@ant-design/icons';
1112

12-
import './Layout.less';
13+
import './Layout.css';
1314

1415
const { SubMenu, Item } = Menu;
1516
const { Sider, Content } = Layout;
1617

17-
interface Props {
18-
router: any
18+
interface Router extends NextRouter {
19+
path: string;
20+
breadcrumbName: string;
1921
}
2022

21-
function itemRender(route: any, params: any, routes: any, paths: string[]) {
23+
interface Props extends WithRouterProps {
24+
router: Router;
25+
}
26+
27+
function itemRender(route: Router) {
2228
return route.path === 'index' ? (
23-
<Link href={'/'}><a>{route.breadcrumbName}</a></Link>
29+
<Link href={'/'}>
30+
<a>{route.breadcrumbName}</a>
31+
</Link>
2432
) : (
25-
<span>{route.breadcrumbName}</span>
26-
);
33+
<span>{route.breadcrumbName}</span>
34+
);
2735
}
2836

2937
function routesMaker(pathsplit: string[]) {
3038
let routes = [
3139
{
3240
path: 'index',
3341
breadcrumbName: 'home',
34-
}
42+
},
3543
];
3644
for (let v of pathsplit) {
3745
const pathInfo = {
3846
path: v,
3947
breadcrumbName: v,
40-
}
41-
if (v !== "") routes.push(pathInfo)
48+
};
49+
if (v !== '') routes.push(pathInfo);
4250
}
43-
return routes
51+
return routes;
4452
}
4553

46-
class AppLayout extends Component<Props> {
47-
state = {
48-
collapsed: false,
49-
};
54+
const AppLayout = (props: React.PropsWithChildren<Props>) => {
55+
const [isCollapsed, setIsCollapsed] = useState(false);
5056

51-
onCollapse = (collapsed: boolean) => {
52-
this.setState({ collapsed });
57+
const onChangeIsCollapsed = (isCollapsed: boolean) => {
58+
setIsCollapsed(isCollapsed);
5359
};
5460

55-
render() {
56-
const pathname = this.props.router.pathname;
57-
const pathsplit: string[] = pathname.split('/');
58-
const routes = routesMaker(pathsplit);
59-
return (
60-
<Layout style={{ minHeight: '100vh' }}>
61-
<Sider
62-
collapsible collapsed={this.state.collapsed}
63-
onCollapse={this.onCollapse}
61+
const pathname = props.router.pathname;
62+
const pathsplit: string[] = pathname.split('/');
63+
const routes = routesMaker(pathsplit);
64+
65+
return (
66+
<Layout style={{ minHeight: '100vh' }}>
67+
<Sider
68+
collapsible
69+
collapsed={isCollapsed}
70+
onCollapse={onChangeIsCollapsed}
71+
>
72+
<Link href="/menu1">
73+
<a>
74+
<div className="App-logo" />
75+
</a>
76+
</Link>
77+
<Menu
78+
theme="dark"
79+
defaultSelectedKeys={['/menu1']}
80+
selectedKeys={[pathsplit.pop()]}
81+
defaultOpenKeys={[pathsplit[1]]}
82+
mode="inline"
6483
>
65-
<Link href="/menu1">
66-
<a><div className="App-logo" /></a>
67-
</Link>
68-
<Menu
69-
theme="dark"
70-
defaultSelectedKeys={['/menu1']}
71-
selectedKeys={[pathsplit.pop()]}
72-
defaultOpenKeys={[pathsplit[1]]}
73-
mode="inline">
74-
<Item key="menu1" icon={<DesktopOutlined />}>
75-
<Link href="/menu1"><a>Menu 1</a></Link>
84+
<Item key="menu1" icon={<DesktopOutlined />}>
85+
<Link href="/menu1">
86+
<a>Menu 1</a>
87+
</Link>
88+
</Item>
89+
<Item key="menu2" icon={<DashboardOutlined />}>
90+
<Link href="/menu2">
91+
<a>Menu 2</a>
92+
</Link>
93+
</Item>
94+
<SubMenu key="menu3" icon={<SettingOutlined />} title="Menu 3">
95+
<Item key="submenu1">
96+
<Link href="/menu3/submenu1">
97+
<a>Submenu 1</a>
98+
</Link>
7699
</Item>
77-
<Item key="menu2" icon={<DashboardOutlined />}>
78-
<Link href="/menu2"><a>Menu 2</a></Link>
100+
<Item key="submenu2">
101+
<Link href="/menu3/submenu2">
102+
<a>Submenu 2</a>
103+
</Link>
79104
</Item>
80-
<SubMenu key="menu3" icon={<SettingOutlined />} title="Menu 3" >
81-
<Item key="submenu1">
82-
<Link href="/menu3/submenu1"><a>Submenu 1</a></Link>
83-
</Item>
84-
<Item key="submenu2">
85-
<Link href="/menu3/submenu2"><a>Submenu 2</a></Link>
86-
</Item>
87-
</SubMenu>
88-
</Menu>
89-
</Sider>
90-
<Layout style={{ padding: '0 16px 16px' }}>
91-
<Breadcrumb style={{ margin: '16px 0' }} itemRender={itemRender} routes={routes} />
92-
<Content
93-
className="site-layout-background"
94-
style={{
95-
padding: 16,
96-
minHeight: 280,
97-
backgroundColor: '#ffffff',
98-
}}
99-
>
100-
{this.props.children}
101-
</Content>
102-
</Layout>
105+
</SubMenu>
106+
</Menu>
107+
</Sider>
108+
<Layout style={{ padding: '0 16px 16px' }}>
109+
<Breadcrumb
110+
style={{ margin: '16px 0' }}
111+
itemRender={itemRender}
112+
routes={routes}
113+
/>
114+
<Content
115+
className="site-layout-background"
116+
style={{
117+
padding: 16,
118+
minHeight: 280,
119+
backgroundColor: '#ffffff',
120+
}}
121+
>
122+
{props.children}
123+
</Content>
103124
</Layout>
104-
)
105-
}
106-
}
125+
</Layout>
126+
);
127+
};
107128

108-
export default withRouter(AppLayout)
129+
export default withRouter(AppLayout);

‎next.config.js‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,30 @@
1-
const withLess = require('@zeit/next-less')
2-
const withImages = require('next-images')
3-
const withPlugins = require("next-compose-plugins")
4-
const lessToJS = require('less-vars-to-js')
5-
const fs = require('fs')
6-
const path = require('path')
1+
const withPlugins = require('next-compose-plugins');
2+
const withCss = require('@zeit/next-css');
73

8-
const themeVariables = lessToJS(
9-
fs.readFileSync(path.resolve(__dirname, './styles/antd-custom.less'), 'utf8')
10-
)
11-
12-
module.exports = withPlugins([withLess, withImages], {
13-
lessLoaderOptions: {
14-
javascriptEnabled: true,
15-
modifyVars: themeVariables,
16-
},
4+
const nextConfig = {
175
webpack: (config, { isServer }) => {
186
if (isServer) {
19-
const antStyles = /antd\/.*?\/style.*?/
20-
const origExternals = [...config.externals]
7+
const antStyles = /antd\/.*?\/style.*?/;
8+
const origExternals = [...config.externals];
219
config.externals = [
2210
(context, request, callback) => {
23-
if (request.match(antStyles)) return callback()
11+
if (request.match(antStyles)) return callback();
2412
if (typeof origExternals[0] === 'function') {
25-
origExternals[0](context, request, callback)
13+
origExternals[0](context, request, callback);
2614
} else {
27-
callback()
15+
callback();
2816
}
2917
},
3018
...(typeof origExternals[0] === 'function' ? [] : origExternals),
31-
]
19+
];
3220

3321
config.module.rules.unshift({
3422
test: antStyles,
3523
use: 'null-loader',
36-
})
24+
});
3725
}
38-
return config
26+
return config;
3927
},
40-
})
28+
};
29+
30+
module.exports = withPlugins([[withCss]], nextConfig);

‎package.json‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nextjs-ant-design-typescript",
3-
"version": "1.0.0",
3+
"version": "1.0.2",
44
"description": "nextjs with ant design by typescript",
55
"author": "gnokoheat",
66
"license": "MIT",
@@ -10,22 +10,23 @@
1010
"start": "next start"
1111
},
1212
"dependencies": {
13-
"@ant-design/icons": "^4.2.1",
14-
"@zeit/next-less": "^1.0.1",
15-
"antd": "^4.5.2",
16-
"babel-plugin-import": "^1.13.0",
17-
"less": "3.11.1",
18-
"less-vars-to-js": "1.3.0",
19-
"next": "latest",
20-
"next-compose-plugins": "^2.2.0",
21-
"next-images": "^1.4.0",
22-
"null-loader": "4.0.0",
23-
"react": "^16.13.1",
24-
"react-dom": "^16.13.1"
13+
"@ant-design/icons": "^4.6.2",
14+
"antd": "^4.14.1",
15+
"babel-plugin-import": "^1.13.3",
16+
"next": "^10.2.3",
17+
"next-compose-plugins": "^2.2.1",
18+
"next-images": "^1.7.0",
19+
"null-loader": "4.0.1",
20+
"react": "^17.0.2",
21+
"react-dom": "^17.0.2"
2522
},
2623
"devDependencies": {
24+
"@babel/core": "^7.13.10",
2725
"@types/node": "13.13.4",
2826
"@types/react": "^16.9.36",
29-
"typescript": "3.8.3"
27+
"@zeit/next-css": "^1.0.1",
28+
"babel-loader": "^8.2.2",
29+
"typescript": "3.8.3",
30+
"webpack": "^4.44.0"
3031
}
31-
}
32+
}

‎pages/_app.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react';
22
import Head from 'next/head';
33
import dynamic from 'next/dynamic';
4+
import type { AppProps } from 'next/app';
5+
6+
import 'antd/dist/antd.css';
47

58
const AppLayout = dynamic(() => import('../components/Layout'), { ssr: false });
69

7-
export default function MyApp({ Component, pageProps }) {
10+
export default function MyApp({ Component, pageProps }: AppProps) {
811
return (
912
<AppLayout>
1013
<Head>
@@ -14,4 +17,4 @@ export default function MyApp({ Component, pageProps }) {
1417
<Component {...pageProps} />
1518
</AppLayout>
1619
);
17-
}
20+
}

‎pages/_document.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
1-
import Document, { Head, Main, NextScript } from "next/document";
1+
import Document, { Html, Head, Main, NextScript } from 'next/document';
22

33
export default class MyDocument extends Document {
44
render() {
55
return (
6-
<html>
6+
<Html>
77
<Head>
8-
<meta charSet={process.env.CHARSET} />
9-
<link
10-
rel="shortcut icon"
11-
type="images/x-icon"
12-
href="/static/favicon.ico"
13-
/>
8+
<meta charSet="utf-8" />
9+
<link rel="shortcut icon" type="images/x-icon" href="/favicon.ico" />
1410
</Head>
1511
<body>
1612
<Main />
1713
<NextScript />
1814
</body>
19-
</html>
15+
</Html>
2016
);
2117
}
2218
}

0 commit comments

Comments
 (0)