Next.js подаёт статические файлы (изображения, шрифты, иконки, PDF-файлы, robots.txt) из специальной папки public/ в корне вашего проекта.
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
Файл доступен по URL — часть опускается. Ссылайтесь на них с абсолютного пути от корня:
public/logo.png/logo.pngpublic/import Image from "next/image";
export default function Header() {
return (
<>
<Image src="/logo.png" alt="Logo" width={120} height={40} />
<img src="/icons/star.svg" alt="" />
<a href="/docs/guide.pdf">Download guide</a>
</>
);
}
// Option A: from public/ — referenced by URL string
<Image src="/logo.png" width={120} height={40} alt="" />
// Option B: imported — bundled, hashed for caching, dimensions inferred
import logo from "./logo.png";
<Image src={logo} alt="" /> // width/height come from the import automatically
Импортируемые изображения получают имя файла с хешем содержимого (отлично подходит для долгосрочного кеширования), и Next может вывести их размеры. Используйте public/ для файлов, на которые ссылаются со стабильным URL (favicon, robots.txt, og-images, загружаемые файлы), и импорты для изображений, используемых непосредственно в компонентах.
public/ это не место для загрузки во время выполнения.public/ является публично доступным по URL.Папка public/ — это простой способ, основанный на соглашениях, для подачи статических файлов в Next.js (фавикон, robots.txt, OG-изображения, загрузки).
Знание того, что её содержимое отображается в корень URL — и когда отдать предпочтение импорту активов (хеширование, кешируемость, автоопределение размера) в сравнении со ссылкой из public/ — охватывает повседневные потребности в статических активах.
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
Поддержать