技术栈
- 状态管理：zustand 做全局状态管理，要做状态持久化与“恢复”，使用 persist 中间件，将必要 UI 状态保存在本地
- 基础组件 shadcn ui
- pwa 还需要处理 Service Worker。在 Next.js 中，推荐使用 @ducanh2912/next-pwa（目前比老牌的 next-pwa 对 App Router 支持更好）
- 轮播图：Embla Carousel
- 灯箱：Lightbox（灯箱）库 —— Yet Another React Lightbox (YARL)
要添加 vercel analysis
如果是中文应用，字体资源要保证中国大陆能正常加载
状态与导航：遵从 Modals as Routes 模态框的开关、应用功能的选择等跟路由高度相关的“状态”，要充分利用软导航机制，交给 URL 来控制。而其他真正的 “全局状态”，使用 zustand。
不同场景下的导航实现方式：
| 需求场景 | 推荐方案 | 理由 |
|---|---|---|
| 全应用级导航 | next/link + Layout | 利用内置的预渲染和代码分割，体验接近 SPA 但性能更优。 |
| 弹窗/抽屉/详情覆盖 | Parallel + Intercepting Routes | 解决“刷新即丢失状态”的痛点，同时保持 URL 同步。 |
| 实时筛选/仪表盘控制 | URL Params (Shallow Updates)，用 nuqs 这个库 | 保证交互的即时性，同时允许用户分享当前状态的链接。 |
| 极高频的局部 UI 切换 | React State (Client Component) | 避免任何网络开销，纯内存操作。 |
4. 避坑指南
- 不要尝试在 App Router 中安装 react-router-dom。这会破坏 Next.js 的缓存机制（Router Cache）和服务器组件（RSC）的优势。
- 善用 useTransition：在进行路由跳转或 Server Action 时，包裹在 startTransition 中，可以避免 UI 冻结，并允许用户在加载期间继续交互。
- Layout 隔离：如果你希望导航时某个侧边栏不重新渲染，请确保它放在 layout.tsx 而非 page.tsx 中。 结论： 最好的方案是**“以 URL 为驱动的平行/拦截路由”**。它既保留了 SPA 的流畅感（Client-side Transition），又利用了 Next.js 的服务端能力，是目前处理复杂交互应用的最优解。
国际化
用 next-intl 做国际化，效果：
- URL 驱动，不进行自动重定向，由用户自主选择，页面 header 要有Language Switcher，
- 一旦用户选定了语言，要能持久化记忆。
- 要做软提醒：如果通过 JavaScript 的 navigator.language 检测到用户语言与当前页面不符，在顶部弹出一个小横幅（Banner），询问用户是否切换，如果用户关掉横幅，则继续停留，不再干扰。
- 要有静态SEO优化，在 HTML 头部设置
<link rel="alternate" hreflang="x" href="...">，告诉搜索引擎你支持多语言。
pwa 化
- 要有安装引导 (Promotion)：不要等待浏览器弹出安装提示。监听 beforeinstallprompt 事件，在设置界面提供“安装应用”的按钮。
