冴羽的博客

关于冴羽

• 博客：https://yayujs.com/
• 社群：“低调务实优秀中国好青年”前端社群
• 成长：社群茶话会、我的茶话会、微信读书
• 翻译：TypeScript 中文文档、Svelte 中文文档、Solid 中文文档
• 小册：《Next.js 开发指南》、《Svelte 开发指南》、《Astro 开发指南》
• 专栏：掘金、思否、语雀、公众号：冴羽（#yayujs）
• 星球：冴羽·前端开发者的破局之路，8 大专栏，10 年经验总结、100 篇深度长文，70W 字原创内容

公众号

<table> <tr> <th>冴羽</th> <th>冴羽 AI</th> </tr> <tr> <td align="center"><img width="30%" src="https://github.com/user-attachments/assets/000b8b3c-a617-4982-8f3d-abdf31b52b88" /></td> <td align="center"><img width="30%" src="https://github.com/user-attachments/assets/1b4b734c-e1bb-44b2-9910-79295a40fb01" /></td> </tr> </table>

知识星球：冴羽 · 前端开发者的破局之路

<table> <tr> <td align="center"> <img width="30%" src="https://github.com/user-attachments/assets/31fe0716-5bc7-47b4-9bea-0c1a369676fc" /> </td> <td align="center"> 8 大专栏、10 年经验总结、100 篇深度长文、总计 70W 字的原创内容 <br/> 几乎篇篇都是 6000 字以上的深度长文，加入即看 <br/> 送你一张优惠券，最低价加入星球 <br/> 不用纠结，星球三天无理由退款，没有帮助就退 </td> </tr> </table>

最新单篇

1. 10 个被严重低估的 JS 特性，直接少写 500 行代码
2. JavaScript 异步循环踩坑指南
3. 为什么在 JavaScript 中 NaN !== NaN？背后藏着 40 年的技术故事
4. 从 useState 到 URLState：为什么大佬们都在删状态管理代码？
5. 涨见识了，Error.cause 让 JavaScript 错误调试更轻松
6. 前端性能革命：200 行 JavaScript 代码实现 Streaming JSON
7. 2025 年最火的前端项目出炉，No.1 易主！
8. CSS 新特性！瀑布流布局的终极解决方案
9. JavaScript Date 语法要过时了！以后用这个替代！]
10. 2026 年 Web 前端开发的 8 个趋势！
11. 2026 年前端必须掌握的 4 个 CSS 新特性！
12. 2025 年 HTML 年度调查报告公布！好多不知道！
13. 2025 年 HTML 年度调查报告亮点速览！
14. 现代 CSS 颜色使用指南
15. 现代 CSS 颜色使用指南进阶篇
16. 20 周年之际！jQuery 4.0 正式发布！轻装上阵
17. 2025 年 CSS 年度调查报告亮点速览
18. 回首 jQuery 20 年：从辉煌到没落
19. 微软发布了 2026 年 AI 发展的 7 个趋势
20. 1 分钟 CSS 小技巧让你的 UI 看起来贵 10 倍
21. Vercel 团队 10 年 React 性能优化经验：10 大核心策略让性能提升 300%
22. Flexbox水太深，你把持不住
23. 2026 年的 Node.js 已经不是那个你认识的 Node.js 了
24. 我没想到 CSS if 函数这么强
25. 2026 年 JavaScript 框架 3 大趋势
26. 100s 带你了解 Bun 为什么这么火
27. 写给自学前端同学的编程法则
28. 2026 年前端开发工程师应该学什么？
29. 来自顶级大佬 TypeScript 之父的 7 个启示
30. AI 时代前端开发不变的 3 个原则
31. 资深前端都在用的 9 个调试偏方
32. 前端开发者的迷茫，其实是认知跃迁的前夜
33. 在浏览器控制台调试的 6 个秘密技巧
34. 先收藏！3000 个网站设计案例供你参考！
35. 等等，浏览器竟然有这功能？！10 个被低估的 Web API

Nano Banana Pro 系列

1. 6 个白嫖 Nano Banana Pro 的网站
2. 一次找齐！1000 个 Nano Banana Pro 提示词
3. Nano Banana Pro 很强，但你要学会写提示词才能为所欲为
4. 10 个 Nano Banana Pro 专业级生图技巧
5. 疯传的 Nano Banana Pro 像素级拆解提示词
6. 不知道怎么写 Nano Banana Pro 提示词？分享你一个结构化示例，复刻任意图片
7. 太好看了！3 个动漫变真人 Nano Banana Pro 提示词
8. Nano Banana Pro 零基础快速上手

Astro 系列

第 3 本小册（21 篇）

1. 《Astro 实战指南》

Svelte 系列

翻译

1. 翻译并搭建了中文站点：Svelte 中文文档

第 2 本小册（44 篇）

1. 《Svelte 开发指南》

Solid.js 系列

翻译

1. 翻译并搭建了中文站点： Solid.js 中文文档

专栏

1. 《这个比 React 更 react 的框架 —— Solid.js 最新中文文档来了！》

Next.js 系列

第 1 本小册（82 篇）

1. 《Next.js 开发指南》

专栏

1. 理解 Next.js 的 CSR、SSR、SSG、ISR、RSC、SPA、Streaming SSR 等概念
2. Next.js 写 Server Actions 的利器 —— next-safe-action
3. Next.js Server Actions 如何进行错误处理？
4. Next.js 写什么 useState，放 URL 里！
5. 分享一个好用的 AI 聚合平台，快速接入国内外主流 AI 模型
6. Next.js 如何实现导航时的过渡动画？（使用 Framer Motion）
7. Next.js 如何处理表单？（TS + Tailwind CSS + Shadcn UI + RHF + Zod + useOptimistic）
8. Next.js 项目写 Tailwind CSS 基本都会遇到的两个问题
9. React 19 新 hook —— useActionState 与 Next.js Server Actions 绝佳搭配
10. Next.js 极简实现 Authentication
11. Next.js 实现下载 m3u8 视频
12. Next.js 项目接入 AI 的利器 —— Vercel AI SDK
13. Next.js v15 要来了，有哪些更新？附升级指南
14. Next.js v14 如何实现 SSE、接入 ChatGPT Stream?
15. Next.js App Router + Socket.IO 实现简易聊天室
16. Next.js 跨域问题的各种解法
17. Next.js 常见错误 Hydration Failed 该如何解决？
18. 使用 Next.js App Router 常犯的 10 个错误
19. Next.js v14 的 cookies()、header() 函数实现原理 —— AsyncLocalStorage
20. Next.js v14 报 document is not defined 这种错怎么办？基本都会遇到，深入解析，收藏备用
21. Next.js v14 如何为多个根布局自定义不同的 404 页面？竟然还有些麻烦！欢迎探讨
22. （技巧）当 Next.js 遇到频繁重复的数据库操作时，记住使用 React 的 cache 函数
23. Next.js v14 实现乐观更新，面向未来的 UI 更新方式，你可以不去做，但你不应该不了解
24. 如何用 Next.js v14 实现一个 Streaming 接口？
25. Next.js v14 的模板（template.js）到底有啥用？

React 系列

1. React 之元素与组件的区别
2. React 之 Refs 的使用和 forwardRef 的源码解读
3. React 之 Context 的变迁与背后实现
4. React 之 Race Condition
5. React 之 Suspense
6. React 之从视觉暂留到 FPS、刷新率再到显卡、垂直同步再到16ms的故事
7. React 之 requestAnimationFrame 执行机制探索
8. React 之 requestIdleCallback 来了解一下
9. React 之从 requestIdleCallback 到时间切片
10. React 之最小堆（min heap）
11. React 之如何调试源码
12. React 之 Scheduler 源码解读（上）
13. React 之 Scheduler 源码解读（下）
14. React 之 Scheduler 源码中的三个小知识点，看看你知不知道？
15. 300 行代码实现 React 的调度器 Scheduler

冴羽答读者问

1. 30 岁了， 现在开始努力，晚吗？
2. 何时能够像你一样优秀？
3. 怎么才能像你一样写文章如喝水？
4. 怎么才能像你一样长到180？
5. 冴羽哥哥 额爱你
6. 啦啦啦啦啦啦
7. 除代码外，就没别的优先级很高的爱好了吗？
8. 钱和成长，哪个更重要？
9. 悄悄过来蹭个回答
10. 怎么才能不焦虑？
11. 功利性学习的心态，你是否也会有？
12. 人生低谷时，如何快速调整、重回正轨？
13. [人生的意义是什么？](https://github.com/mqyqingfeng