面试题：Next.js项目中如何在公共目录管理静态文件

Question

在Next.js项目里，假设你要放置一些图片、字体等静态文件供整个项目使用，描述在公共目录下管理这些静态文件的具体步骤，以及如何在页面组件中正确引用这些静态文件。

Answer 1

1. 在公共目录下管理静态文件的具体步骤

1. 创建公共目录：在Next.js项目根目录下，创建一个名为 public 的目录。如果项目结构已经存在该目录，则直接使用。
2. 放置静态文件：将图片、字体等静态文件放入 public 目录中。可以根据文件类型创建子目录，例如在 public 目录下创建 images 子目录存放图片，创建 fonts 子目录存放字体文件。例如：

project/
├── public/
│   ├── images/
│   │   ├── logo.png
│   ├── fonts/
│   │   ├── Arial.ttf
├── pages/
│   ├── index.js
├── package.json

2. 在页面组件中正确引用这些静态文件

1. 引用图片： 在页面组件中，可以使用 next/image 组件来引用图片。例如：

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <Image
        src="/images/logo.png"
        alt="项目 logo"
        width={200}
        height={100}
      />
    </div>
  );
}

src 属性的值是相对于 public 目录的路径。

2. 引用字体： 对于字体文件，可以通过在CSS中使用 @font - face 规则来引用。首先，在 styles 目录下创建一个CSS文件，例如 styles.css，然后在其中添加以下代码：

@font - face {
  font - family: 'MyFont';
  src: url('/fonts/Arial.ttf');
}

body {
  font - family: 'MyFont', sans - serif;
}

然后在页面组件中引入这个CSS文件：

import styles from '../styles/styles.css';

export default function Home() {
  return (
    <div className={styles.container}>
      {/* 页面内容 */}
    </div>
  );
}