Папка 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

Robots, Favicons и другие файлы

Эта папка также полезна для robots.txt, favicon.ico, Google Site Verification и любых других статических файлов (включая .html). Но убедитесь, что у вас нет статического файла с тем же именем, что и файл в директории pages/, так как это приведёт к ошибке. Подробнее.