/nextjs-learn-demos

Sharing Technologies in the Next.js Ecosystem.

Primary LanguageTypeScript

nextjs-learn-demos

NextJS项目demo汇总,每个demo开一个分支

我的博客:J实验室
本仓库示例站:nextjs.weijunext.com
开源SaaS产品仓库:Smart Excel AI


Click to visit the demo website

阅读代码请配合对应文章食用

本站技术栈

分支 简介 文章链接
前置知识: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
掘金
知乎
微信交流群

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

Buy Me A Coffee