常见nextjs打包配置

March 20, 2026

/*_ @type {import('next').NextConfig} _/ const nextConfig = {

// 1. 部署模式 // output: 'export', // 纯静态导出（失去 SSR） output: 'standalone', // 最小化部署包（推荐服务器部署）

// 2. 图片域名白名单 images: { domains: ['cdn.example.com'], // 图片格式优化 formats: ['image/avif', 'image/webp'], },

// 3. 环境变量（暴露给客户端） env: { APP_VERSION: process.env.npm_package_version, },

// 4. 路径别名（通常在 tsconfig 里配置） // 在 tsconfig.json 配置 paths，Next.js 自动识别

// 5. 重定向 async redirects() { return [ { source: '/old-page', destination: '/new-page', permanent: true, // 301 永久重定向 }, ]; },

// 6. Headers（安全/缓存控制） async headers() { return [ { source: '/_next/static/:path*', headers: [ { key: 'Cache-Control', value: 'public, max-age=31536000, immutable', }, ], }, ]; },

// 7. 扩展 Webpack 配置 webpack(config, { isServer }) { // 只在客户端打包时处理 svg if (!isServer) { config.module.rules.push({ test: /.svg$/, use: ['@svgr/webpack'], }); } return config; }, };

module.exports = nextConfig;