在探索 Next.js 开发的过程中，许多开发者倾向于直接参考 Codex 或其他开源社区的中文教程。然而，盲目照搬往往会导致项目架构混乱或性能瓶颈。本文旨在梳理常见误区，帮助你在构建应用时避开这些隐蔽的陷阱，确保代码的健壮性与可维护性。
过度依赖全局状态管理
新手常误以为所有数据都应存入全局状态库如 Redux 或 Zustand。实际上，Next.js 强调“局部优先”原则。对于仅用于特定页面或组件的数据，应优先使用 React 本地状态或 Server Components 的服务端获取能力。强行引入复杂的全局状态不仅增加包体积，还会导致不必要的重渲染，违背了 Next.js 高效渲染的设计初衷。
忽视客户端与服务端的边界
Codex 教程中常出现混用浏览器 API 与服务端逻辑的代码片段。这是最致命的错误之一。Next.js 的核心优势在于 SSR 和 SSG，若在服务端组件中调用 `window` 或 `localStorage`，将直接引发运行时错误。务必明确区分哪些逻辑必须在客户端执行（如动画、用户交互），哪些应在服务端完成（如数据库查询）。利用动态导入 `next/dynamic` 并设置 `{ ssr: false }` 是解决此类冲突的标准做法。
静态资源处理不当
另一个高频踩坑点是对图片等静态资源的处理方式。许多教程建议直接使用 `` 标签加载远程图片，但这忽略了 Next.js 内置的图像优化功能。正确做法是使用 `next/image` 组件，它能自动进行格式转换、懒加载和尺寸裁剪，显著提升 LCP 指标。此外，避免将大型字体文件或视频直接放入 public 目录，而应通过 CDN 分发，以减轻服务器负载。