Add TypeScript to ant design example (#38470)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)


Co-authored-by: Balázs Orbán <[email protected]>

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.

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

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"
   }
 }

examples/with-ant-design/pages/_app.js → 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

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>
+  )
+}

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"]
+}