构建

构建 Next.js 应用可以直接使用 npm run build 命令，构建完成后，会在根目录下生成一个 .next(该输出目录可以手动修改) 文件夹。

以下是我在实践过程中总结的一些构建优化配置，仅供参考。

next.config.js

import bundleAnalyzer from '@next/bundle-analyzer';

const isProd = process.env.NODE_ENV === 'production';

// 用于分析 Next.js 应用打包后的文件大小（可选）
const withBundleAnalyzer = bundleAnalyzer({
    enabled: process.env.ANALYZE === 'true',
    openAnalyzer: true,
    analyzerMode: 'static'
});

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    distDir: isProd ? 'dist' : '.next',
    assetPrefix: isProd ? '/next' : '/next',
    cacheMaxMemorySize: 60 * 1024, // 设置缓存最大内存为60MB，可以根据实际情况调整
    typescript: {
        ignoreBuildErrors: true // 忽略ts构建错误
    },
    eslint: {
        ignoreDuringBuilds: true // 忽略eslint构建错误
    }
};

export default withBundleAnalyzer(nextConfig);

上述代码中，我使用了 @next/bundle-analyzer 插件，可以分析 Next.js 应用打包后的文件大小。 其实 Next.js 本身的代码分割功能已经足够强大，不需要我们再做额外的优化，但是不排除有用户关心打包后的文件大小，所以这里给出了一个简单的配置。

1. 安装 @next/bundle-analyzer 插件：npm i @next/bundle-analyzer
2. 在 package.json 中添加 "analyze": "ANALYZE=true next build" 命令，用于开启分析功能
3. 运行 npm run analyze 命令，查看分析结果