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

须知

1	Next.js 官网（英文）	https://nextjs.org/
2	Next.js 文档（中文）	https://nextjscn.org/docs/
3	Ant Design组件总览	https://ant-design.antgroup.com/components/overview-cn
4	tailwindcss类名大全 · 官网	https://www.tailwindcss.cn/docs/justify-content
5	tailwindcss常用类名	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. [e-mail]: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的子组件 （