面试题：Next.js中如何在公共文件夹管理静态资产并在页面中引用

Question

请描述在Next.js项目中设置公共文件夹用于管理静态资产（如图片、字体等）的步骤，并且说明如何在页面组件中正确引用这些静态资产。

Answer 1

设置公共文件夹用于管理静态资产步骤

1. 创建公共文件夹：在Next.js项目根目录下创建一个名为public的文件夹（若不存在）。这是Next.js约定用于存放静态资产的文件夹。
2. 放置静态资产：将图片、字体等静态资产放入public文件夹。例如，可以在public文件夹下创建images子文件夹用于存放图片，创建fonts子文件夹用于存放字体文件。

在页面组件中正确引用静态资产

1. 引用图片：

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

   在上述代码中，通过src="/images/example.jpg"引用public/images文件夹下的example.jpg图片，width和height属性是next/image组件必需的，用于指定图片的尺寸。
2. 引用字体： 可以在CSS中通过相对路径引用字体。例如，假设在public/fonts文件夹下有一个myfont.woff2字体文件，在CSS文件中可以这样引用：

   @font - face {
     font - family: 'MyFont';
     src: url('/fonts/myfont.woff2') format('woff2');
     font - weight: normal;
     font - style: normal;
   }
   
   body {
     font - family: 'MyFont', sans - serif;
   }
   

   这里通过url('/fonts/myfont.woff2')引用了public/fonts文件夹下的字体文件，并定义了字体相关属性，然后在body元素中应用了该字体。