面试题：Next.js 多环境下静态文件处理差异 - 复杂场景优化

构建流程

环境变量配置
- 在项目根目录创建.env文件用于本地开发环境，.env.production用于生产环境等。例如，在.env中可以定义PUBLIC_URL = /dev - static - assets/，在.env.production中定义PUBLIC_URL = /prod - static - assets/。
- Next.js 支持通过next.config.js读取环境变量，在next.config.js中配置：
```
const { PHASE_PRODUCTION_BUILD } = require('next/constants');
module.exports = (phase) => {
    if (phase === PHASE_PRODUCTION_BUILD) {
        return {
            assetPrefix: process.env.PUBLIC_URL
        };
    }
    return {
        assetPrefix: process.env.PUBLIC_URL
    };
};
```

缓存策略处理

基于 HTTP 缓存头：在next.config.js中利用headers配置来设置不同的缓存策略。

module.exports = {
    async headers() {
        return [
            {
                source: '/static/:path*',
                headers: [
                    {
                        key: 'Cache - Control',
                        value: process.env.NODE_ENV === 'production'? 'public, max - age = 31536000, immutable' :'max - age = 0, no - cache, no - store, must - revalidate'
                    }
                ]
            }
        ];
    }
};

版本化静态文件：启用 Next.js 的内置版本化功能，确保每次文件内容变化时，文件名包含哈希值。在next.config.js中，assetPrefix配置结合版本化文件名，可有效处理缓存问题。

用户权限相关静态文件处理
- 构建时分类：在构建过程中，将与用户权限相关的静态文件分离到特定目录，例如public/private - static/。对于不同权限级别的文件，可以进一步细分目录。
- 动态加载逻辑注入：在构建阶段，通过代码生成工具或脚本，在需要动态加载权限相关静态文件的页面代码中注入逻辑，根据运行时的用户权限信息来决定加载哪些文件。

代码结构

目录结构
- public目录：存放所有静态文件，将通用静态文件放在根目录，如public/images/，将与用户权限相关的静态文件放在public/private - static/，并根据权限细分，如public/private - static/admin/，public/private - static/user/等。
- pages目录：页面组件存放处，在页面组件中，通过next/link和next/image等组件来加载静态文件。对于权限相关的静态文件，在组件逻辑中通过判断用户权限来决定加载路径。例如：
```
import Link from 'next/link';
import { useUser } from '../lib/user - context';
const MyPage = () => {
    const { user } = useUser();
    const privateAssetPath = user.role === 'admin'? '/private - static/admin/special - asset.png' : '/private - static/user/general - asset.png';
    return (
        <div>
            <img src={privateAssetPath} alt="Private Asset" />
        </div>
    );
};
export default MyPage;
```
配置文件
- next.config.js：如上述构建流程中所述，配置环境变量相关的assetPrefix，缓存策略相关的headers等。
- 自定义配置文件：可以创建config/目录，在其中存放env - config.js等文件，用于集中管理环境相关的配置逻辑，如不同环境下的 API 地址等，与静态文件处理相关的配置也可放在此，方便统一维护。

部署方式

多环境部署
- 开发环境：可以使用next dev命令启动开发服务器，本地开发环境可通过.env文件中的PUBLIC_URL配置来访问静态文件。开发服务器可以直接在本地网络中访问，方便开发人员测试不同环境下的静态文件处理。
- 生产环境：
  - 使用 CI/CD 流程：例如使用 GitHub Actions 或 GitLab CI/CD。在构建阶段，根据环境变量设置PUBLIC_URL，并按照构建流程生成带有正确缓存头和版本化的静态文件。
  - 部署到云平台：如 AWS S3 + CloudFront，Google Cloud Storage + Cloud CDN 或 Vercel 等。将构建好的静态文件上传到存储服务，CDN 服务负责缓存和分发静态文件。根据next.config.js中配置的缓存头，CDN 会按照不同环境的策略进行缓存。
用户权限动态加载处理
- 服务器端渲染（SSR）或静态站点生成（SSG）：如果使用 SSR，在服务器端获取用户权限信息，根据权限决定返回给客户端的静态文件路径。对于 SSG，在构建时无法获取用户权限，但可以在页面加载时通过 API 调用获取用户权限，然后动态加载相应的静态文件。
- 边缘计算：利用边缘计算平台（如 Cloudflare Workers 结合 Next.js Edge API Routes），在边缘节点根据用户请求中的权限信息动态决定返回的静态文件，减少回源次数，提高响应速度。

星途面试题库

面试题：Next.js 多环境下静态文件处理差异 - 复杂场景优化

知识考点

面试题答案

构建流程

代码结构

部署方式