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 sitemap	Next.js的关键SEO配置	👉 阅读文章

增强用户体验功能

分支	简介	文章链接
AnimatedSvg	在SVG里写HTML和CSS，实现一个动画组件	👉 阅读文章

精读 React Hooks

序号	Hook	代码分支	文章链接
1	useState	-	👉 useState 的几个基础用法和进阶技巧
2-3	useReducer useContext	useReducer-useContext	👉 全面掌握useReducer 👉 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 useDebugValue	useSyncExternalStore	👉 使用useSyncExternalStore获取实时数据 👉 把useDebugValue加入你的React调试工具库
14	useId	-	👉 总有一天你会需要useId为你生成唯一id
16	use	-	👉 一个为代码优雅而生的hook——use

关于我

前端工程师，全栈开发爱好者，AI降临派。

My Blog
Github
Twitter / X
Medium
掘金
知乎
微信交流群

如果这个项目对你有用，请我喝杯咖啡吧