面试题：Next.js 多环境下静态文件处理差异 - 路径问题

Question

假设在 Next.js 项目中有多套环境（开发、测试、生产），静态文件在不同环境下的访问路径存在差异（例如开发环境为 `/static`，生产环境为 `/cdn/static`）。请描述如何在代码层面及构建配置层面解决这个问题，以保证静态文件在各环境都能正确引用，并且不影响代码的可维护性。

Answer 1

代码层面

1. 使用环境变量：在代码中通过读取环境变量来确定静态文件的路径。在 Next.js 项目中，可以在 .env 文件中定义不同环境下的静态文件路径。例如：
   • 在 .env.development 中定义 NEXT_PUBLIC_STATIC_PATH=/static。
   • 在 .env.production 中定义 NEXT_PUBLIC_STATIC_PATH=/cdn/static。
   • 在代码中使用 process.env.NEXT_PUBLIC_STATIC_PATH 来引用静态文件路径，比如在组件中：

import React from 'react';

const MyComponent = () => {
    const staticPath = process.env.NEXT_PUBLIC_STATIC_PATH;
    return (
        <img src={`${staticPath}/image.jpg`} alt="example" />
    );
};

export default MyComponent;

2. 封装路径函数：为了提高代码的可维护性，可以封装一个函数来获取静态文件路径。例如：

const getStaticPath = () => {
    return process.env.NEXT_PUBLIC_STATIC_PATH;
};

const MyComponent = () => {
    const staticPath = getStaticPath();
    return (
        <img src={`${staticPath}/image.jpg`} alt="example" />
    );
};

export default MyComponent;

构建配置层面

1. Next.js 配置文件：在 next.config.js 文件中，可以使用 assetPrefix 配置项来设置静态文件的前缀路径。例如：

module.exports = {
    assetPrefix: process.env.NEXT_PUBLIC_STATIC_PATH || '',
};

这样在构建和部署时，Next.js 会根据 assetPrefix 的值来正确生成静态文件的引用路径。如果在 .env.production 中设置了 NEXT_PUBLIC_STATIC_PATH=/cdn/static，构建后的静态文件引用路径会自动带上 /cdn/static 前缀。 2. Webpack 配置（可选）：如果需要更复杂的静态文件处理，可以通过自定义 Webpack 配置来进一步调整静态文件的加载逻辑。可以使用 next - webpack - middleware 等工具来扩展 Webpack 配置，不过对于简单的路径调整，next.config.js 中的 assetPrefix 通常已经足够。