Next.js 技术栈推荐清单与最佳实践

---

• react-hook-form：高性能表单管理，适合复杂表单场景。
• Zod：TypeScript 优先的数据校验库，前后端类型一致。

---

状态管理与数据获取

• Zustand：轻量级全局状态管理，API 简洁。
• TanStack Query (React Query)：数据获取与缓存，适合内容型和后台管理系统。
• SWR：轻量级数据获取，适合实时数据场景。

---

内容与文档

• next-mdx-remote/rsc：MDX 渲染，支持 Markdown 与 React 组件混用。
• gray-matter：解析 Markdown frontmatter 元数据。
• remark-gfm / rehype-pretty-code / Shiki：扩展 Markdown 语法与代码高亮。
• @tailwindcss/typography：prose 类，优化 MDX 样式。
• Storybook：组件开发与文档，提升协作效率。

---

工具与开发体验

• immer：简化不可变数据操作。
• cheerio：服务端网页解析。
• chokidar：高效文件监听。
• madge：依赖关系可视化，辅助重构。
• Bundle Analyzer：分析打包体积，优化性能。

---

安全与环境配置

• Zod 校验环境变量：保证配置安全与类型一致。
• .env.local：本地环境变量管理，敏感信息不入库。

---

认证与安全

• Next-Auth：全栈认证解决方案，支持多种登录方式。
• Clerk：现代化认证平台，适合高级认证需求。

---

国际化

• next-i18next：Next.js 国际化解决方案，支持多语言网站。
• react-intl：复杂本地化需求的 React 国际化库。

---

SEO 与元数据

• next-seo：SEO 优化工具，集中管理元数据。
• next-sitemap：自动生成站点地图，提升搜索引擎收录。

---

其他

palywrite：Playwright 测试，保证代码质量。