Awesome
nextjs-learn-demos
NextJS项目demo汇总，每个demo开一个分支
我的博客：J实验室
本仓库示例站：nextjs.weijunext.com
开源SaaS产品仓库：Smart Excel AI
阅读代码请配合对应文章食用
本站技术栈
| 分支 | 简介 | 文章链接 |
|---|---|---|
| 前置知识：NextJS v13 的渲染机制有什么不同？ | 👉 阅读文章 | |
| 前置知识：NextJS v13服务端组件和客户端组件及最佳实践 | 👉 阅读文章 | |
| 拓展知识：讲清楚 Next.js 里的 CSR, SSR, SSG, 和 ISR | 👉 阅读文章 | |
| NextAuth-Prisma | NextJS+Next-Auth+Postgres+Prisma来完成登录模块 | 👉 阅读文章 |
| Docker | 探讨 Docker 和 Docker Compose 的使用 | 👉 阅读文章 |
| Upstash | 用 Upstash 作为你的 Redis 服务器 | 👉 阅读文章 |
| contentlayer | 让contentlayer帮你把md文件变成静态页面 | 👉 阅读文章 |
| membership | 带你设计一套会员功能并开发它 | 👉 阅读文章 |
| - | 基于Lemon Squeezy开发你的全球可用的会员功能 | 👉 阅读文章 |
| metadata <br>sitemap | Next.js的关键SEO配置 | 👉 阅读文章 |
增强用户体验功能
| 分支 | 简介 | 文章链接 |
|---|---|---|
| AnimatedSvg | 在SVG里写HTML和CSS，实现一个动画组件 | 👉 阅读文章 |
精读 React Hooks
| 序号 | Hook | 代码分支 | 文章链接 |
|---|---|---|---|
| 1 | useState | - | 👉 useState 的几个基础用法和进阶技巧 |
| 2-3 | useReducer <br> useContext | useReducer-useContext | 👉 全面掌握useReducer <br> 👉 useContext从基础应用到性能优化 |
| 4 | useRef | useRef | 👉 useRef的多维用途 |
| 5 | useEffect | useEffect | 👉 useEffect使用细节知多少 |
| 6 | useLayoutEffect | useLayoutEffect | 👉 useLayoutEffect解决了什么问题 |
| 7 | useMemo | useMemo | 👉 用useMemo来减少性能开销 |
| 8 | useCallback | - | 👉 我们为什么需要useCallback |
| 9 | useTransition | - | 👉 使用useTransition进行非阻塞渲染 |
| 10 | useDeferredValue | useDeferredValue | 👉 使用useDeferredValue延迟状态更新 |
| 11 | useInsertionEffect | - | 👉 useInsertionEffect——CSS-in-JS样式注入新方式 |
| 12 | useImperativeHandle | useImperativeHandle | 👉 使用useImperativeHandle能获得什么能力 |
| 13、15 | useSyncExternalStore <br> useDebugValue | useSyncExternalStore | 👉 使用useSyncExternalStore获取实时数据 <br> 👉 把useDebugValue加入你的React调试工具库 |
| 14 | useId | - | 👉 总有一天你会需要useId为你生成唯一id |
| 16 | use | - | 👉 一个为代码优雅而生的hook——use |
关于我
前端工程师，全栈开发爱好者，AI降临派。
My Blog
Github
Twitter / X
Medium
掘金
知乎
微信交流群
如果这个项目对你有用，请我喝杯咖啡吧
<a href="https://www.buymeacoffee.com/weijunextz" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;" ></a>