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

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

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

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

Важно знать:

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