長(zhǎng)沙建站公司模板百度seo快速排名優(yōu)化軟件
環(huán)境說(shuō)明：next.js 官方文檔要求node版本在16.8以上。筆者使用的 node版本是16.20.1，不要使用16.13.0，筆者在使用 node16.13.0環(huán)境時(shí)創(chuàng)建的 react 項(xiàng)目點(diǎn)擊事件無(wú)效
next.js官網(wǎng)截圖
?
next.js 官網(wǎng)：https://nextjs.org/
react 官網(wǎng)：https://react.dev/
Ant Design 官網(wǎng)：https://ant.design/index-cn
目錄
1、創(chuàng)建項(xiàng)目
2、安裝 ant design
3、運(yùn)行測(cè)試
1、創(chuàng)建項(xiàng)目
在電腦存放項(xiàng)目的文件夾下打開(kāi)cmd窗口
執(zhí)行命令創(chuàng)建項(xiàng)目?npx create-next-app antd-demo
npx create-next-app antd-demo
第一次創(chuàng)建會(huì)先安裝 create-next-app
接下來(lái)會(huì)讓你選擇創(chuàng)建項(xiàng)目需要的內(nèi)容，這里可以根據(jù)自己的喜好決定，或者直接使用默認(rèn)
筆者選擇的是使用 ts 和 app router
?創(chuàng)建完成
2、安裝 ant design
進(jìn)入項(xiàng)目目錄 ，使用 vscode編輯器打開(kāi)項(xiàng)目
cd antd-democode ./
安裝 ant design react
npm install antd --savenpm install @ant-design/cssinjs --save
安裝完成后，在項(xiàng)目src目錄下新建?lib 目錄，在新建的?lib 目錄下新建??AntdRegistry.tsx
?AntdRegistry.tsx內(nèi)容
'use client';import React from 'react';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
import { useServerInsertedHTML } from 'next/navigation';const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {const cache = createCache();useServerInsertedHTML(() => (<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />));return <StyleProvider cache={cache}>{children}</StyleProvider>;
};export default StyledComponentsRegistry;vscode 截圖
修改src/app/layout.tsx 內(nèi)容為下面內(nèi)容
import React from 'react';
import { Inter } from 'next/font/google';
import StyledComponentsRegistry from '../lib/AntdRegistry';
import '@/app/globals.css';const inter = Inter({ subsets: ['latin'] });export const metadata = {title: 'Create Next App',description: 'Generated by create next app',
};const RootLayout = ({ children }: { children: React.ReactNode }) => (<html lang="en"><body className={inter.className}><StyledComponentsRegistry>{children}</StyledComponentsRegistry></body></html>
);export default RootLayout;vscode 截圖
添加主題配置?
在項(xiàng)目根目錄下新建 theme 文件夾，新建?themeConfig.ts
?themeConfig.ts 內(nèi)容
// theme/themeConfig.ts
import type { ThemeConfig } from 'antd';const theme: ThemeConfig = {token: {fontSize: 16,colorPrimary: '#52c41a',},
};export default theme;vscode 截圖
修改app下page.tsx 內(nèi)容為下面內(nèi)容
'use client';
import React from 'react';
import { Button, message, ConfigProvider } from 'antd';
import theme from './../../theme/themeConfig';export default function Home() {const [messageApi, contextHolder] = message.useMessage();const add = ()=>{messageApi.open({type: 'success',content: '宜將剩勇追窮寇，不可沽名學(xué)霸王',});}return (<ConfigProvider theme={theme}><div className="App">{contextHolder}<Button onClick={add} type="primary">Button</Button></div></ConfigProvider>)
}
?vscode 截圖
3、運(yùn)行測(cè)試
在項(xiàng)目根目錄下打開(kāi)cmd，也可使用vscode自帶的終端運(yùn)行命令，npm run dev
npm run dev?
瀏覽器訪問(wèn)：http://localhost:3000?
?
這個(gè)背景的條紋是next.js自帶的樣式，如果想去掉它，可以將 app/globals.css 的 body 標(biāo)簽的背景background 樣式去掉
body {margin: 0;color: rgb(var(--foreground-rgb));/* background: linear-gradient(to bottom,transparent,rgb(var(--background-end-rgb)))rgb(var(--background-start-rgb)); */
}運(yùn)行效果
?
至此完