在 Next.js 中安装和使用Ant Design

2024-06-16

在Next.js应用中安装和使用Ant Design的步骤包括：安装Next.js和Ant Design，配置`ant-design-nextjs-registry`，在根布局中使用`AntdRegistry`，并在组件中导入和使用Ant Design组件。

步骤一：安装 Next.js

首先确保你已经安装了 Node.js v18.17 或更高版本。然后使用以下命令创建一个新的 Next.js 应用：

npx create-next-app@latest

步骤二：安装 Ant Design

使用你喜欢的包管理器安装 Ant Design：

# 如果使用 npm
npm install antd --save

# 如果使用 yarn
yarn add antd

# 如果使用 pnpm
pnpm install antd --save

步骤三：安装 ant-design-nextjs-registry

为了优化 Ant Design 组件在 Next.js 应用中的表现，安装 ant-design-nextjs-registry：

# 如果使用 npm
npm install @ant-design/nextjs-registry --save

# 如果使用 yarn
yarn add @ant-design/nextjs-registry

# 如果使用 pnpm
pnpm install @ant-design/nextjs-registry --save

步骤四：在根布局文件中配置 AntdRegistry

在你的根布局文件 layout.tsx 中导入 AntdRegistry 并包裹子组件：

import React from 'react';
import { AntdRegistry } from '@ant-design/nextjs-registry';

const RootLayout = ({ children }: React.PropsWithChildren) => (
  <html lang="en">
    <body>
      <AntdRegistry>{children}</AntdRegistry>
    </body>
  </html>
);

export default RootLayout;

步骤五：在组件中使用 Ant Design 组件

现在你可以在你的组件中导入并使用 Ant Design 组件：

import React from 'react';
import { Button, Typography } from 'antd';

const { Title } = Typography;

const HomePage = () => (
  <div className="App">
    <Title>Home Page</Title>
    <Button type="primary">Click Me !!</Button>
  </div>
);

export default HomePage;

步骤六：运行开发服务器

# 如果使用 npm
npm run dev

# 如果使用 yarn
yarn dev

# 如果使用 pnpm
pnpm dev

主题和定制

你可以使用 ConfigProvider 来配置 Ant Design 的全局设置和本地化。例如，设置为暗黑主题：

import React from 'react';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import { ConfigProvider, theme } from 'antd';
import type { ThemeConfig } from 'antd';

const config: ThemeConfig = {
  algorithm: theme.darkAlgorithm,
  token: {
    colorPrimary: '#1890ff',
  },
};

const RootLayout = ({ children }: React.PropsWithChildren) => (
  <html lang="en">
    <body>
      <AntdRegistry>
        <ConfigProvider theme={config}>
          {children}
        </ConfigProvider>
      </AntdRegistry>
    </body>
  </html>
);

export default RootLayout;