From fa6eb036c6b7c772387bdeb7c959b645b609519a Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Mon, 14 Jun 2021 22:09:42 +0300
Subject: [PATCH 1/4] (example/with-ant-design-mobile): restore

---
 examples/with-ant-design-mobile/.babelrc      | 12 +++++++
 examples/with-ant-design-mobile/.gitignore    | 34 +++++++++++++++++++
 examples/with-ant-design-mobile/README.md     | 21 ++++++++++++
 .../components/Layout.js                      | 31 +++++++++++++++++
 .../with-ant-design-mobile/next.config.js     | 27 +++++++++++++++
 examples/with-ant-design-mobile/package.json  | 19 +++++++++++
 examples/with-ant-design-mobile/pages/_app.js | 27 +++++++++++++++
 .../with-ant-design-mobile/pages/about.js     | 13 +++++++
 .../with-ant-design-mobile/pages/index.js     | 13 +++++++
 9 files changed, 197 insertions(+)
 create mode 100644 examples/with-ant-design-mobile/.babelrc
 create mode 100644 examples/with-ant-design-mobile/.gitignore
 create mode 100644 examples/with-ant-design-mobile/README.md
 create mode 100644 examples/with-ant-design-mobile/components/Layout.js
 create mode 100644 examples/with-ant-design-mobile/next.config.js
 create mode 100644 examples/with-ant-design-mobile/package.json
 create mode 100644 examples/with-ant-design-mobile/pages/_app.js
 create mode 100644 examples/with-ant-design-mobile/pages/about.js
 create mode 100644 examples/with-ant-design-mobile/pages/index.js

diff --git a/examples/with-ant-design-mobile/.babelrc b/examples/with-ant-design-mobile/.babelrc
new file mode 100644
index 0000000000000..89444305b2cc6
--- /dev/null
+++ b/examples/with-ant-design-mobile/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd-mobile",
+        "style": "css"
+      }
+    ]
+  ]
+}
diff --git a/examples/with-ant-design-mobile/.gitignore b/examples/with-ant-design-mobile/.gitignore
new file mode 100644
index 0000000000000..1437c53f70bc2
--- /dev/null
+++ b/examples/with-ant-design-mobile/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/with-ant-design-mobile/README.md b/examples/with-ant-design-mobile/README.md
new file mode 100644
index 0000000000000..be8f9a0dff82b
--- /dev/null
+++ b/examples/with-ant-design-mobile/README.md
@@ -0,0 +1,21 @@
+# Ant Design Mobile example
+
+This example features how you use [antd-mobile](https://github.com/ant-design/ant-design-mobile) (Ant Design Mobile FrontEnd Framework) with Next.js.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-mobile&project-name=with-ant-design-mobile&repository-name=with-ant-design-mobile)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/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
+npx create-next-app --example with-ant-design-mobile with-ant-design-mobile-app
+# or
+yarn create next-app --example with-ant-design-mobile with-ant-design-mobile-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-ant-design-mobile/components/Layout.js b/examples/with-ant-design-mobile/components/Layout.js
new file mode 100644
index 0000000000000..b3748735612eb
--- /dev/null
+++ b/examples/with-ant-design-mobile/components/Layout.js
@@ -0,0 +1,31 @@
+import { NavBar, Icon, WingBlank } from 'antd-mobile'
+import { withRouter } from 'next/router'
+import Head from 'next/head'
+
+export default withRouter(({ router, children, title }) => (
+  <div>
+    <Head>
+      <title>{title}</title>
+    </Head>
+    <NavBar
+      mode="light"
+      icon={<Icon type="left" />}
+      onLeftClick={() => router.back()}
+    >
+      Ant Design Mobile example
+    </NavBar>
+    <h1>{title}</h1>
+    <style jsx>{`
+      h1 {
+        padding: 15px 0 9px 15px;
+        color: #000;
+        font-size: 16px;
+        line-height: 16px;
+        height: 16px;
+        font-weight: bolder;
+        position: relative;
+      }
+    `}</style>
+    <WingBlank>{children}</WingBlank>
+  </div>
+))
diff --git a/examples/with-ant-design-mobile/next.config.js b/examples/with-ant-design-mobile/next.config.js
new file mode 100644
index 0000000000000..f912af6e6d48d
--- /dev/null
+++ b/examples/with-ant-design-mobile/next.config.js
@@ -0,0 +1,27 @@
+const withCSS = require('@zeit/next-css')
+
+module.exports = withCSS({
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      const antStyles = /antd-mobile\/.*?\/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-mobile/package.json b/examples/with-ant-design-mobile/package.json
new file mode 100644
index 0000000000000..8d6d62eda9d02
--- /dev/null
+++ b/examples/with-ant-design-mobile/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "with-ant-design-mobile",
+  "version": "1.1.0",
+  "dependencies": {
+    "@zeit/next-css": "1.0.1",
+    "antd-mobile": "2.2.5",
+    "babel-plugin-import": "^1.2.1",
+    "next": "latest",
+    "null-loader": "2.0.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "license": "MIT"
+}
diff --git a/examples/with-ant-design-mobile/pages/_app.js b/examples/with-ant-design-mobile/pages/_app.js
new file mode 100644
index 0000000000000..d6a67f40f6ff8
--- /dev/null
+++ b/examples/with-ant-design-mobile/pages/_app.js
@@ -0,0 +1,27 @@
+import App from 'next/app'
+import Head from 'next/head'
+
+export default class CustomApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return (
+      <>
+        <Head>
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
+          />
+          <style global jsx>{`
+            html,
+            body {
+              font-family: 'Helvetica Neue', 'Hiragino Sans GB', Helvetica,
+                'Microsoft YaHei', Arial;
+              margin: 0;
+            }
+          `}</style>
+        </Head>
+        <Component {...pageProps} />
+      </>
+    )
+  }
+}
diff --git a/examples/with-ant-design-mobile/pages/about.js b/examples/with-ant-design-mobile/pages/about.js
new file mode 100644
index 0000000000000..768451b116389
--- /dev/null
+++ b/examples/with-ant-design-mobile/pages/about.js
@@ -0,0 +1,13 @@
+import Layout from '../components/Layout'
+import { Button } from 'antd-mobile'
+import Link from 'next/link'
+
+export default function About() {
+  return (
+    <Layout title="About">
+      <Link href="/">
+        <Button>Go to Index</Button>
+      </Link>
+    </Layout>
+  )
+}
diff --git a/examples/with-ant-design-mobile/pages/index.js b/examples/with-ant-design-mobile/pages/index.js
new file mode 100644
index 0000000000000..a762ed590cf0c
--- /dev/null
+++ b/examples/with-ant-design-mobile/pages/index.js
@@ -0,0 +1,13 @@
+import Layout from '../components/Layout'
+import { Button } from 'antd-mobile'
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <Layout title="Index">
+      <Link href="/about">
+        <Button>Go to About</Button>
+      </Link>
+    </Layout>
+  )
+}

From 72d6d7ddbce8f8e225c7e7e7f61bdf93dde760a4 Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Wed, 9 Jun 2021 14:10:48 +0300
Subject: [PATCH 2/4] (examples/with-ant-design-mobile): fix errors

- remove next/with-css
- exclude import css inside antd-mobile in any case
- fix regexp for null-loader
- import andt-mobile styles in _app.js
- move style from Head because it caused an error
---
 .../with-ant-design-mobile/next.config.js     | 43 +++++++++----------
 examples/with-ant-design-mobile/package.json  |  1 -
 examples/with-ant-design-mobile/pages/_app.js | 18 ++++----
 3 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/examples/with-ant-design-mobile/next.config.js b/examples/with-ant-design-mobile/next.config.js
index f912af6e6d48d..d82bf1e746c5f 100644
--- a/examples/with-ant-design-mobile/next.config.js
+++ b/examples/with-ant-design-mobile/next.config.js
@@ -1,27 +1,24 @@
-const withCSS = require('@zeit/next-css')
+module.exports = {
+  webpack: (config) => {
+    const antStyles = /antd-mobile\/.*?\/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),
+    ]
 
-module.exports = withCSS({
-  webpack: (config, { isServer }) => {
-    if (isServer) {
-      const antStyles = /antd-mobile\/.*?\/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',
+    })
 
-      config.module.rules.unshift({
-        test: antStyles,
-        use: 'null-loader',
-      })
-    }
     return config
   },
-})
+}
diff --git a/examples/with-ant-design-mobile/package.json b/examples/with-ant-design-mobile/package.json
index 8d6d62eda9d02..264b5be8cb9c0 100644
--- a/examples/with-ant-design-mobile/package.json
+++ b/examples/with-ant-design-mobile/package.json
@@ -2,7 +2,6 @@
   "name": "with-ant-design-mobile",
   "version": "1.1.0",
   "dependencies": {
-    "@zeit/next-css": "1.0.1",
     "antd-mobile": "2.2.5",
     "babel-plugin-import": "^1.2.1",
     "next": "latest",
diff --git a/examples/with-ant-design-mobile/pages/_app.js b/examples/with-ant-design-mobile/pages/_app.js
index d6a67f40f6ff8..7fa71e7d72cd1 100644
--- a/examples/with-ant-design-mobile/pages/_app.js
+++ b/examples/with-ant-design-mobile/pages/_app.js
@@ -1,6 +1,8 @@
 import App from 'next/app'
 import Head from 'next/head'
 
+import 'antd-mobile/dist/antd-mobile.css'
+
 export default class CustomApp extends App {
   render() {
     const { Component, pageProps } = this.props
@@ -11,16 +13,16 @@ export default class CustomApp extends App {
             name="viewport"
             content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
           />
-          <style global jsx>{`
-            html,
-            body {
-              font-family: 'Helvetica Neue', 'Hiragino Sans GB', Helvetica,
-                'Microsoft YaHei', Arial;
-              margin: 0;
-            }
-          `}</style>
         </Head>
         <Component {...pageProps} />
+        <style global jsx>{`
+          html,
+          body {
+            font-family: 'Helvetica Neue', 'Hiragino Sans GB', Helvetica,
+              'Microsoft YaHei', Arial;
+            margin: 0;
+          }
+        `}</style>
       </>
     )
   }

From ca3b6b4219c640cfbb1f986ae416e5f74a037c58 Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Wed, 9 Jun 2021 14:11:19 +0300
Subject: [PATCH 3/4] (example/with-ant-mobile-design-movile): use router.push
 without hoc

---
 .../components/Layout.js                      | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/examples/with-ant-design-mobile/components/Layout.js b/examples/with-ant-design-mobile/components/Layout.js
index b3748735612eb..47ac200a06800 100644
--- a/examples/with-ant-design-mobile/components/Layout.js
+++ b/examples/with-ant-design-mobile/components/Layout.js
@@ -1,31 +1,33 @@
 import { NavBar, Icon, WingBlank } from 'antd-mobile'
-import { withRouter } from 'next/router'
+import Router from 'next/router'
 import Head from 'next/head'
 
-export default withRouter(({ router, children, title }) => (
-  <div>
-    <Head>
-      <title>{title}</title>
-    </Head>
-    <NavBar
-      mode="light"
-      icon={<Icon type="left" />}
-      onLeftClick={() => router.back()}
-    >
-      Ant Design Mobile example
-    </NavBar>
-    <h1>{title}</h1>
-    <style jsx>{`
-      h1 {
-        padding: 15px 0 9px 15px;
-        color: #000;
-        font-size: 16px;
-        line-height: 16px;
-        height: 16px;
-        font-weight: bolder;
-        position: relative;
-      }
-    `}</style>
-    <WingBlank>{children}</WingBlank>
-  </div>
-))
+export default function Layout({ children, title }) {
+  return (
+    <div>
+      <Head>
+        <title>{title}</title>
+      </Head>
+      <NavBar
+        mode="light"
+        icon={<Icon type="left" />}
+        onLeftClick={() => Router.back()}
+      >
+        Ant Design Mobile example
+      </NavBar>
+      <h1>{title}</h1>
+      <style jsx>{`
+        h1 {
+          padding: 15px 0 9px 15px;
+          color: #000;
+          font-size: 16px;
+          line-height: 16px;
+          height: 16px;
+          font-weight: bolder;
+          position: relative;
+        }
+      `}</style>
+      <WingBlank>{children}</WingBlank>
+    </div>
+  )
+}

From db3e6ee10f96c08759234e7509091ce52c5b9cf4 Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Wed, 9 Jun 2021 14:50:45 +0300
Subject: [PATCH 4/4] (examples/with-ant-design-mobile): add stackblitz link in
 readme

---
 examples/with-ant-design-mobile/README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/examples/with-ant-design-mobile/README.md b/examples/with-ant-design-mobile/README.md
index be8f9a0dff82b..b6d1036b4af2e 100644
--- a/examples/with-ant-design-mobile/README.md
+++ b/examples/with-ant-design-mobile/README.md
@@ -2,6 +2,12 @@
 
 This example features how you use [antd-mobile](https://github.com/ant-design/ant-design-mobile) (Ant Design Mobile FrontEnd Framework) with Next.js.
 
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ant-design-mobile)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):