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

本文链接：https://blog.csdn.net/qq285744011/article/details/144426470

须知

1	Next.js 官网（英文）	Next.js by Vercel - The React Framework
2	Next.js 文档（中文）	简介 \| Next.js 中文文档
3	React官网（中文）	https://react.docschina.org/learn
4	Ant Design组件总览	组件总览 - Ant Design
5	tailwindcss类名大全 · 官网·英	Justify Content - TailwindCSS中文文档 \| TailwindCSS中文网
6	tailwindcss类名大全 · 官网·中	https://tailwind.nodejs.cn/docs/flex
7	tailwindcss常用类名	TailwindCSS常用类大全_tailwindcss border-CSDN博客
8	react菜鸟教程	React 列表 & Keys \| 菜鸟教程

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

18. React自定义组件onClick事件无效的解决办法

19. React-antd组件库 - 让Menu子菜单项水平排列 - 下拉菜单排序 - 自定义子菜单展示方式

20. react antd修改modal模态框的contentBg背景色 - 自定义model的background-color - antd的主题变量（Design Token）使用方法

21. react循环数组输出dom - for - foreach - loop - map

22. 函数式组件启用onClick事件 - react不能给组件绑定点击事件吗？ - 报错Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

23. nextjs react 出现报错 Warning: Extra attributes from the server: mpa-version,mpa-extension-id - at body at html ...

24. tsx - typescript引起的打包报错：Type error: Property 'xx' does not exist on type 'never'.

25. React+Andt输入框失焦 - 每次输入都会失焦 - 重新渲染input失焦 - 使用input/textarea修改动态数组的属性时输入一次失焦一次 - 循环数组input在onChange+setState后失焦 - focus

版本

"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/

参考 basePath | Next.js 中文网

修改/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 基本路由跳转：

路由结构
定义路由 | Next.js 中文文档
例如：
应用首页 = /app/page.jsx 【后缀可以是jsx或者tsx】
个人首页 = /app/my/page.jsx
个人订单 = /app/m