如何在next

  }
]

]
}

重启应用：重新启动你的Next.js应用，可以看到Ant Design库已经成功集成到项目中。


通过以上步骤，你就可以在Next.js项目中成功集成Ant Design库并使用它的组件了。


## 官方建议操作方式：


### 目录结构：


![](https://img-blog.csdnimg.cn/direct/d185c903608c4abab59d8d6292e2d864.png)


### 主要文件内容设置：


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(() => createCache(), [])
useServerInsertedHTML(() => (
<style
id=“antd”
dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}
/>
))
return {children}
}

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 (


{children}


)
}

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 = () => (

<div style={{ padding: 100, height: ‘100vh’ }}>

<SmileFilled style={{ fontSize: 48 }} />

Welcome to the world !

<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”>

</Form.Item>
<Form.Item label=“Slider”>

</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”>

</Form.Item>
<Form.Item style={{ marginTop: 48 }} wrapperCol={{ offset: 8 }}>

OK

<Button style={{ marginLeft: 8 }}>Cancel
</Form.Item>

)

export default HomePage

themeConfig.ts

import type { ThemeConfig } from ‘antd’

const theme: ThemeConfig = {
token: {