ant-design介绍
Ant Design 是一个基于 React 的 UI 组件库，由蚂蚁金服前端团队开发和维护。它提供了丰富的组件和样式，使得开发者可以快速构建出美观、易用的用户界面。
Ant Design的设计理念是基于阿里巴巴的设计规范——Ant Design 设计语言，该设计语言以"一切皆对象"的概念为基础，强调组件的可组合性和可复用性。Ant Design 提供了一系列的组件，如按钮、输入框、表格、菜单等，这些组件都经过精心设计和开发，可以轻松地在项目中使用，并且具有良好的用户体验。
除了提供基础的组件，Ant Design 还提供了一些特定场景下的组件，如日期选择器、模态框、通知提示等，这些组件可以帮助开发者快速搭建出符合业务需求的界面。
Ant Design 也提供了完整的主题定制功能，开发者可以根据自己的需求定制主题样式，使得界面更加符合项目的风格。
Next.js中集成Ant Design库
需要按照以下步骤进行操作：
安装依赖：在项目的根目录中运行以下命令来安装Ant Design库和相关依赖：
npm install antd
创建一个_app.js文件：在项目的pages目录中创建一个_app.js文件，并添加以下代码：
import 'antd/dist/antd.css';
import '../styles/globals.css';function MyApp({ Component, pageProps }) {return <Component {...pageProps} />
}export default MyApp
导入需要的Ant Design组件：在任何页面中，可以直接导入需要的Ant Design组件来使用，例如：
import { Button } from 'antd';function HomePage() {return (<Button type="primary">Primary Button</Button>);
}export default HomePage;
配置babel：默认情况下，Next.js只支持CSS的模块化导入，而Ant Design库的样式是全局导入的。为了支持全局样式导入，我们需要配置babel。在项目的根目录中创建一个.babelrc文件，并添加以下代码：
{"presets": ["next/babel"],"plugins": [["import",{"libraryName": "antd","style": "css"}]]
}
重启应用：重新启动你的Next.js应用，可以看到Ant Design库已经成功集成到项目中。
通过以上步骤，你就可以在Next.js项目中成功集成Ant Design库并使用它的组件了。
官方建议操作方式：
目录结构：
主要文件内容设置：
package.json
{"private": true,"scripts": {"dev": "next","build": "next build","start": "next start"},"dependencies": {"@ant-design/cssinjs": "^1.16.1","@ant-design/icons": "^5.1.4","antd": "^5.0.0","next": "latest","react": "18.2.0","react-dom": "18.2.0"},"devDependencies": {"@types/node": "^20.4.5","@types/react": "^18.2.17","@types/react-dom": "^18.2.7","typescript": "^5.1.6"},"browser": {"fs": false,"path": false}
}AntRegistry.tsx
'use client'import React from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'
import type Entity from '@ant-design/cssinjs/es/Cache'interface StyledRegistryProps {children: React.ReactNode
}const StyledComponentsRegistry = ({ children }: StyledRegistryProps) => {const cache = React.useMemo<Entity>(() => createCache(), [])useServerInsertedHTML(() => (<styleid="antd"dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}/>))return <StyleProvider cache={cache}>{children}</StyleProvider>
}export default StyledComponentsRegistrylayout.tsx
import React from 'react'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import StyledComponentsRegistry from './AntdRegistry'
import './globals.css'const inter = Inter({ subsets: ['latin'] })export const metadata: Metadata = {title: 'Create Next App',description: 'Generated by create next app',
}interface RootLayoutProps {children: React.ReactNode
}function RootLayout({ children }: RootLayoutProps) {return (<html lang="en"><body className={inter.className}><StyledComponentsRegistry>{children}</StyledComponentsRegistry></body></html>)
}export default RootLayoutpage.tsx
'use client'import React from 'react'
import Link from 'next/link'
import { SmileFilled } from '@ant-design/icons'
import {Button,DatePicker,Form,InputNumber,Select,Slider,Switch,ConfigProvider,
} from 'antd'
import theme from './themeConfig'const HomePage = () => (<ConfigProvider theme={theme}><div style={{ padding: 100, height: '100vh' }}><div className="text-center mb-5"><Link href="#" className="logo mr-0"><SmileFilled style={{ fontSize: 48 }} /></Link><p className="mb-0 mt-3 text-disabled">Welcome to the world !</p></div><div><Formlayout="horizontal"size={'large'}labelCol={{ span: 8 }}wrapperCol={{ span: 8 }}><Form.Item label="Input Number"><InputNumbermin={1}max={10}style={{ width: 100 }}defaultValue={3}name="inputNumber"/></Form.Item><Form.Item label="Switch"><Switch defaultChecked /></Form.Item><Form.Item label="Slider"><Slider defaultValue={70} /></Form.Item><Form.Item label="Select"><SelectdefaultValue="lucy"style={{ width: 192 }}options={[{ value: 'jack', label: 'Jack' },{ value: 'lucy', label: 'Lucy' },{ value: 'Yiminghe', label: 'yiminghe' },{ value: 'lijianan', label: 'lijianan' },{ value: 'disabled', label: 'Disabled', disabled: true },]}/></Form.Item><Form.Item label="DatePicker"><DatePicker showTime /></Form.Item><Form.Item style={{ marginTop: 48 }} wrapperCol={{ offset: 8 }}><Button type="primary" htmlType="submit">OK</Button><Button style={{ marginLeft: 8 }}>Cancel</Button></Form.Item></Form></div></div></ConfigProvider>
)export default HomePagethemeConfig.ts
import type { ThemeConfig } from 'antd'const theme: ThemeConfig = {token: {fontSize: 16,colorPrimary: '#52c41a',},
}export default theme
![[C++]内存管理：串顺序存储的内存回收](http://pic.xiahunao.cn/yaotu/[C++]内存管理：串顺序存储的内存回收)
