环境说明:next.js 官方文档要求node版本在16.8以上。笔者使用的 node版本是16.20.1,不要使用16.13.0,笔者在使用 node16.13.0环境时创建的 react 项目点击事件无效
next.js官网截图
next.js 官网:https://nextjs.org/
react 官网:https://react.dev/
Ant Design 官网:https://ant.design/index-cn
目录
1、创建项目
2、安装 ant design
3、运行测试
在电脑存放项目的文件夹下打开cmd窗口
执行命令创建项目 npx create-next-app antd-demo
npx create-next-app antd-demo
第一次创建会先安装 create-next-app
接下来会让你选择创建项目需要的内容,这里可以根据自己的喜好决定,或者直接使用默认
笔者选择的是使用 ts 和 app router
创建完成
进入项目目录 ,使用 vscode编辑器打开项目
cd antd-demo
code ./
安装 ant design react
npm install antd --save
npm install @ant-design/cssinjs --save
安装完成后,在项目src目录下新建 lib 目录,在新建的 lib 目录下新建 AntdRegistry.tsx
AntdRegistry.tsx内容
'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(() => (