2024-02-26 next.js学习使用(自用)

创建项目

npx create-next-app@latest

一些说明

next.js 和之前看过的 umi.js 一样，是以一个指定的文件夹为基础，根据该文件夹下的所有文件夹、文件来确定路由
当然一些自定义的 React组件 也可以在 src/ 下创建别的如 components 来保存
next.js 的路由文件夹是 app
需要注意的是，通过 命令 创建的 Next项目 默认识别 page.tsx 而不是 index.tsx
如图：

测试index.tsx
无法被识别
重新换成 page.tsx 就行了，这里不演示

路由

Next.js 的路由教程的感受如下：

1. 还是要维护路由文件，因为生成路由菜单是需要一个一个写的
2. 每个子路由下可以生成一个 layout.tsx 来单独写一个路由布局（也就是嵌套）
3. 提供的 <Link /> 组件和其他的框架路由组件大差不差，href={'/xxx'}用来替换 <a /> 标签实现跳转
4. 提供了一个 hook ，叫做 import { usePathname } from 'next/navigation'，通过 const pathname = usePathname() 可以得到当前路径，官方案例中通过判断 pathname === link.href结果实现 active状态

状态组件

意思就是需要用到 React状态 的组件，要在文件的第一行声明 "use client"否则会报错

总结

今天就到学这里，明天敲个布局，验证一下路由的第二点是否可行后继续学习官方文档
后续规划：

• 学习 Next 中用到的 Tailwind CSS
• 学习别人的 Next 开源项目（每日补充）：

1. 路由是怎么规划的
2. 整体文件是怎么规划的