diff --git a/examples/with-ant-design/components/DatePicker.js b/examples/with-ant-design/components/DatePicker.js
deleted file mode 100644
index 40353328c64ae..0000000000000
--- a/examples/with-ant-design/components/DatePicker.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * This example previously used antd-dayjs-webpack-plugin
- * (https://github.com/ant-design/antd-dayjs-webpack-plugin) to attempt to
- * replace Moment.js with Day.js, but it would crash the page when the user
- * clicked on the DatePicker. Using this custom component (following Ant Design
- * guidelines at https://ant.design/docs/react/replace-moment) instead of the
- * webpack plugin fixes that bug.
- */
-import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'
-import generatePicker from 'antd/lib/date-picker/generatePicker'
-
-const DatePicker = generatePicker(dayjsGenerateConfig)
-
-export default DatePicker
diff --git a/examples/with-ant-design/next-env.d.ts b/examples/with-ant-design/next-env.d.ts
new file mode 100644
index 0000000000000..4f11a03dc6cc3
--- /dev/null
+++ b/examples/with-ant-design/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/with-ant-design/next.config.js b/examples/with-ant-design/next.config.js
index 5e149d4f542d9..ae887958d3c9c 100644
--- a/examples/with-ant-design/next.config.js
+++ b/examples/with-ant-design/next.config.js
@@ -1,5 +1,7 @@
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true',
-})
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
 
-module.exports = withBundleAnalyzer()
+module.exports = nextConfig
diff --git a/examples/with-ant-design/package.json b/examples/with-ant-design/package.json
index 1bd3283d88d89..2284d9e6d63ae 100644
--- a/examples/with-ant-design/package.json
+++ b/examples/with-ant-design/package.json
@@ -3,26 +3,23 @@
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start",
-    "analyze": "cross-env ANALYZE=true next build"
+    "start": "next start"
   },
   "dependencies": {
-    "@ant-design/icons": "4.2.1",
-    "@next/bundle-analyzer": "^9.1.4",
-    "antd": "4.3.0",
-    "cross-env": "^7.0.2",
-    "dayjs": "1.8.28",
-    "esm": "^3.2.25",
+    "@ant-design/icons": "^4.7.0",
+    "antd": "^4.21.5",
     "next": "latest",
-    "postcss-preset-env": "^6.7.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "browser": {
     "fs": false,
     "path": false
   },
   "devDependencies": {
-    "cross-env": "^7.0.3"
+    "@types/node": "18.0.3",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "typescript": "4.7.4"
   }
 }
diff --git a/examples/with-ant-design/pages/_app.js b/examples/with-ant-design/pages/_app.tsx
similarity index 52%
rename from examples/with-ant-design/pages/_app.js
rename to examples/with-ant-design/pages/_app.tsx
index 5dc47adb7e922..32a1999c35191 100644
--- a/examples/with-ant-design/pages/_app.js
+++ b/examples/with-ant-design/pages/_app.tsx
@@ -1,7 +1,10 @@
+import type { AppProps } from 'next/app'
 import 'antd/dist/antd.css'
 import '../styles/vars.css'
 import '../styles/global.css'
 
-export default function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />
 }
+
+export default MyApp
diff --git a/examples/with-ant-design/pages/index.js b/examples/with-ant-design/pages/index.js
deleted file mode 100644
index 215b3674e3f21..0000000000000
--- a/examples/with-ant-design/pages/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Form, Select, InputNumber, Switch, Slider, Button } from 'antd'
-
-// Custom DatePicker that uses Day.js instead of Moment.js
-import DatePicker from '../components/DatePicker'
-
-import { SmileFilled } from '@ant-design/icons'
-
-import Link from 'next/link'
-
-const FormItem = Form.Item
-const Option = Select.Option
-
-const content = {
-  marginTop: '100px',
-}
-
-export default function Home() {
-  return (
-    <div style={content}>
-      <div className="text-center mb-5">
-        <Link href="#">
-          <a className="logo mr-0">
-            <SmileFilled size={48} strokeWidth={1} />
-          </a>
-        </Link>
-
-        <p className="mb-0 mt-3 text-disabled">Welcome to the world !</p>
-      </div>
-      <div>
-        <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"
-            />
-          </FormItem>
-
-          <FormItem
-            label="Switch"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 8 }}
-          >
-            <Switch defaultChecked name="switch" />
-          </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 }}
-              name="select"
-            >
-              <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>
-      </div>
-    </div>
-  )
-}
diff --git a/examples/with-ant-design/pages/index.tsx b/examples/with-ant-design/pages/index.tsx
new file mode 100644
index 0000000000000..9e4c6ecc04f3b
--- /dev/null
+++ b/examples/with-ant-design/pages/index.tsx
@@ -0,0 +1,89 @@
+import {
+  Button,
+  DatePicker,
+  Form,
+  InputNumber,
+  Select,
+  Slider,
+  Switch,
+} from 'antd'
+import type { DatePickerProps } from 'antd'
+import { SmileFilled } from '@ant-design/icons'
+import Link from 'next/link'
+
+const FormItem = Form.Item
+const Option = Select.Option
+
+const content = {
+  marginTop: '100px',
+}
+
+export default function Home() {
+  const onDatePickerChange: DatePickerProps['onChange'] = (
+    date,
+    dateString
+  ) => {
+    console.log(date, dateString)
+  }
+
+  return (
+    <div style={content}>
+      <div className="text-center mb-5">
+        <Link href="#">
+          <a className="logo mr-0">
+            <SmileFilled style={{ fontSize: 48 }} />
+          </a>
+        </Link>
+
+        <p className="mb-0 mt-3 text-disabled">Welcome to the world !</p>
+      </div>
+      <div>
+        <Form
+          layout="horizontal"
+          size={'large'}
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <FormItem label="Input Number">
+            <InputNumber
+              min={1}
+              max={10}
+              style={{ width: 100 }}
+              defaultValue={3}
+              name="inputNumber"
+            />
+          </FormItem>
+
+          <FormItem label="Switch">
+            <Switch defaultChecked />
+          </FormItem>
+
+          <FormItem label="Slider">
+            <Slider defaultValue={70} />
+          </FormItem>
+
+          <FormItem label="Select">
+            <Select 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">
+            <DatePicker showTime onChange={onDatePickerChange} />
+          </FormItem>
+          <FormItem style={{ marginTop: 48 }} wrapperCol={{ offset: 8 }}>
+            <Button type="primary" htmlType="submit">
+              OK
+            </Button>
+            <Button style={{ marginLeft: 8 }}>Cancel</Button>
+          </FormItem>
+        </Form>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/with-ant-design/tsconfig.json b/examples/with-ant-design/tsconfig.json
new file mode 100644
index 0000000000000..99710e857874f
--- /dev/null
+++ b/examples/with-ant-design/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}