Быстрые шаги по показу изображений с помощью Next.js:

  • Поместите все свои изображения в каталог общедоступной папки.
  • Убедитесь, что имена файлов в вашей общей папке не совпадают с именами файлов в вашем каталоге папки Pages, так как это вызовет ошибку.
  • Если вы не знаете, где находится общедоступный каталог, это папка, в которой находится файл favicon.ico.
  • Не меняйте имя каталога общедоступной папки
  • Next.js будет обслуживать только активы, которые находятся в общедоступном каталоге во время сборки.
  • Для другого статического контента можно использовать getStaticProps и getStaticPaths (https://medium.com/@remoteupskill/serving-static-files-with-next-js-fed0e75041f3)
Pro Tip: This is also the public directory is where you can put your robots.txt file, which is the file you tell what web scrapers should and should not do when they visit your site

Итак, если вы сохранили изображение с именем «me.png» в общей папке, вы можете получить доступ к статическому ресурсу следующим образом (примечание: он используется внутри компонента React):

src="/me.png"

Чтобы создать компонент, который использует статическое изображение в каталоге общих папок, вы можете использовать следующий код:

import Image from 'next/image'
function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}
export default Avatar

источник: https://nextjs.org/docs/basic-features/static-file-serving

Если вы хотите узнать больше о Next.js, прочтите это:



Лучший способ получить данные в Next.js
Обратите внимание, что выпущена версия Next.js 13, и если вы используете эту последнюю версию, то некоторые из… medium.com



Некоторые альтернативы использованию Next.js для обслуживания статических веб-сайтов:

  • Vercel (используется с Next.js)
  • Вордпресс
  • Гэтсби

Мы предлагаем следующие программы обучения один на один:

  • Полная веб-разработка
  • Подготовка к интервью

Если у вас есть какие-либо вопросы относительно наших услуг или публикаций, вы можете связаться с нами по адресу [email protected]

Мы регулярно публикуем короткие технические руководства, поэтому рассмотрите возможность подписки на наш блог Medium.

До следующего раза — продолжайте программировать, продвигаясь небольшими шагами вперед в этом своем приключении.

Но что еще более важно, оставайтесь сосредоточенными!