Next.js 15企业级网站最佳实践：从架构到部署
Next.js 15于2025年10月发布，是当前企业级网站开发的主流选择。App Router完全替代了Pages Router，Server Components成为默认范式，Server Actions让前后端数据交互变得前所未有的简洁。我从Next.js 12开始用于生产项目，踩过不少坑，也积累了一套可复用的最佳实践。以下内容适合有React基础的开发者，全方位覆盖项目架构、渲染策略、性能优化和CI/CD。
一、项目结构与目录规范
App Router使用app/作为根目录，page.tsx定义页面路由，layout.tsx定义共享布局，not-found.tsx处理404，loading.tsx和error.tsx分别处理加载状态和错误边界。动态路由使用方括号语法：[slug]/page.tsx对应所有 slug 路由。路由组（Route Groups）用圆括号包裹，可以组织目录结构而不影响URL，例如(marketing)/about和(marketing)/pricing都在/about和/pricing下，但可以用共享布局。
推荐的项目组织结构：核心代码放在src/app/下，组件放src/components/，工具函数放src/lib/，类型定义放src/types/。对于大型项目，建议为每个功能模块创建独立的子目录，每个子目录内有自己的page.tsx、layout.tsx和loading.tsx。例如src/app/(shop)/cart/page.tsx和src/app/(shop)/checkout/page.tsx，共享(shop)/layout.tsx中的购物车上下文。API路由放在src/app/api/下，每个子目录对应一个路由端点，例如src/app/api/products/route.ts对应/api/products。
二、渲染策略与场景选择
Next.js提供四种渲染策略，理解它们的差异是性能优化的基础。静态生成（Static Generation, SSG）在构建时生成页面内容，适合内容不频繁变化的页面如博客文章、产品列表页。页面的HTML在构建时确定，后续请求直接返回缓存内容，速度最快。使用generateStaticParams()可以为动态路由预生成所有可能的页面。
增量静态再生（ISR, Incremental Static Regeneration）在保持静态性能的同时支持内容更新。设置revalidate参数（例如revalidate: 3600）后，页面首次访问时生成并缓存，之后每3600秒在后台重新验证。如果内容有更新，Next.js会在下次请求时返回新内容，同时更新缓存。ISR适合新闻、电商产品页等需要频繁更新但不需要实时数据的场景。
服务端渲染（SSR）在每次请求时动态生成内容，适合需要个性化数据的页面例如用户专属内容、搜索结果页。Server Components默认在服务端渲染，但可以添加'use client'标记使其变为客户端组件。使用cookies()和headers()获取请求上下文时，该组件链上的所有组件都必须在服务端渲染。客户端渲染（Client Rendering）通过'use client'标记显式启用，适合需要大量用户交互的组件——如实时聊天、复杂表单、动画频繁的UI。
三、性能优化核心技巧
图片优化是首要任务。使用next/image组件替代<img>标签，它自动提供WebP/AVIF格式转换、响应式尺寸生成、Lazy loading和模糊占位符。优先使用src导入本地图片（Next.js可以读取文件元数据），URL远程图片需要在next.config.js中配置domains白名单。blurDataURL属性支持base64编码的模糊占位图，提升用户体验。
字体优化使用next/font代替Google Fonts CDN引入。next/font/google内置的Font对象会自动下载字体文件到本地，服务端直出CSS，消除字体加载的布局偏移（CLS）。本地字体文件放在app/目录下，使用next/font/local注册，支持WOFF2格式和subset配置。
代码分割由Next.js自动完成，但可以通过dynamic()函数手动控制。import('./HeavyChart')返回Promise，配合{ssr: false}可以让组件只在客户端渲染。Suspense配合use实现优雅的流式渲染——先显示骨架屏，异步数据加载完成后无缝替换内容。数据获取推荐使用React Query或SWR，它们提供缓存、背景更新、去重等开箱即用的功能，比useEffect更安全。
四、部署策略与CI/CD流程
Vercel是Next.js官方推荐的部署平台，提供了最无缝的部署体验——git push自动触发部署，PR自动生成预览URL，生产环境自动配置CDN和边缘节点。Vercel的ISR缓存由服务端worker管理，无需额外配置。如果使用自托管，Docker镜像node:18-alpine是基础镜像选择，Next.js 15需要Node.js 18.17以上。
GitHub Actions是自托管场景下的自动化首选。基础流水线包括：代码检查（ESLint + TypeScript类型检查）、单元测试（Jest/Vitest）、集成测试（Playwright）、构建验证。环境变量用.env.production管理敏感信息，GitHub Secrets存储API密钥和部署密钥。Docker构建优化建议使用多阶段构建：先npm ci安装依赖（利用构建缓存），再复制源代码，最后只复制production依赖。
监控与可观测性建议：部署后接入Sentry监控前端异常，Vercel Analytics监控Core Web Vitals，对于Node.js服务接入DataDog或Grafana Cloud。前端性能指标LCP<2.5s、CLS<0.1、INP<200ms是优秀标准，低于此标准的页面需要重点优化。
五、常见陷阱与修复方案
App Router中Server Components不能直接使用useState、useEffect等Hooks。如果需要交互，必须将组件标记为'use client'，但这样会中断服务端组件链。解决方案是拆分组件树：将纯展示内容保留为服务端组件，只有需要交互的部分标记为客户端组件，通过props传递数据。
cookies()和headers()在服务端组件中调用有副作用——它们使组件成为动态路由，丧失静态缓存能力。如果缓存是必须的，将需要动态数据的部分拆分为独立的客户端组件，让父级组件保持静态。
图片优化常见问题：本地图片未使用src导入导致无法优化；远程图片未配置domains白名单导致404；图片尺寸过大导致LCP超标。建议图片最大宽度不超过1920px，JPEG质量设置为85，PNG使用compressionLevel=9的next/image配置。