Update dependencies (#9)

.babelrc

@@ -1,14 +1,12 @@
 {
-  "presets": [
-    "next/babel"
-  ],
+  "presets": ["next/babel"],
   "plugins": [
     [
       "import",
       {
         "libraryName": "antd",
-        "style": true
+        "style": "css"
       }
     ]
   ]
-}
+}

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

components/Layout.tsx

@@ -1,108 +1,129 @@
-import { Component } from 'react';
+import React, { useState, FunctionComponent } from 'react';
 import { Layout, Menu, Breadcrumb } from 'antd';
 import Link from 'next/link';
-import { withRouter } from 'next/router'
+import { withRouter, NextRouter } from 'next/router';
+import { WithRouterProps } from 'next/dist/client/with-router';
 
 import {
   DesktopOutlined,
   DashboardOutlined,
   SettingOutlined,
-} from '@ant-design/icons'
+} from '@ant-design/icons';
 
-import './Layout.less';
+import './Layout.css';
 
 const { SubMenu, Item } = Menu;
 const { Sider, Content } = Layout;
 
-interface Props {
-  router: any
+interface Router extends NextRouter {
+  path: string;
+  breadcrumbName: string;
 }
 
-function itemRender(route: any, params: any, routes: any, paths: string[]) {
+interface Props extends WithRouterProps {
+  router: Router;
+}
+
+function itemRender(route: Router) {
   return route.path === 'index' ? (
-    <Link href={'/'}><a>{route.breadcrumbName}</a></Link>
+    <Link href={'/'}>
+      <a>{route.breadcrumbName}</a>
+    </Link>
   ) : (
-      <span>{route.breadcrumbName}</span>
-    );
+    <span>{route.breadcrumbName}</span>
+  );
 }
 
 function routesMaker(pathsplit: string[]) {
   let routes = [
     {
       path: 'index',
       breadcrumbName: 'home',
-    }
+    },
   ];
   for (let v of pathsplit) {
     const pathInfo = {
       path: v,
       breadcrumbName: v,
-    }
-    if (v !== "") routes.push(pathInfo)
+    };
+    if (v !== '') routes.push(pathInfo);
   }
-  return routes
+  return routes;
 }
 
-class AppLayout extends Component<Props> {
-  state = {
-    collapsed: false,
-  };
+const AppLayout = (props: React.PropsWithChildren<Props>) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
-  onCollapse = (collapsed: boolean) => {
-    this.setState({ collapsed });
+  const onChangeIsCollapsed = (isCollapsed: boolean) => {
+    setIsCollapsed(isCollapsed);
   };
 
-  render() {
-    const pathname = this.props.router.pathname;
-    const pathsplit: string[] = pathname.split('/');
-    const routes = routesMaker(pathsplit);
-    return (
-      <Layout style={{ minHeight: '100vh' }}>
-        <Sider
-          collapsible collapsed={this.state.collapsed}
-          onCollapse={this.onCollapse}
+  const pathname = props.router.pathname;
+  const pathsplit: string[] = pathname.split('/');
+  const routes = routesMaker(pathsplit);
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider
+        collapsible
+        collapsed={isCollapsed}
+        onCollapse={onChangeIsCollapsed}
+      >
+        <Link href="/menu1">
+          <a>
+            <div className="App-logo" />
+          </a>
+        </Link>
+        <Menu
+          theme="dark"
+          defaultSelectedKeys={['/menu1']}
+          selectedKeys={[pathsplit.pop()]}
+          defaultOpenKeys={[pathsplit[1]]}
+          mode="inline"
         >
-          <Link href="/menu1">
-            <a><div className="App-logo" /></a>
-          </Link>
-          <Menu
-            theme="dark"
-            defaultSelectedKeys={['/menu1']}
-            selectedKeys={[pathsplit.pop()]}
-            defaultOpenKeys={[pathsplit[1]]}
-            mode="inline">
-            <Item key="menu1" icon={<DesktopOutlined />}>
-              <Link href="/menu1"><a>Menu 1</a></Link>
+          <Item key="menu1" icon={<DesktopOutlined />}>
+            <Link href="/menu1">
+              <a>Menu 1</a>
+            </Link>
+          </Item>
+          <Item key="menu2" icon={<DashboardOutlined />}>
+            <Link href="/menu2">
+              <a>Menu 2</a>
+            </Link>
+          </Item>
+          <SubMenu key="menu3" icon={<SettingOutlined />} title="Menu 3">
+            <Item key="submenu1">
+              <Link href="/menu3/submenu1">
+                <a>Submenu 1</a>
+              </Link>
             </Item>
-            <Item key="menu2" icon={<DashboardOutlined />}>
-              <Link href="/menu2"><a>Menu 2</a></Link>
+            <Item key="submenu2">
+              <Link href="/menu3/submenu2">
+                <a>Submenu 2</a>
+              </Link>
             </Item>
-            <SubMenu key="menu3" icon={<SettingOutlined />} title="Menu 3" >
-              <Item key="submenu1">
-                <Link href="/menu3/submenu1"><a>Submenu 1</a></Link>
-              </Item>
-              <Item key="submenu2">
-                <Link href="/menu3/submenu2"><a>Submenu 2</a></Link>
-              </Item>
-            </SubMenu>
-          </Menu>
-        </Sider>
-        <Layout style={{ padding: '0 16px 16px' }}>
-          <Breadcrumb style={{ margin: '16px 0' }} itemRender={itemRender} routes={routes} />
-          <Content
-            className="site-layout-background"
-            style={{
-              padding: 16,
-              minHeight: 280,
-              backgroundColor: '#ffffff',
-            }}
-          >
-            {this.props.children}
-          </Content>
-        </Layout>
+          </SubMenu>
+        </Menu>
+      </Sider>
+      <Layout style={{ padding: '0 16px 16px' }}>
+        <Breadcrumb
+          style={{ margin: '16px 0' }}
+          itemRender={itemRender}
+          routes={routes}
+        />
+        <Content
+          className="site-layout-background"
+          style={{
+            padding: 16,
+            minHeight: 280,
+            backgroundColor: '#ffffff',
+          }}
+        >
+          {props.children}
+        </Content>
       </Layout>
-    )
-  }
-}
+    </Layout>
+  );
+};
 
-export default withRouter(AppLayout)
+export default withRouter(AppLayout);

next.config.js

@@ -1,40 +1,30 @@
-const withLess = require('@zeit/next-less')
-const withImages = require('next-images')
-const withPlugins = require("next-compose-plugins")
-const lessToJS = require('less-vars-to-js')
-const fs = require('fs')
-const path = require('path')
+const withPlugins = require('next-compose-plugins');
+const withCss = require('@zeit/next-css');
 
-const themeVariables = lessToJS(
-  fs.readFileSync(path.resolve(__dirname, './styles/antd-custom.less'), 'utf8')
-)
-
-module.exports = withPlugins([withLess, withImages], {
-  lessLoaderOptions: {
-    javascriptEnabled: true,
-    modifyVars: themeVariables,
-  },
+const nextConfig = {
   webpack: (config, { isServer }) => {
     if (isServer) {
-      const antStyles = /antd\/.*?\/style.*?/
-      const origExternals = [...config.externals]
+      const antStyles = /antd\/.*?\/style.*?/;
+      const origExternals = [...config.externals];
       config.externals = [
         (context, request, callback) => {
-          if (request.match(antStyles)) return callback()
+          if (request.match(antStyles)) return callback();
           if (typeof origExternals[0] === 'function') {
-            origExternals[0](context, request, callback)
+            origExternals[0](context, request, callback);
           } else {
-            callback()
+            callback();
           }
         },
         ...(typeof origExternals[0] === 'function' ? [] : origExternals),
-      ]
+      ];
 
       config.module.rules.unshift({
         test: antStyles,
         use: 'null-loader',
-      })
+      });
     }
-    return config
+    return config;
   },
-})
+};
+
+module.exports = withPlugins([[withCss]], nextConfig);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-ant-design-typescript",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "nextjs with ant design by typescript",
   "author": "gnokoheat",
   "license": "MIT",
@@ -10,22 +10,23 @@
     "start": "next start"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.2.1",
-    "@zeit/next-less": "^1.0.1",
-    "antd": "^4.5.2",
-    "babel-plugin-import": "^1.13.0",
-    "less": "3.11.1",
-    "less-vars-to-js": "1.3.0",
-    "next": "latest",
-    "next-compose-plugins": "^2.2.0",
-    "next-images": "^1.4.0",
-    "null-loader": "4.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "@ant-design/icons": "^4.6.2",
+    "antd": "^4.14.1",
+    "babel-plugin-import": "^1.13.3",
+    "next": "^10.2.3",
+    "next-compose-plugins": "^2.2.1",
+    "next-images": "^1.7.0",
+    "null-loader": "4.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.10",
     "@types/node": "13.13.4",
     "@types/react": "^16.9.36",
-    "typescript": "3.8.3"
+    "@zeit/next-css": "^1.0.1",
+    "babel-loader": "^8.2.2",
+    "typescript": "3.8.3",
+    "webpack": "^4.44.0"
   }
-}
+}

pages/_app.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import Head from 'next/head';
 import dynamic from 'next/dynamic';
+import type { AppProps } from 'next/app';
+
+import 'antd/dist/antd.css';
 
 const AppLayout = dynamic(() => import('../components/Layout'), { ssr: false });
 
-export default function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <AppLayout>
       <Head>
@@ -14,4 +17,4 @@ export default function MyApp({ Component, pageProps }) {
       <Component {...pageProps} />
     </AppLayout>
   );
-}
+}

pages/_document.tsx

@@ -1,22 +1,18 @@
-import Document, { Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 export default class MyDocument extends Document {
   render() {
     return (
-      <html>
+      <Html>
         <Head>
-          <meta charSet={process.env.CHARSET} />
-          <link
-            rel="shortcut icon"
-            type="images/x-icon"
-            href="/static/favicon.ico"
-          />
+          <meta charSet="utf-8" />
+          <link rel="shortcut icon" type="images/x-icon" href="/favicon.ico" />
         </Head>
         <body>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     );
   }
 }