面试题：Next.js 跨平台静态文件兼容性 - 基础配置

Question

在 Next.js 项目中，为了确保跨平台静态文件的兼容性，需要对项目进行一些基础配置。请简述在 Next.js 中如何配置静态文件路径，以便在不同平台（如 Web、移动端）上正确加载静态资源，并举例说明在 `next.config.js` 文件中相关配置的写法。

Answer 1

配置静态文件路径以确保跨平台兼容性

1. 基础配置思路：在 Next.js 中，静态文件（如图片、字体等）默认放在 public 目录下。要确保在不同平台上正确加载静态资源，需通过 next.config.js 配置文件对静态文件路径进行配置。next.config.js 允许你自定义 Next.js 应用的行为，包括配置静态文件的公共路径。
2. next.config.js 配置写法：

module.exports = {
  assetPrefix: process.env.NODE_ENV === 'production'? '/your-production-prefix/' : '',
  // 如果应用部署在子路径下，例如 https://example.com/app，
  // 则 production 环境下 assetPrefix 应设置为 '/app/'
  // 在开发环境下通常设置为空字符串，以便本地正确加载资源
};

在上述配置中，assetPrefix 用于指定静态资源的前缀路径。在生产环境中，设置为特定的前缀（例如部署在子路径下的路径前缀），而在开发环境中设置为空字符串。这样可以确保在不同平台（Web、移动端等）加载静态资源时，路径都是正确的。

例如，若有一个图片文件 logo.png 放在 public 目录下，在页面中引用时，Next.js 会根据 assetPrefix 的配置正确生成路径。如在开发环境下路径为 /logo.png，在生产环境下若 assetPrefix 配置为 /app/，则路径为 /app/logo.png。