Как использовать Next.js Image с безголовой CMS

Компонент Next Image — одна из самых полезных и используемых функций Next.js. Производительность, простота использования и гибкость этого компонента способствуют удивительному опыту разработчиков, который предлагает Next.js.

В этой статье мы расскажем, как использование Next.js Image с безголовой CMS позволяет автоматизировать оптимизацию изображений вашего сайта для всех устройств и скоростей сети, что приводит к повышению производительности сайта и улучшению впечатлений посетителей сайта.

Прежде чем перейти к коду, давайте ознакомимся с компонентом Next Image и тем, как мы используем его для загрузки изображений из безголовой CMS. Вы также можете следить за нами на YouTube, где мы подробно обсуждаем эту статью.

Компонент Next Image

Компонент Next Image обеспечивает передовые возможности дизайна для современного веба, оптимизируя стандартный компонент в вашем коде. Он назначает HTML srcset так, чтобы изображения обслуживались отзывчиво в зависимости от размера экрана. На маленькие устройства будет подаваться файл изображения меньшего размера с меньшим разрешением, и изображение будет увеличиваться в разрешении по мере увеличения размера экрана. Next.js обрабатывает это автоматически. Вот как это выглядит:

Ввод

<Image
  src={url}
  quality={60}
  alt={`Cover image for ${title}`}
  layout="fill"
  objectFit="cover"
  placeholder="blur"
  blurDataURL={`${url}?auto=format,compress&q=1&blur=500&w=2`}
  priority
/>
Вход в полноэкранный режим Выход из полноэкранного режима

Выход

<img alt="Cover image for Coding Your Design System with Tailwind CSS" sizes="100vw" srcset="/_next/image?url=https%3A%2F%2Fimgix.cosmicjs.com%2F87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fimgix.cosmicjs.com%2F87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fimgix.cosmicjs.com%2F87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fimgix.cosmicjs.com%2F87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fimgix.cosmicjs.com%2F87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fimgix.cosmicjs.com%2F87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fimgix.cosmicjs.com%2F87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fimgix.cosmicjs.com%2F87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimgix.cosmicjs.com%2F87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png&amp;w=3840&amp;q=75" decoding="async" data-nimg="fill" class="rounded-t-md transition-all grayscale-0 scale-100 blur-0" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover; object-position: center center;">
Вход в полноэкранный режим Выход из полноэкранного режима

Компонент Next Image также лениво загружает изображения, чтобы они стали неблокирующими элементами. Благодаря этому наши приложения лучше загружают страницы и в целом улучшают показатели Core Web Vitals. Уже сейчас видно, что Next Image выполняет большую часть тяжелой работы для разработчика, а при дальнейшем изучении компонента вы найдете еще больше полезных функций и вариантов использования.

Изображения в CMS без головы

При использовании такой CMS, как Cosmic, мы получаем несколько замечательных функций, которые помогают нам хранить наши изображения в одном месте, и при этом мы можем обслуживать эти изображения через Cosmic API и глобальную CDN. Это означает, что наши изображения будут храниться не на одном сервере, а на группе географически распределенных и взаимосвязанных серверов. Эти серверы будут кэшировать изображения из ближайшего к пользователю сетевого расположения, чтобы ускорить загрузку страниц.

Почему все это имеет значение? Для удобства пользователей. По мере развития современного интернета мы находим все более совершенные решения, которые уменьшают размер медиафайлов, используют неблокирующие технологии и доносят содержимое вашего сайта до пользователя гораздо быстрее, чем когда-либо прежде. Это приводит к повышению коэффициента удержания потребителей, улучшению коэффициента конверсии и глобально единообразному опыту для пользователей.

Получение данных из нашего космического ведра

Если вы хотите проследить за этим конкретным примером использования, вы можете установить шаблон приложения Developer Portfolio и клонировать репозиторий GitHub.

Сначала мы должны получить данные из нашего Cosmic Bucket в наш проект с помощью пакета Cosmic NPM.

const Cosmic = require('cosmicjs')
const api = Cosmic()
const bucket = api.bucket({
  slug: process.env.COSMIC_BUCKET_SLUG,
  read_key: process.env.COSMIC_READ_KEY,
})
export async function getAllPosts() {
  const params = {
    query: { type: 'posts' }
    props: 'title,slug,metadata',
    sort: '-created_at',
  }
  const data = await bucket.getObjects(params)
  return data.objects
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Мы создаем асинхронную функцию для вызова Cosmic API и получения всех «постов» из нашего Cosmic Bucket, установив параметры запроса на «type: «posts» (имя нашего объекта posts в Cosmic).

Удаленная загрузка изображений

В приборной панели Cosmic мы можем получить доступ к изображениям, которые мы загрузили на Cosmic CDN, просто перейдя в папку media. Оттуда у нас есть несколько опций, таких как захват URL, imgix URL и добавление метаданных к изображению, таких как alt-текст.

Для статических изображений мы всегда можем установить ‘src’ в компоненте Image на определенный URL. На панели Cosmic перейдите в папку ‘media’ и на одном из загруженных изображений нажмите на значок шестеренки. Нажмите на выбор ‘URL’ или ‘imgix URL’ и скопируйте и вставьте ссылку изображения.

В коде это будет выглядеть примерно так:

<Image
  src={'https://imgix.cosmicjs.com/87625240-0acb-11ed-b7be-d956591ad437-design-systems-tailwind.png'}
  alt={'Cover image for my article'}
  layout="responsive"
  width={1200}
  height={640}
  priority
/>
Войти в полноэкранный режим Выйти из полноэкранного режима

В реальности мы можем использовать несколько статических удаленных URL для компонента Next Image в проекте, хотя чаще всего мы будем использовать статический импорт (изображения, хранящиеся локально в каталоге проекта) или динамические URL из headless CMS.

В нашем примере мы будем загружать изображения из записей блога. Cosmic позволяет легко сделать это, так как при создании нового объекта в Cosmic вы можете настроить Metafields объекта, чтобы он содержал метаполе изображения. В результате, создав новую статью, пользователь сможет загрузить изображение в Cosmic CDN и прикрепить его к записи блога одним движением.

Кодирование решения

На страницах ‘[slug]’ мы можем получить посты по их slug и запросить метаданные. Мы используем getStaticProps и getStaticPaths для получения динамических постов.

// /src/posts/[slug].jsx
export async function getStaticProps({ params }) {
  const data = await getPostAndMorePosts(params.slug, preview)
  return {
    props: {
      post: {
        ...data.post,
        content,
      },
    },
  }
}

export async function getStaticPaths() {
  const allPosts = (await getAllPostsWithSlug()) || []
  return {
    paths: allPosts.map(post => `/posts/${post.slug}`),
    fallback: true,
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь давайте передадим данные в компонент Next Image для заголовка записи блога.

// /src/posts/[slug].jsx
import Image from 'next/image'

const Post = ({ post, preview }) => {
  const router = useRouter()
  if (!router.isFallback && !post?.slug) {
    return <PageNotFound />
  }
  return (
    <div className="relative w-full my-4 pb-[55%]">
       <Image
          src={post.metadata.cover_image.imgix_url}
          quality={60}
          alt={`Cover image for ${title}`}
          layout="fill"
          objectFit="cover"
          priority
       />
    </div>
  )
}
export default Post
Вход в полноэкранный режим Выход из полноэкранного режима

Место для размещения

Чтобы добавить место для удаленных изображений, мы можем использовать запросы imgix, чтобы запросить версию изображения с низким ресурсом. Это изображение очень маленькое, сжатое и размытое, чтобы обеспечить очень маленький размер файла. Сначала мы установим параметр placeholder в ‘blur’ и передадим специальный URL в параметр blurDataURL.

<Image
  src={post.metadata.cover_image.imgix_url}
  quality={60}
  alt={`Cover image for ${title}`}
  layout="fill"
  objectFit="cover"
  placeholder="blur"
  blurDataURL={`${post.metadata.cover_image.imgix_url}?auto=format,compress&q=1&blur=500&w=2`}
  priority
/>
Вход в полноэкранный режим Выход из полноэкранного режима

Результат

Оптимизация производительности

С помощью Cosmic мы можем оптимизировать наши изображения в приборной панели, добавляя такие вещи, как указание качества, размеров и сжатия до того, как изображения будут запрошены. Для этого перейдите в метаполе Cover Image и нажмите кнопку Settings. Затем в модальном окне настроек мы можем добавить сжатие, которое уменьшит размер файла и улучшит загрузку страницы. Так же, как и в случае с заполнителем, который мы использовали ранее, это добавит параметры запроса imgix в URL imgix.

Идеальное решение

Хотя идеального решения не существует, компонент Next Image делает большую часть работы за нас, предоставляя функции, позволяющие нам точно настроить наши изображения для достижения оптимальных размеров и производительности на всех устройствах и скоростях сети, что в конечном итоге приводит к улучшению качества работы посетителей нашего сайта.

Оцените статью
devanswers.ru
Добавить комментарий