面试题：Next.js中如何配置静态资源的基础路径

Question

在Next.js项目中，假设你需要将所有静态资源（如图片、字体等）放在`public`目录下，并且部署到一个子路径`/app`下，描述如何配置静态资源路径，使得页面能够正确引用这些资源。

Answer 1

1. 在 next.config.js 中配置 assetPrefix：
   • 在项目根目录下的 next.config.js 文件中，添加 assetPrefix 配置。assetPrefix 用于指定所有静态资源的前缀路径。
   • 示例代码如下：

module.exports = {
  assetPrefix: '/app',
};

2. HTML 模板中相对路径引用：
   • 在页面中引用静态资源时，使用相对路径。例如，对于 public 目录下的图片 logo.png，在页面组件中可以这样引用：

import Image from 'next/image';

function HomePage() {
  return (
    <div>
      <Image src="/logo.png" alt="logo" width={100} height={100} />
    </div>
  );
}

export default HomePage;

• Next.js 会自动根据 assetPrefix 的配置，将静态资源路径前缀加上 /app，从而使页面能够正确引用部署在 /app 子路径下的静态资源。

3. 对于 CSS 中引用字体等静态资源：
   • 同样使用相对路径。假设在 public 目录下有 fonts 文件夹存放字体文件，在 CSS 中可以这样引用：

@font - face {
  font - family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff');
  font - display: swap;
}

• Next.js 会在构建和部署时，自动将这些相对路径转换为带有 /app 前缀的正确路径，确保字体等静态资源能被正确加载。