如何在next.js集成 ant-design库？

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(() => (
    <style
      id="antd"
      dangerouslySetInnerHTML={
   
   { __html: extractStyle(cache, true) }}
    />
  ))
  return <StyleProvider cache={cache}>{children}</StyleProvider>
}

export default StyledComponentsRegistry

layout.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 RootLayout

page.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>
        <Form
          layout="horizontal"
          size={'large'}
          labelCol={
   
   { span: 8 }}
          wrapperCol={
   
   { span: 8 }}
        >
          <Form.Item label="Input Number">
            <InputNumber
              min={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">
            <Select
              defaultValue="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 HomePage

themeConfig.ts

import type { ThemeConfig } from 'antd'

const theme: ThemeConfig = {
  token: {
    fontSize: 16,
    colorPrimary: '#52c41a',
  },
}

export default theme