从0死磕全栈之Next.js 企业级 `next.config.js` 配置详解：打造高性能、安全、可维护的中大型项目
随着 Next.js 13+ 全面拥抱 App Router 架构，传统的 Pages Router 配置方式已逐步演进。App Router 带来了更强大的 React Server Components（RSC）、流式 SSR、内置数据获取等能力，同时也对 next.config.js 的使用提出了新的最佳实践。
本文将为你提供一份专为 App Router 设计的企业级 next.config.js 配置模板，涵盖：
- 基础优化（SWC、严格模式）
- 环境变量管理
- 图片与字体优化
- 路径别名（Webpack）
- App Router 兼容的国际化方案说明
- API 代理（Rewrites）
- 安全 Headers
- 构建追踪与打包分析
✅ 适用场景：Next.js 13+ App Router、中大型项目、多环境部署、微前端、安全合规要求高的企业应用。
📦 完整配置模板（App Router 专用）
/** @type {import('next').NextConfig} */
const path = require('path');const isProd = process.env.NODE_ENV === 'production';const nextConfig = {// ======================// 1. 启用 App Router（Next.js 13+ 默认开启，显式声明更清晰）// ======================experimental: {appDir: true, // 启用 App Router（Next.js 14+ 可省略）},// ======================// 2. 基础优化// ======================reactStrictMode: true, // 检测潜在问题swcMinify: true, // 使用 SWC 压缩，构建更快// ======================// 3. 环境变量（仅非敏感、需暴露给客户端的变量）// ======================env: {NEXT_PUBLIC_APP_NAME: 'MyEnterpriseApp',NEXT_PUBLIC_API_BASE_URL: isProd? 'https://api.prod.example.com': 'https://api.staging.example.com',NEXT_PUBLIC_APP_ENV: process.env.NEXT_PUBLIC_APP_ENV || 'development',},// ======================// 4. 图片优化（next/image 依赖）// ======================images: {domains: ['images.unsplash.com','cdn.yourcompany.com','res.cloudinary.com','avatars.githubusercontent.com',],formats: ['image/avif', 'image/webp'],deviceSizes: [640, 750, 828, 1080, 1200, 1920],minimumCacheTTL: 60 * 60 * 24 * 30, // 30天缓存},// ======================// 5. 字体优化（自动内联 Google Fonts，防 FOIT）// ======================optimizeFonts: true,// ======================// 6. Webpack 路径别名（提升代码可读性）