next.js 创建 react ant design ts 项目

环境说明: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)); */
}

运行效果

 

至此完

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45799.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【UniApp开发小程序】商品详情展示+评论、评论展示、评论点赞+商品收藏【后端基于若依管理系统开发】

文章目录 界面效果界面实现工具js页面日期格式化 后端收藏ControllerServicemapper 评论ControllerServiceMapper 商品Controller 阅读Service 界面效果 【说明】 界面中商品的图片来源于闲鱼&#xff0c;若侵权请联系删除 【商品详情】 【评论】 界面实现 工具js 该工…

uniapp 微信小程序 绘制海报,长按图片分享,保存海报

uView UI 2.0 dcloud 插件市场地址 弹窗海报源码 <template><!-- 推荐商品弹窗 --><u-popup :show"haibaoShow" mode"center" round26rpx z-index10076 bgColortransparent safeAreaInsetTop close"goodsclose"><image …

WPF入门到精通:1.新建项目及项目结构

WPF&#xff08;Windows Presentation Foundation&#xff09;是一种用于创建 Windows 应用程序的技术&#xff0c;它可以通过 XAML&#xff08;Extensible Application Markup Language&#xff09;和 C# 或其他 .NET 语言来实现。WPF 提供了许多强大的 UI 控件和样式&#xf…

Azure虚拟网络对等互连

什么是Azure虚拟网络对等互联 Azure虚拟网络对等互联&#xff08;Azure Virtual Network peering&#xff09;是一种连接两个虚拟网络的方法&#xff0c;使得这两个虚拟网络能够在同一地理区域内进行通信。它通过私有IP地址在虚拟网络之间建立网络连接&#xff0c;不论是在同一…

星际争霸之小霸王之小蜜蜂(四)--事件监听-让小蜜蜂动起来

目录 前言 一、监听按键并作出判断 二、持续移动 三、左右移动 总结&#xff1a; 前言 今天开始正式操控我们的小蜜蜂了&#xff0c;之前学java的时候是有一个函数监听鼠标和键盘的操作&#xff0c;我们通过传过来不同的值进行判断&#xff0c;现在来看看python是否一样的实现…

SpringMVC之异常处理

SpringMVC之异常处理 异常分为编译时异常和运行时异常&#xff0c;编译时异常我们trycatch捕获&#xff0c;捕获后自行处理&#xff0c;而运行时异常是不可预期的&#xff0c;就需要规范编码来避免&#xff0c;在SpringMVC中&#xff0c;不管是编译异常还是运行时异常&#xff…

2023面试八股文 ——Java基础知识

Java基础知识 一.Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性&#xff1f;原理是什么Java语言有哪些特点什么是字节码&#xff1f;采用字节码的大好处是什么什么是Java程序的主类&#xff1f;应用程序和小程序的主类有何不同&#xff1f…

漏洞指北-VulFocus靶场专栏-初级01

漏洞指北-VulFocus靶场专栏-初级 初级001 &#x1f338;海洋CMS代码执行&#xff08;CNVD-2020-22721&#x1f338;step1&#xff1a;进入后台页面 账号密码&#xff1a;admin amdinstep2&#xff1a;点击系统&#xff0c;点击后台IP安全设置,关闭step3 启动burpsuite&#xff…

一百五十九、Kettle——Kettle9.2通过配置Hadoop clusters连接Hadoop3.1.3(踩坑亲测、附流程截图)

一、目的 由于kettle的任务需要用到Hadoop&#xff08;HDFS&#xff09;&#xff0c;所以就要连接Hadoop服务。 之前使用的是kettle9.3&#xff0c;由于在kettle新官网以及博客百度等渠道实在找不到shims的驱动包&#xff0c;无奈换成了kettle9.2&#xff0c;kettle9.2的安装…

设计模式之迭代器模式(Iterator)的C++实现

1、迭代器模式的提出 在软件开发过程中&#xff0c;操作的集合对象内部结构常常变化&#xff0c;在访问这些对象元素的同时&#xff0c;也要保证对象内部的封装性。迭代器模式提供了一种利用面向对象的遍历方法来遍历对象元素。迭代器模式通过抽象一个迭代器类&#xff0c;不同…

16----公式

本节我们来学习如何在markdown中打印公式 Markdown是一种轻量级标记语言&#xff0c;常用于撰写文档、博客和论坛帖子。虽然Markdown本身并不支持数学公式&#xff0c;但可以使用一些扩展来实现公式的显示。在支持公式扩展的 Markdown 解析器中&#xff0c;我们可以使用 Katex …

AE-卡通人物解说动画视频的制作

目录 1.导入卡通人物图片和音频文件 2.新建合成 3.在卡通人物图片上添加效果和表达式 4.在音频文件上添加效果和表达式 5.将卡通人物中的 CC Split2 中分割1 表达式链接到滑块中 6.卡通人物根据音频文件自动匹配口型。 AE制作卡通人物解说视频&#xff0c;卡通人物口型根据…

岩土工程安全监测隧道中使用振弦采集仪注意要点?

岩土工程安全监测隧道中使用振弦采集仪注意要点&#xff1f; 岩土工程的安全监测是非常重要的&#xff0c;它可以帮助工程师及时发现可能存在的问题&#xff0c;并及时解决&#xff0c;保障施工进度以及施工质量&#xff0c;保障工程的安全运行。其中&#xff0c;振弦采集仪是…

04_18内存反碎片技术,什么时候适合进行内存碎片整理

前言 内存碎片分为内部碎片和外部碎片&#xff0c;内部碎片指内存页里面的碎片&#xff0c;外部碎片指空闲的内存页分散&#xff0c;很难找到一组物理地址连续的空间内存页&#xff0c;无法满足超过一页的内存分配请求。 虚拟可移动区域 可移动区域&#xff08;ZONE_MOVABLE…

JVM性能分析-jstat工具观察gc频率

jstat jstat是java自带的工具&#xff0c;在bin目录下 用法 语法&#xff1a;jstat -<option> [-t] [-h<lines>] <vmid> [<interval> [<count>]] [kqkyyj-2 bin]$ jstat -help Usage: jstat -help|-optionsjstat -<option> [-t] [-h&l…

【Spring Boot 源码学习】自动装配流程源码解析(下)

自动装配流程源码解析&#xff08;下&#xff09; 引言往期内容主要内容4. 排除指定自动配置组件5. 过滤自动配置组件6. 触发自动配置事件 总结 引言 上篇博文&#xff0c;笔者带大家了解了自动装配流程中有关自动配置加载的流程&#xff1b; 本篇将介绍自动装配流程剩余的内…

vs2022配置opencv进行监控 c++

下载opencv文件 下载好的目录结构是 以上就是用到的文件和目录 在vs2022配置 最后&#xff1a;此处运行提示找不到 opencv_world480.dll 解决办法&#xff1a;直接从 复制到windows下

“SRP模型+”多技术融合在生态环境脆弱性评价模型构建、时空格局演变分析与RSEI 指数的生态质量评价

近年来&#xff0c;国内外学者在生态系统的敏感性、适应能力和潜在影响等方面开展了大量的生态脆弱性研究&#xff0c;他们普遍将生态脆弱性概念与农牧交错带、喀斯特地区、黄土高原区、流域、城市等相结合&#xff0c;评价不同类型研究区的生态脆弱特征&#xff0c;其研究内容…

vue + vue-office 实现多种文件(docx、excel、pdf)的预览

支持多种文件( docx、excel、pdf)预览的vue组件库&#xff0c;支持vue2/3。也支持非Vue框架的预览。 github: 《仓库地址》 演 示&#xff1a; 《演示效果》 功能特色 一站式&#xff1a;提供docx、pdf、excel多种文档的在线预览方案&#xff0c;有它就够了简单&#xff1a…

泰迪大数据挖掘建模平台功能特色介绍

大数据挖掘建模平台面相高校、企业级别用户快速进行数据处理的建模工具。 大数据挖掘建模平台介绍 平台底层算法基于R语言、Python、Spark等引擎&#xff0c;使用JAVA语言开发&#xff0c;采用 B/S 结构&#xff0c;用户无需下载客户端&#xff0c;可直接通过浏览器进行…