diff --git a/examples/with-antd-mobile/.babelrc b/examples/with-ant-design-mobile/.babelrc
similarity index 100%
rename from examples/with-antd-mobile/.babelrc
rename to examples/with-ant-design-mobile/.babelrc
diff --git a/examples/with-antd-mobile/README.md b/examples/with-ant-design-mobile/README.md
similarity index 78%
rename from examples/with-antd-mobile/README.md
rename to examples/with-ant-design-mobile/README.md
index 3675a2a1d148c18f9fd1aa21dcc2e2efaf0123f5..397659d39c30be77e9484be15c1ed06ccaef0678 100644
--- a/examples/with-antd-mobile/README.md
+++ b/examples/with-ant-design-mobile/README.md
@@ -6,7 +6,7 @@ This example features how you use [antd-mobile](https://github.com/ant-design/an
 
 Deploy the example using [Vercel](https://vercel.com):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-antd-mobile)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-mobile)
 
 ## How to use
 
@@ -15,9 +15,9 @@ Deploy the example using [Vercel](https://vercel.com):
 Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npm init next-app --example with-antd-mobile with-antd-mobile-app
+npm init next-app --example with-ant-design-mobile with-ant-design-mobile-app
 # or
-yarn create next-app --example with-antd-mobile with-antd-mobile-app
+yarn create next-app --example with-ant-design-mobile with-ant-design-mobile-app
 ```
 
 ### Download manually
@@ -25,8 +25,8 @@ yarn create next-app --example with-antd-mobile with-antd-mobile-app
 Download the example:
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-antd-mobile
-cd with-antd-mobile
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-ant-design-mobile
+cd with-ant-design-mobile
 ```
 
 Install it and run:
diff --git a/examples/with-antd-mobile/components/Layout.js b/examples/with-ant-design-mobile/components/Layout.js
similarity index 100%
rename from examples/with-antd-mobile/components/Layout.js
rename to examples/with-ant-design-mobile/components/Layout.js
diff --git a/examples/with-antd-mobile/next.config.js b/examples/with-ant-design-mobile/next.config.js
similarity index 100%
rename from examples/with-antd-mobile/next.config.js
rename to examples/with-ant-design-mobile/next.config.js
diff --git a/examples/with-antd-mobile/package.json b/examples/with-ant-design-mobile/package.json
similarity index 90%
rename from examples/with-antd-mobile/package.json
rename to examples/with-ant-design-mobile/package.json
index 8acc39354dd6ec07175a370bb090d6e99b5eda3c..c91b03cadceae0e694fd476d62f32254196f230a 100644
--- a/examples/with-antd-mobile/package.json
+++ b/examples/with-ant-design-mobile/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "with-antd-mobile",
+  "name": "with-ant-design-mobile",
   "version": "1.1.0",
   "dependencies": {
     "@zeit/next-css": "1.0.1",
diff --git a/examples/with-antd-mobile/pages/_app.js b/examples/with-ant-design-mobile/pages/_app.js
similarity index 100%
rename from examples/with-antd-mobile/pages/_app.js
rename to examples/with-ant-design-mobile/pages/_app.js
diff --git a/examples/with-antd-mobile/pages/about.js b/examples/with-ant-design-mobile/pages/about.js
similarity index 100%
rename from examples/with-antd-mobile/pages/about.js
rename to examples/with-ant-design-mobile/pages/about.js
diff --git a/examples/with-antd-mobile/pages/index.js b/examples/with-ant-design-mobile/pages/index.js
similarity index 100%
rename from examples/with-antd-mobile/pages/index.js
rename to examples/with-ant-design-mobile/pages/index.js
diff --git a/examples/with-ant-design-pro-layout-less/.babelrc b/examples/with-ant-design-pro-layout-less/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..b48316c795da21c0c486b7db1d39a873f163c571
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "style": true
+      }
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/examples/with-ant-design-pro-layout-less/README.md b/examples/with-ant-design-pro-layout-less/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..998fed432cb39286d99e3fb3c085a077623cdd70
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/README.md
@@ -0,0 +1,42 @@
+# Ant Design Pro Layout example
+
+This example shows how to use Next.js along with [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout) of React. This is intended to show the integration of this UI toolkit with the Framework.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-pro-layout-less)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npm init next-app --example with-ant-design-pro-layout-less with-ant-design-app
+# or
+yarn create next-app --example with-ant-design-pro-layout-less with-ant-design-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-ant-design-pro-layout-less
+cd with-ant-design-pro-layout-less
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-ant-design-pro-layout-less/assets/antd-custom.less b/examples/with-ant-design-pro-layout-less/assets/antd-custom.less
new file mode 100644
index 0000000000000000000000000000000000000000..27ee020e93d1ca41af4072b342926bd6893da2cd
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/assets/antd-custom.less
@@ -0,0 +1,4 @@
+@primary-color: #52c41a;
+
+@layout-header-height: 40px;
+@border-radius-base: 2px;
diff --git a/examples/with-ant-design-pro-layout-less/layouts/main.tsx b/examples/with-ant-design-pro-layout-less/layouts/main.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..68aeeb8464d734c07cb0ef62674082f82d357a28
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/layouts/main.tsx
@@ -0,0 +1,68 @@
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+
+import {
+  SmileOutlined,
+  SettingOutlined,
+  PlaySquareOutlined,
+} from '@ant-design/icons'
+
+import { Route, MenuDataItem } from '@ant-design/pro-layout/lib/typings'
+import { SiderMenuProps } from '@ant-design/pro-layout/lib/SiderMenu/SiderMenu'
+
+const ProLayout = dynamic(() => import('@ant-design/pro-layout'), {
+  ssr: false,
+})
+
+const ROUTES: Route = {
+  path: '/',
+  routes: [
+    {
+      path: '/',
+      name: 'Welcome',
+      icon: <SmileOutlined />,
+      routes: [
+        {
+          path: '/welcome',
+          name: 'Account Settings',
+          icon: <SettingOutlined />,
+        },
+      ],
+    },
+    {
+      path: '/example',
+      name: 'Example Page',
+      icon: <PlaySquareOutlined />,
+    },
+  ],
+}
+
+const menuHeaderRender = (
+  logoDom: React.ReactNode,
+  titleDom: React.ReactNode,
+  props: SiderMenuProps
+) => (
+  <Link href="/">
+    <a>
+      {logoDom}
+      {!props?.collapsed && titleDom}
+    </a>
+  </Link>
+)
+
+const menuItemRender = (options: MenuDataItem, element: React.ReactNode) => (
+  <Link href={options.path}>
+    <a>{element}</a>
+  </Link>
+)
+
+export default ({ children }) => (
+  <ProLayout
+    style={{ minHeight: '100vh' }}
+    route={ROUTES}
+    menuItemRender={menuItemRender}
+    menuHeaderRender={menuHeaderRender}
+  >
+    {children}
+  </ProLayout>
+)
diff --git a/examples/with-ant-design-pro-layout-less/next-env.d.ts b/examples/with-ant-design-pro-layout-less/next-env.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b7aa2c7727d88b33b62bee640d607d57cc79599
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/examples/with-ant-design-pro-layout-less/next.config.js b/examples/with-ant-design-pro-layout-less/next.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..44b449b5b26b94b51c5478b86e90efbe84f946d2
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/next.config.js
@@ -0,0 +1,40 @@
+/* eslint-disable */
+const withLess = require('@zeit/next-less')
+const lessToJS = require('less-vars-to-js')
+const fs = require('fs')
+const path = require('path')
+
+// Where your antd-custom.less file lives
+const themeVariables = lessToJS(
+  fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8')
+)
+
+module.exports = withLess({
+  lessLoaderOptions: {
+    javascriptEnabled: true,
+    modifyVars: themeVariables, // make your antd custom effective
+  },
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      const antStyles = /antd\/.*?\/style.*?/
+      const origExternals = [...config.externals]
+      config.externals = [
+        (context, request, callback) => {
+          if (request.match(antStyles)) return callback()
+          if (typeof origExternals[0] === 'function') {
+            origExternals[0](context, request, callback)
+          } else {
+            callback()
+          }
+        },
+        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
+      ]
+
+      config.module.rules.unshift({
+        test: antStyles,
+        use: 'null-loader',
+      })
+    }
+    return config
+  },
+})
diff --git a/examples/with-ant-design-pro-layout-less/package.json b/examples/with-ant-design-pro-layout-less/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..ffda06d70c3d4066c1ca822450c079bcc860fb15
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "with-ant-design-pro-layout-less",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@ant-design/icons": "4.1.0",
+    "@ant-design/pro-layout": "5.0.10",
+    "@zeit/next-less": "^1.0.1",
+    "antd": "^4.2.0",
+    "babel-plugin-import": "^1.13.0",
+    "esm": "3.2.25",
+    "less": "3.11.1",
+    "less-vars-to-js": "1.3.0",
+    "next": "latest",
+    "null-loader": "4.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "webpack-filter-warnings-plugin": "1.2.1"
+  },
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "13.13.4",
+    "typescript": "3.8.3"
+  }
+}
diff --git a/examples/with-ant-design-pro-layout-less/pages/example.tsx b/examples/with-ant-design-pro-layout-less/pages/example.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..85f5d48b38d629f48130edf96dceb1fa4d1d6822
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/pages/example.tsx
@@ -0,0 +1,3 @@
+import MainLayout from '../layouts/main'
+
+export default () => <MainLayout>Example page</MainLayout>
diff --git a/examples/with-ant-design-pro-layout-less/pages/index.tsx b/examples/with-ant-design-pro-layout-less/pages/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b02d16fe8471d92a09fb321d8ae065c97946ae2d
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/pages/index.tsx
@@ -0,0 +1,71 @@
+import {
+  Form,
+  Select,
+  InputNumber,
+  DatePicker,
+  Switch,
+  Slider,
+  Button,
+} from 'antd'
+
+import MainLayout from '../layouts/main'
+
+const FormItem = Form.Item
+const Option = Select.Option
+
+export default () => (
+  <MainLayout>
+    <Form layout="horizontal">
+      <FormItem
+        label="Input Number"
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 8 }}
+      >
+        <InputNumber
+          size="large"
+          min={1}
+          max={10}
+          style={{ width: 100 }}
+          defaultValue={3}
+          name="inputNumber"
+        />
+        <a href="#">Link</a>
+      </FormItem>
+
+      <FormItem label="Switch" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
+        <Switch defaultChecked />
+      </FormItem>
+
+      <FormItem label="Slider" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
+        <Slider defaultValue={70} />
+      </FormItem>
+
+      <FormItem label="Select" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
+        <Select size="large" defaultValue="lucy" style={{ width: 192 }}>
+          <Option value="jack">jack</Option>
+          <Option value="lucy">lucy</Option>
+          <Option value="disabled" disabled>
+            disabled
+          </Option>
+          <Option value="yiminghe">yiminghe</Option>
+        </Select>
+      </FormItem>
+
+      <FormItem
+        label="DatePicker"
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 8 }}
+      >
+        <DatePicker name="startDate" />
+      </FormItem>
+      <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
+        <Button size="large" type="primary" htmlType="submit">
+          OK
+        </Button>
+        <Button size="large" style={{ marginLeft: 8 }}>
+          Cancel
+        </Button>
+      </FormItem>
+    </Form>
+  </MainLayout>
+)
diff --git a/examples/with-ant-design-pro-layout-less/pages/welcome.tsx b/examples/with-ant-design-pro-layout-less/pages/welcome.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..197d8b3a351f103b7e60c948c12c119fabf563e2
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/pages/welcome.tsx
@@ -0,0 +1,3 @@
+import MainLayout from '../layouts/main'
+
+export default () => <MainLayout>Welcome!</MainLayout>
diff --git a/examples/with-ant-design-pro-layout-less/tsconfig.json b/examples/with-ant-design-pro-layout-less/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..c5d53d8983d19a1dcd6bacef3ddebd6767c8b6d2
--- /dev/null
+++ b/examples/with-ant-design-pro-layout-less/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}