你如何在 Next.js 中提供静态资源？

Question

Accepted Answer

Next.js 从项目根目录下的特殊 **`public/`** 文件夹中提供静态文件（图像、字体、图标、PDF、`robots.txt`）。 ## public 文件夹映射到 URL 根 ```text public/ logo.png → served at /logo.png favicon.ico → served at /favicon.ico docs/guide.pdf → served at /docs/guide.pdf robots.txt → served at /robots.txt ``` `public/logo.png` 处的文件在 URL `/logo.png` 处可用 — `public/` 部分被省略。使用从根开始的绝对路径引用它们： ```tsx import Image from "next/image"; export default function Header() { return ( <>

Download guide ); } ``` ## public/ 与导入资源 ```tsx // Option A: from public/ — referenced by URL string

// Option B: imported — bundled, hashed for caching, dimensions inferred import logo from "./logo.png";

// width/height come from the import automatically ``` **导入的**图像获得内容哈希文件名（非常适合长期缓存），Next.js 可以推断其尺寸。对于通过稳定 URL 引用的文件（favicon、robots.txt、og-images、可下载文件），使用 `public/`，对于直接在组件中使用的图像，使用**导入**。 ## 注意事项 - 只有**构建时**存在的文件才会被提供 — `public/` 不是运行时上传目的地。 - 不要在那里放置秘密 — `public/` 中的所有内容都可以通过 URL 公开访问。 ## 为什么这很重要 `public/` 文件夹是在 Next.js 中提供静态文件的简单、基于约定的方式（favicons、robots.txt、OG 图像、下载）。了解其内容如何映射到 URL 根 — 以及何时选择导入资源（哈希、可缓存、自动调整大小）而不是从 `public/` 引用它 — 涵盖了日常的静态资源需求。