React简单入门 - [Next.js项目] - 页面跳转、AntD组件、二级目录等
须知
| 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.
版本
"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>