自动摘要
正在生成中……
Codewithmosh 油管频道的next js课程
仅为开始的一集，全集需要去他的网站付费购买，但仍可以接触到一些基本概念，不太推荐学习
使用next.js版本为13.4
npx create-next-app@13.4
实际上上面的方法并不能创建13.4.x 版本的next.js项目，而是最新版本的，目前是14.1.3，如果指定小版本号，如13.4.20则报错
No matching version found for create-next-app@13.4.20.
我的环境如下 ：
verbose node v20.11.1
verbose npm v10.5.0
目前只能通过 ：
npx create-next-app@13
创建 13.5.x 的项目.
起步
运行开发服务器
npm run dev
# or
yarn dev
# or
pnpm dev
访问 http://localhost:3000
客户端导航(Client navigate)
使用 next/link组件,切换页面时不需要重新加载前面加载过的资源
import Link from 'next/link'
//...
<Link href="/users">Users</Link>
数据（REST API）缓存
// 不缓存后端数据
const res = await fetch('https://jsonplaceholder.typicode.com/users',{ cache:'no-store'})
// 缓存10秒，next.js会在后台开一个进程每10秒向后端发送请求
const res = await fetch('https://jsonplaceholder.typicode.com/users',{ next:{revalidate:10}})
注意:
上面的缓存写法仅对使用fetch时有效，如果使用第三方库如aio,则无效。
渲染方式
如果在上面的fetch时选择了 { next:{revalidate:10}}则为SSG，但不是在开发的时候，而是在构建的时候，也就是 执行 npm run build ,再执行 npm start 可以在 http://localhost:3000/看到效果。
如显示当前时间：
<h2>{new Date().toLocaleTimeString()}</h2>
生成后的页面刷新这个时间不会变，因为缓存时间为10秒，说明是提前生成的。
可以在构建的执行页中看到执行结果：
完全SSG：
○ (Static) prerendered as static content
部分动态生成
○ (Static) prerendered as static content
λ (Dynamic) server-rendered on demand using Node.js
Net Ninja Shadcn UI 速成课程
这个课程讲解很好，我因为在v0做界面时看到了shadcn ui，为了学习Shadcn ui找的课程, 它的 github分支做得很好，可以很清晰看到每次lesson都更新了哪些内容，比如 这是 lesson-2 的commit，可以看到相对前面的课程修改了哪些内容。
这里有一个学习的方法，只看这些代码的差异，不明白的地方再到视频中的讲解来看。
shadcn 使用HSL来表示颜色，这里有一篇关于HSL的介绍文章
如在global.css中有很多css颜色变量。
可以在线订制颜色主题 。
这位老哥另外一门next.js 13的课程