面试题：Next.js静态资源路径配置在不同构建环境下的差异

开发环境（development）：
- 在Next.js开发环境中，通常使用相对路径来引用静态资源。例如，项目结构如下：
```
project/
  pages/
  public/
    images/
      logo.png
```
- 在页面组件中引用logo.png可以这样写：
```
import Image from 'next/image';
export default function Home() {
  return (
    <div>
      <Image src="/images/logo.png" alt="logo" width={100} height={100} />
    </div>
  );
}
```
- Next.js开发服务器会处理这些相对路径，使得资源能够在开发环境中正确加载。
生产环境（production）：
- 在生产环境下，Next.js会对静态资源进行优化和处理。默认情况下，Next.js会将静态资源放置在_next/static目录下，并根据文件内容生成哈希值作为文件名的一部分，以实现缓存控制。例如，logo.png可能会被处理为logo.[hash].png。
- 引用方式依然类似，但Next.js会在构建时自动处理路径，确保资源能正确指向优化后的文件。例如，上述代码在生产环境下也能正确加载优化后的logo.[hash].png。

使用next/image组件：
- Next.js提供的next/image组件会自动处理不同环境下的静态资源路径。它内置了对优化和正确路径解析的支持。如上述示例，无论在开发还是生产环境，只要正确配置src属性为相对路径，next/image组件就能确保资源正确加载。
配置next.config.js：
- 可以通过next.config.js文件中的assetPrefix属性来统一配置静态资源的前缀。例如，如果项目部署在一个子路径下，如/app，可以这样配置：
```
module.exports = {
  assetPrefix: '/app',
};
```
- 在开发和生产环境中，所有静态资源路径都会自动加上这个前缀，保证在不同环境下路径一致。

配置assetPrefix：
- 当部署到CDN时，需要将assetPrefix设置为CDN的URL。例如，如果CDN的地址是https://cdn.example.com，则在next.config.js中配置如下：
```
module.exports = {
  assetPrefix: 'https://cdn.example.com',
};
```
- 这样，Next.js在构建时会将所有静态资源的路径前缀替换为CDN的URL。
CDN设置：
- 确保CDN正确配置了对_next/static目录结构下资源的映射。例如，CDN应该能够正确解析https://cdn.example.com/_next/static/[hash]/logo.[hash].png这样的路径，并返回相应的资源。
- 还需注意CDN的缓存设置，合理设置缓存时间，以充分利用CDN的缓存优势，同时确保在资源更新时能够及时更新缓存。

星途面试题库