React简单入门 - [Next.js项目] - 页面跳转、AntD组件、二级目录等

须知

1Next.js 官网(英文)https://nextjs.org/
2Next.js 文档(中文)https://nextjscn.org/docs/
3Ant Design组件总览https://ant-design.antgroup.com/components/overview-cn
4tailwindcss类名大全 · 官网

https://www.tailwindcss.cn/docs/justify-content

5tailwindcss常用类名https://blog.csdn.net/delete_you/article/details/129965712
1参考项目 - Nextjs构建的电子商务应用程序 (Ecommerce-2023)
2参考项目 - 12个快速学会 NextJS 的 Github 仓库

react v19和antd诸多冲突,建议回退next.js v14 (配套react v18)

npx create-next-app@14.2.20

实现目标

0. 添加二级目录 - 项目打包后运行在https://xx.com/sub-folder/

1. 应用内页面跳转

2. 简单路由

3. 集成UI组件AntD

4. 在Next.js+AppRouter环境下使用AntD的子组件 (如Input下的TextArea) 

5. 穿透antd组件,修改css,“:global”的使用方法

6. 页面变量,点击事件,请求处理

7. 变量导致的报错"It only works in a Client Component but none of its parents are marked with “use client“"

8. AntD的按钮button绑定onClick后无限死循环 - 报错 - unhandledRejection: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

9. AntD顶部通知 滚动通知 警告实现 alert message notice

10. Next.js报错 SSR导致的问题 “Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used”

11. Next.js报错 react19的error “intercept-console-error.js:56 Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. error@intercept-console-error.js:56”

12. axios请求 / ajax请求

13. utils/fns实现

14. antd系列“card”卡片组件右上角副标题怎么自定义不同按钮 extra对象数组

15. React的显示隐藏控制 (v-if v-show)

16. nextjs build关闭eslint

17. React的复制功能 - 复制到剪切板 - copy

版本

  "dependencies": {

    "@ant-design/icons": "^5.5.2",

    "@ant-design/nextjs-registry": "^1.0.2",

    "antd": "^5.22.4",

    "axios": "^1.7.9",

    "next": "14.2.20",

    "react": "^18",

    "react-dom": "^18"

  },

  "devDependencies": {

    "@types/node": "^20",

    "@types/react": "^18",

    "@types/react-dom": "^18",

    "eslint": "^8",

    "eslint-config-next": "14.2.20",

    "postcss": "^8",

    "tailwindcss": "^3.4.1",

    "typescript": "^5"

  }

具体操作

0. 添加二级目录 - 项目打包后运行在https://xx.com/sub-folder/

参考 https://next.nodejs.cn/docs/app/api-reference/config/next-config-js/basePath

修改/next.config.ts,在nextConfig中写入 basePath: '/sub-folder'

1. 应用内页面跳转

import Link from 'next/link'
<Link href="/my">我的</Link>

应用外链接,可以用<a href="...">xx</a>
https://nextjscn.org/docs/app/building-your-application/routing/linking-and-navigating#link-组件

2. 简单路由

Next.js 基本路由跳转:

路由结构
https://nextjscn.org/docs/app/building-your-application/routing/defining-routes
例如:
应用首页 = /app/page.jsx 【后缀可以是jsx或者tsx】
个人首页 = /app/my/page.jsx 
个人订单 = /app/my/order/page.jsx 
那么,跳转方式就是
<Link href="/my">我的</Link>
<Link href="/my/order">我的订单</Link>

3. 集成UI组件AntD

参考 https://ant-design.antgroup.com/docs/react/use-with-next-cn

1. 安装antd组件
npm install antd --save2. 使用antd组件 - (修改/app/*/page.tsx 或jsx)
import { Button } from 'antd';
嵌套<Button type="primary">Button</Button>3. 特别注意!
如果使用了App Router,需要安装“nextjs-registry”:
npm install @ant-design/nextjs-registry --save
然后修改app/layout.tsx:
import { AntdRegistry } from '@ant-design/nextjs-registry';
将{children}使用此标签嵌套,例如:
<AntdRegistry>{children}</AntdRegistry>

AntD组件大全: 组件总览 - Ant Design

4. 在Next.js+AppRouter环境下使用AntD的子组件 (

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

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

相关文章

Python知识分享第25天-快速排序算法

快速排序算法 快速排序&#xff08;QuickSort&#xff09;是一种基于分治法的高效排序算法。它通过选择一个“基准”元素&#xff0c;将数组分成两个子数组&#xff0c;其中一个子数组的所有元素都比基准小&#xff0c;另一个子数组的所有元素都比基准大&#xff0c;然后递归地…

String【Redis对象篇】

&#x1f3c6; 作者简介&#xff1a;席万里 ⚡ 个人网站&#xff1a;https://dahua.bloggo.chat/ ✍️ 一名后端开发小趴菜&#xff0c;同时略懂Vue与React前端技术&#xff0c;也了解一点微信小程序开发。 &#x1f37b; 对计算机充满兴趣&#xff0c;愿意并且希望学习更多的技…

我们来学mysql -- MSI安装(安装篇)

主题 书接上文&#xff0c;在《探讨win安装方式》中官方推荐MSI要是把大厂的标准奉为圭臬&#xff0c;说啥认啥&#xff0c;他一翻脸&#xff0c;小丑不就是咱了再说了&#xff0c;都干到家门口了8.4版本官方文档&#xff0c;还不给他梭罗下 MSI 点击**.msi弹出MySQL Install…

【IC面试问题:UCIE PHY LSM AXI Cache】

IC面试问题&#xff1a;UCIE PHY LSM && AXI && Cache 1 UCIE PHY LSM有几种状态&#xff1f; 以及L1和L2这两种低功耗状态有什么区别&#xff1f;2 AXI的特性&#xff1f; 通道之间有依赖关系吗&#xff1f; master和slave的valid和ready关系&#xff1f; 写数…

html|本地实现浏览器m3u8播放器,告别网络视频卡顿

前言 网络上经常是以m3u8文件传输视频流的 &#xff0c;但是有时网络慢往往导致视频播放卡顿。于是我在想能不能先下载然后再播放呢&#xff1f;于是尝试下载然后实现本地播放m3u8视频。 正文 1.找到网络视频流的m3u8连接 一般在浏览器按F12就可以看到有请求视频流的连接。 …

交互开发---测量工具(适用VTK或OpenGL开发的应用程序)

简介&#xff1a; 经常使用RadiAnt DICOM Viewer来查看DICOM数据&#xff0c;该软件中的测量工具比较好用&#xff0c;就想着仿照其交互方式自己实现下。后采用VTK开发应用程序时&#xff0c;经常需要开发各种各样的测量工具&#xff0c;如果沿用VTK的widgets的思路&#xff0c…

uniapp -- 实现页面滚动触底加载数据

效果 首选,是在pages.json配置开启下拉刷新 {"path": "pages/my/document/officialDocument","style": {"navigationStyle":</

导游现场面试需要注意的问题

今天给大家带来一些导游现场面试需要注意的问题&#xff0c;大部分的城市导游考试已经考完了&#xff0c;但是还有一些城市的十二月份才考&#xff0c;有需要的朋友们赶紧来看&#xff0c;有备无患。 01、做好充足准备 认真准备做好每个景点的讲解介绍&#xff0c;不要抱有侥幸…

【ubuntu】将Chroma配置为LINUX服务

Chroma是一个轻量级向量数据库。既然是数据库&#xff0c;那么我希望它是能够长时间运行。最直接的方式是配置为service服务。 可惜官方没有去提供配置为服务的办法&#xff0c;而鄙人对docker又不是特别感冒。所以自己研究了下chroma配置为服务的方式。 系统&#xff1a;ubu…

PageHelper自定义Count查询及其优化

PageHelper自定义Count查询及其优化 文章目录 PageHelper自定义Count查询及其优化一&#xff1a;背景1.1、解决方法 二&#xff1a;利用反射判断请求参数是否有模糊查询2.1、分页不执行count2.2、思路2.3、代码示例 三&#xff1a;自定义COUNT查询SQL(只适用于单表)3.1、局限性…

TPAMI 2023:When Object Detection Meets Knowledge Distillation: A Survey

摘要 目标检测&#xff08;Object Detection&#xff0c;OD&#xff09;是计算机视觉中的一项关键任务&#xff0c;多年来涌现出了众多算法和模型。尽管当前 OD 模型的性能有所提升&#xff0c;但它们也变得更加复杂&#xff0c;由于参数规模庞大&#xff0c;在工业应用中并不…

ZED相机应用

下载SDK wget https://stereolabs.sfo2.cdn.digitaloceanspaces.com/zedsdk/3.6/ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run 安装 ./ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run skip_python 测试 cd /usr/local/zed/tools ls ZED_Calibration ZED_Depth_Viewer ZED_Diagnostic ZED_E…

农业园区气象站

农业园区气象站是一种专为农业生产和科研设计的气象监测设备&#xff0c;它集成了多种传感器和技术&#xff0c;用于实时、准确地监测和记录农业园区内的气象数据。以下是农业园区气象站的主要功能和用处&#xff1a; 一、主要功能 实时监测&#xff1a;农业园区气象站能够实时…

编译问题 fatal error: rpc/rpc.h: No such file or directory

在编译一些第三方软件的时候&#xff0c;会经常遇到一些文件识别不到的问题&#xff0c;这里整理下做个归总。 目前可能的原因有&#xff08;排序分先后&#xff09;&#xff1a; 文件不存在&#xff1b;文件存在但路径识别不了&#xff1b;…… 这次以常见的编译lmbench测试…

设计模式的艺术读书笔记

设计模式的艺术 面向对象设计原则概述单一职责原则开闭原则里氏代换原则依赖倒转原则接口隔离原则合成复用原则迪米特法则 创建的艺术创建型模式单例模式饿汉式单例与懒汉式单例的讨论通过静态内部类实现的更好办法 简单工厂模式工厂方法模式重载的工厂方法工厂方法的隐藏工厂方…

element-plus的el-tree的双向绑定

el-tree改造了下 可选可取消 有默认值 不包含父级id&#xff08;也可打开注释 包含父级id&#xff09; 默认展开 点击节点也可触发选择 节点内容自定义 <template><div class"absolute"><el-scrollbar class"pall"><div class"…

【iOS】OC高级编程 iOS多线程与内存管理阅读笔记——自动引用计数(三)

目录 ARC规则 概要 所有权修饰符 __strong修饰符 __weak修饰符 __unsafe_unretained修饰符 __autoreleasing修饰符 ARC规则 概要 “引用计数式内存管理”的本质部分在ARC中并没有改变&#xff0c;ARC只是自动地帮助我们处理“引用计数”的相关部分。 在编译单位上可以…

MySQL-DQL之数据多表操作

文章目录 一. 多表操作1. 表与表之间的关系2. 外键约束3. 创建外键约束表(一对多操作) 二. 多表查询1. 多表查询① 交叉连接查询(基本不会使用-得到的是两个表的乘积) [了解]&#xff08;不要记住&#xff09;② 交集运算&#xff1a;内连接查询(join)③ 差集运算&#xff1a;外…

《经验分享 · 软考系统分析师》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

宝塔面板Linux版本常用命令

宝塔面板&#xff08;BT Panel&#xff09;是一款简单易用的服务器管理工具&#xff0c;广泛应用于Linux服务器的管理。尽管宝塔提供了图形化界面&#xff0c;但在某些情况下&#xff0c;使用命令行操作更加高效。以下是宝塔面板Linux版本常用的命令&#xff0c;包括安装、管理…