Статические ресурсы в папке `public`

Next.js может обслуживать статические файлы, такие как изображения, в папке public в корневом каталоге. Файлы внутри папки public могут быть обработаны кодом, начиная с базового URL (/).

Например, файл public/avatars/me.png можно просмотреть, посетив путь /avatars/me.png. Код для отображения этого изображения может выглядеть следующим образом:

import Image from 'next/image'
 
export function Avatar({ id, alt }) {
  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
}
 
export function AvatarOfMe() {
  return <Avatar id="me" alt="A portrait of me" />
}

Кэширование

Next.js не может безопасно кэшировать ресурсы в папке public из-за возможных изменений. Применяемые по умолчанию заголовки кэширования:

Cache-Control: public, max-age=0

Роботы, Favicon и другие

Для статических файлов метаданных, таких как robots.txt, favicon.ico, и т.д., следует использовать специальные файлы метаданных внутри папки app.

Важно знать:

• Папка должна быть названа public. Название нельзя изменить, и это единственная папка, используемая для статических ресурсов.
• Только ресурсы, находящиеся в папке public в момент сборки build, будут обслуживаться Next.js. Файлы, добавленные во время запроса, недоступны. Для постоянного хранения файлов рекомендуется использовать сторонний сервис, например, Vercel Blob.