Статические ресурсы

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/, так как это приведет к ошибке. Подробнее.

Полезно знать:

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