当前位置： 首页 > news >正文

next.js 创建 react ant design ts 项目

news 2025/7/4 17:42:55

环境说明：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、运行测试

1、创建项目

在电脑存放项目的文件夹下打开cmd窗口

执行命令创建项目 npx create-next-app antd-demo

npx create-next-app antd-demo

第一次创建会先安装 create-next-app

接下来会让你选择创建项目需要的内容，这里可以根据自己的喜好决定，或者直接使用默认

笔者选择的是使用 ts 和 app router

 创建完成

2、安装 ant design

进入项目目录 ，使用 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(() => (<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />));return <StyleProvider cache={cache}>{children}</StyleProvider>;
};export default StyledComponentsRegistry;

vscode 截图

修改src/app/layout.tsx 内容为下面内容

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 截图

添加主题配置 

在项目根目录下新建 theme 文件夹，新建 themeConfig.ts

 themeConfig.ts 内容

// theme/themeConfig.ts
import type { ThemeConfig } from 'antd';const theme: ThemeConfig = {token: {fontSize: 16,colorPrimary: '#52c41a',},
};export default theme;

vscode 截图

修改app下page.tsx 内容为下面内容

'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: '宜将剩勇追穷寇，不可沽名学霸王',});}return (<ConfigProvider theme={theme}><div className="App">{contextHolder}<Button onClick={add} type="primary">Button</Button></div></ConfigProvider>)
}

 vscode 截图

3、运行测试

在项目根目录下打开cmd，也可使用vscode自带的终端运行命令，npm run dev

npm run dev

 

浏览器访问：http://localhost:3000 

 

这个背景的条纹是next.js自带的样式，如果想去掉它，可以将 app/globals.css 的 body 标签的背景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)); */
}

运行效果

 

至此完

相关文章：

next.js 创建 react ant design ts 项目

环境说明&#xff1a;next.js 官方文档要求node版本在16.8以上。笔者使用的 node版本是16.20.1&#xff0c;不要使用16.13.0&#xff0c;笔者在使用 node16.13.0环境时创建的 react 项目点击事件无效 next.js官网截图 next.js 官网&#xff1a;https://nextjs.org/ react 官网…...

编程日记 2023/8/21 11:06:49

无涯教程-Perl - use函数

描述 此函数将MODULE导出的所有功能(或仅LIST引用的功能)导入当前包的名称空间。有效等效于- BEGIN { require "Module.pm"; Module->import(); }也用于在当前脚本上强加编译器指令(编译指示),尽管从本质上讲它们只是模块。 请注意,use语句在编译时进行判断。在…...

编程日记 2023/8/21 11:05:48

（7）(7.6) 恢复任务回放

文章目录 前言 7.6.1 配置 7.6.2 工作原理 7.6.3 局限性 前言 本页介绍了什么是"任务继续时后退"功能以及如何使用该功能。 &#xff01;Note 从 4.1 版起&#xff0c;Plane、Copter 和 Rover 均可使用此功能。 在某些应用或运行区域&#xff0c;为了消除冲突&…...

编程日记 2023/8/21 11:04:46

spark yarn 开启动态资源分配

概念 不需要指定并发&#xff0c;只需要指定内存&#xff0c; 程序在运行后会动态调节并发数量&#xff0c;我们只需要设置一个上线即可 在spark 配置文件设置&#xff1a; spark.dynamicAllocation.enabled true spark.shuffle.service.enabled true 准备shuffer jar 将spar…...

编程日记 2023/8/21 11:03:45

Android学习之路(8) Activity

本节引言&#xff1a; 本节开始讲解Android的四大组件之一的Activity(活动)&#xff0c;先来看下官方对于Activity的介绍&#xff1a; 移动应用体验与桌面体验的不同之处在于&#xff0c;用户与应用的互动并不总是在同一位置开始&#xff0c;而是经常以不确定的方式开始。例如&…...

编程日记 2023/8/21 11:02:44

Linux的热拔插UDEV机制

文章目录 UDEV简介守护进程基本特点 守护进程和后台进程的区别开发守护进程结束 UDEV简介 udev是一个设备管理工具&#xff0c;udev以守护进程的形式运行&#xff0c;通过侦听内核发出来的uevent来管理/dev目录下的设备文件。 udev在用户空间运行&#xff0c;而不在内核空间 …...

编程日记 2023/8/21 11:01:43

Azure应用程序网关

文章目录 什么是应用程序网关实战演练创建虚拟网络创建虚拟机创建应用程序网关测试搭建结果 什么是应用程序网关 Azure应用程序网关是一种托管服务&#xff0c;用于提供安全、可缩放的 Web 应用程序前端点的应用程序传送控制和保护。它可以通过 SSL 终止、cookie 基于会话持久…...

编程日记 2023/8/21 11:00:42

免费开源服务器资源监控系统grafana+prometheus+node_exporter

有项目做测试的时候需要查询服务器资源利用情况&#xff0c;自己又没写相应的模块&#xff0c;此时就需要一套好用的资源监控系统&#xff0c;&#xff0c;咨询了运维人员给推荐了一套&#xff0c;装完后真的很好用。 就是grafanaprometheusnode_exporter&#xff08;linux&am…...

编程日记 2023/8/21 10:59:39

【文化课学习笔记】【化学】金属及其化合物

【化学】必修一&#xff1a;金属及其化合物 钠及其化合物 钠单质 物理性质 颜色&#xff1a;银白色&#xff0c;有金属光泽&#xff1b;密度&#xff1a; ρ H 2 O > ρ N a > ρ 煤油 \mathrm{\rho_{H_2O}>\rho_{Na}>\rho_{煤油}} ρH2​O​>ρNa​>ρ煤…...

编程日记 2023/8/21 10:58:38

Java面试题--设计模式

一、Java 中有几种设计模式&#xff1f; Java 中一般认为有 23 种设计模式 分为三大类&#xff1a; 1. 创建型模式 5 种 ① 工厂方法模式 ② 抽象工厂模式 ③ 单例模式 ④ 建造者模式 ⑤ 原型模式 2. 结构型模式 7 种 ① 适配器模式 ② 装饰器模式 ③ 代理模式 ④ 外观模式 …...

编程日记 2023/8/21 10:57:36

【VS Code插件开发】Webview面板（三）

&#x1f431; 个人主页&#xff1a;不叫猫先生&#xff0c;公众号&#xff1a;前端舵手 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域优质作者、阿里云专家博主&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4e2; 资料领取&#xff1a;前端…...

编程日记 2023/8/21 10:56:33

WebDriver API及对象识别技术

html页面的iframe的切换 定位到客户管理 新增客户 会无法定位到新增客户&#xff0c;因为在另外一个iframe框架之中。 iframe是html中的框架标签&#xff0c;表示文档中可以嵌入文档&#xff0c;或者说是浮动的框架。在selenium中iframe同样如此&#xff0c;如果驱动器对…...

编程日记 2023/8/21 10:55:32

计算机视觉之三维重建(一)(摄像机几何)

针孔摄像机 添加屏障&#xff1a; 使用针孔(o光圈针孔摄像机中心)&#xff0c;实现现实与成像一对一映射&#xff0c;减少模糊。其中针孔与像平面的距离为f(焦距)&#xff1b;虚拟像平面位于针孔与真实物体之间&#xff0c;与像平面互为倒立关系。位置映射&#xff1a;利用相似…...

编程日记 2023/8/21 10:54:28

机器学习算法-随机森林

目录 机器学习算法-随机森林 &#xff08;1&#xff09;构建单棵决策树。 决策树的构建过程 决策树的构建一般包含三个部分&#xff1a;特征选择、树的生成、剪枝。 机器学习算法-随机森林 机器学习算法-随机森林 随机森林是一种监督式学习算法&#xff0c;适用于分类和回…...

编程日记 2023/8/21 10:53:27

Springboot 实践（10）spring cloud 与consul配置运用之服务的注册与发现

前文讲解&#xff0c;完成了springboot、spring security、Oauth2.0的继承&#xff0c;实现了对系统资源的安全授权、允许获得授权的用户访问&#xff0c;也就是实现了单一系统的全部技术开发内容。 Springboot是微服务框架&#xff0c;单一系统只能完成指定系统的功能&#xf…...

编程日记 2023/8/21 10:52:26

解决方案：如何在 Amazon EMR Serverless 上执行纯 SQL 文件？

《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书由博主历时三年精心创作&#xff0c;现已通过知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详…...

编程日记 2023/8/21 10:51:23

pytorch lightning和pytorch版本对应

参见官方文档&#xff1a; https://lightning.ai/docs/pytorch/latest/versioning.html#compatibility-matrix 下图左一列&#xff08;lightning.pytorch&#xff09;安装命令&#xff1a;pip install lightning --use-feature2020-resolver 下图左一列&#xff08;pytorch_lig…...

编程日记 2023/8/21 10:50:21

Postman返回了一个html页面

问题记录 调用公司的测试环境接口&#xff0c;从浏览器控制台接口处cCopy as cURL(cmd)&#xff0c;获取完整的请求内容&#xff0c;然后导入postman发起请求 提测时发现返回一个html页面&#xff0c;明显是被请求在网管处被拦截了&#xff0c;网关返回的这个报错html页面 …...

编程日记 2023/8/21 10:49:19

centos服务器搭建宝塔面板

因为电脑无线网无法登录宝塔&#xff0c;也无法ssh到服务器&#xff0c;但是热点可以连接&#xff0c;网上没找到解决方法&#xff0c;重装下。 解决办法&#xff0c;先追路由&#xff0c;结果是被防火墙拦截了&#xff0c;解封以后还不行&#xff0c;重新查&#xff0c;联动的…...

编程日记 2023/8/21 10:48:18

【微信小程序】记一次自定义微信小程序组件的思路

最近来个需求&#xff0c;要求给小程序的 modal 增加个关闭按钮&#xff0c;上网一查发现原来 2018 年就有人给出解决方案了&#xff0c;于是总结下微信小程序自定义组件的思路&#xff1a;一句话&#xff0c;用 wxml css实现和原生组件类似的样式和效果&#xff0c;之后用 JS…...

编程日记 2023/8/21 10:47:16

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/6/25 16:32:53

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/7/4 8:02:49

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/6/16 21:35:46

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/6/24 3:59:56

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/6/28 13:23:48

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2025/7/4 3:36:51

图解JavaScript原型：原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

编程新知 2025/7/4 1:14:09

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

编程新知 2025/6/29 22:34:38

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2025/6/30 13:23:52