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

next.js 创建 react ant design ts 项目

news 2025/11/1 11:42:25

环境说明：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

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/10/29 21:50:28

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/10/27 13:40:36

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/10/27 21:06:53

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2025/11/1 0:37:01

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2025/10/28 15:01:39

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2025/10/22 2:08:09

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/10/3 0:17:23

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

编程新知 2025/10/29 9:33:26

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/10/17 8:25:51