vercel · akellbl4 · Jun 14, 2021 · Jun 9, 2021 · Jun 9, 2021 · Jun 9, 2021
diff --git a/examples/with-ant-design-mobile/.babelrc 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
@@ -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
@@ -0,0 +1,27 @@
+# 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.
+
+## 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):
+
+[![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
@@ -0,0 +1,33 @@
+import { NavBar, Icon, WingBlank } from 'antd-mobile'
+import Router from 'next/router'
+import Head from 'next/head'
+
+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>
+  )
+}
diff --git a/examples/with-ant-design-mobile/next.config.js b/examples/with-ant-design-mobile/next.config.js
@@ -0,0 +1,24 @@
+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),
+    ]
+
+    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
@@ -0,0 +1,18 @@
+{
+  "name": "with-ant-design-mobile",
+  "version": "1.1.0",
+  "dependencies": {
+    "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
@@ -0,0 +1,29 @@
+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
+    return (
+      <>
+        <Head>
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
+          />
+        </Head>
+        <Component {...pageProps} />
+        <style global jsx>{`
+          html,
+          body {
+            font-family: 'Helvetica Neue', 'Hiragino Sans GB', Helvetica,
+              'Microsoft YaHei', Arial;
+            margin: 0;
+          }
+        `}</style>
+      </>
+    )
+  }
+}
diff --git a/examples/with-ant-design-mobile/pages/about.js 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
@@ -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>
+  )
+}