面试题：Next.js 中如何处理静态文件以确保正确的路径引用

Question

在 Next.js 项目里，你需要在页面中引入一个静态图片文件，并在不同页面布局下确保图片路径始终正确引用。描述你会采取什么步骤实现这个需求，包括文件放置位置以及代码中如何引用。

Answer 1

1. 文件放置位置：
   • 推荐将静态图片放置在 public 目录下。public 目录是 Next.js 用于存放不需要经过打包处理的静态资源的目录，在构建过程中，public 目录下的文件会被直接复制到输出目录中，其相对路径保持不变。
2. 代码中引用：
   • 在 Next.js 中，可以使用 next/image 组件来引用图片，这样可以获得自动优化、响应式图片等功能。假设图片名为 example.jpg 存放在 public 目录下：

   import Image from 'next/image';
   
   export default function MyPage() {
       return (
           <div>
               <Image
                   src="/example.jpg"
                   alt="Example Image"
                   width={500}
                   height={300}
               />
           </div>
       );
   }
   

   • src 属性值以 / 开头，表示从项目根目录开始的相对路径，这确保了在不同页面布局下图片路径始终正确引用。同时设置 width 和 height 属性，这两个属性是 next/image 组件必需的，用于在图片加载前预留空间，防止布局跳动。alt 属性用于提供图片的替代文本，这对无障碍访问很重要。