클라우드 제공업체에서 next/image를 사용하는 방법

사이트에서 next/image 구성 요소를 사용하면 반응형 이미지를 빠르고 쉽게 추가할 수 있습니다. 클라우드 기반 자산 관리 플랫폼을 사용하는 경우 최상의 성능을 얻고 제공될 수 있는 기능의 이점을 얻으려면 올바르게 구성해야 합니다.

이전 프로젝트에서 반응형 이미지 구현이 예상대로 작동하지 않았기 때문에 어떻게 작동해야 하는지 더 자세히 알아보기로 했습니다. 볼 수 있다면 next.js 애플리케이션에 Image 구성 요소를 추가하고, 자산 관리 공급자를 확인하도록 구성하고, 이미지를 활용하기 위해 사용자 정의 로더를 추가하는 과정을 안내하는 비디오를 만들었습니다. 웹 서버가 모든 작업을 수행하는 대신 제공되는 기능.



당신이 그것에 대해 더 많이 읽고 싶다면 이것이 내가 취한 단계입니다.

먼저 Visual Studio Code의 터미널에서 yarn create next-app를 사용하고 기본값을 수락할 수 있습니다. 그러면 애플리케이션이 포함된 my-app이라는 새 폴더가 생성되었습니다. 그런 다음 cd my-app를 실행한 다음 code .(또는 현재 창의 경우 code . -r)를 실행할 수 있습니다.

그런 다음 index.js를 변경하여 대부분의 콘텐츠를 제거하고 간단한 이미지를 추가하여 다음을 남깁니다.

<main className={styles.main}>
  <div className={styles.hero}> <img alt="Styled photo of a retro microphone" className={styles.heroImage} src="/retro-mic.jpg" />
    <h1 className={styles.title}> Welcome to <a href="https://nextjs.org">Next.js!</a> </h1>
    <p className={styles.description}> Get started by editing <code className={styles.code}>pages/index.js</code> </p>
  </div>
</main>

CSS에 추가하여 약간의 스타일을 지정하십시오.

/* modified to add a position and z-index */ 
.title, .description { 
  position: relative; 
  text-align: center; 
  z-index: 0; } 

/* these two are new to make something look acceptable */ .hero { 
  margin: 1rem; 
  padding: 1.5rem; 
  text-align: left; 
  color: inherit; 
  text-decoration: none; 
  border: 1px solid #eaeaea; 
  border-radius: 10px; 
  transition: color 0.15s ease, border-color 0.15s ease; 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-wrap: wrap; 
  max-width: 800px; 
  overflow: hidden; } 

.heroImage { 
  position: absolute; 
  top: 0; 
  left: 0; 
  min-height:100%; 
  width: 100%; 
  height:auto; 
  object-fit: cover; 
  mix-blend-mode:color-burn; 
  z-index: -1; 
  opacity: 0.25; }

이것은 우리에게 볼 만한 것을 제공합니다:



이 예제에 대한 간단한 페이지
페이지가 로드될 때 개발 도구를 보면 다음과 같이 표시됩니다.



Chrome 개발자 도구의 이미지에 대한 네트워크 트래픽
좋습니다. 하지만 모바일로 내려가도 동일한 크기와 300kB가 조금 넘는 동일한 이미지를 얻습니다.



Chrome 개발자 도구의 모바일용 이미지 크기
몇 가지 기본 서식을 추가하고 next/image 태그의 이미지 구성 요소를 추가하면 좀 더 나은 결과를 얻을 수 있습니다.
index.js에서 이 작업을 수행하면 영웅은 다음과 같이 보입니다.

<div className={styles.hero}>
  <Image layout="fill" alt="Styled photo of a retro microphone" className={styles.heroImage} src="/retro-mic.jpg" />
  <h1 className={styles.title}> Welcome to <a href="https://nextjs.org">Next.js!</a> </h1>
  <p className={styles.description}> Get started by editing <code className={styles.code}>pages/index.js</code> </p> </div>

그런 다음 next.config.js에서 기본 구성을 추가하기 위해 이미지 요소를 추가합니다.

const nextConfig = { 
  reactStrictMode: true, 
  images: { 
    loader: 'default', 
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], 
    formats: ['image/webp'], 
  }, 
}

앱을 다시 시작하면 이제 크기를 조정할 때 새 이미지가 생성되고 형식이 webp인 것을 볼 수 있습니다.



개발 도구에서 이미지 크기가 더 합리적이라는 것을 알 수 있습니다.



.next/cache/images를 보면 생성된 이미지도 볼 수 있습니다.



훌륭하지만 CMS 또는 DAM에서 이러한 이미지를 가져오고 싶습니다. 그렇게 하려면 도메인 설정을 사용하여 이미지를 가져올 수 있는 위치를 next/image에 알려야 합니다.

const nextConfig = { 
  reactStrictMode: true, 
  images: { 
    loader: 'default', 
    domains: ['assets-us-01.kc-usercontent.com'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], 
    formats: ['image/webp'], 
  }, 
}

이제 원격 이미지의 이미지 소스를 업데이트할 수 있습니다(이 경우 Kontent by Kentico의 자산에서 가져옴).

<div className={styles.hero}>
  <Image layout="fill" alt="Styled photo of a retro microphone" className={styles.heroImage} src="https://assets-eu-01.kc-usercontent.com/36a6ba89-afdc-013f-dda5-806bb0d472c1/f125b960-fd12-42fb-8656-124600d6d61f/retro-mic.jpg" />
  <h1 className={styles.title}> Welcome to <a href="https://nextjs.org">Next.js!</a> </h1> 
  <p className={styles.description}> Get started by editing <code className={styles.code}>pages/index.js</code> </p> 
</div>

응용 프로그램을 다시 로드하고 캐시 디렉터리를 보면 파일의 크기가 조정되고 최적화된 버전으로 이미지가 다시 생성된 것을 볼 수 있습니다. CMS 또는 DAM에 이미 이미지 크기를 조정할 수 있는 기능이 있고 전 세계적으로 분산된 CDN이 있을 수 있으므로 서버에 대한 요청을 줄이고 사용자 지정 로더를 믹스에 추가하여 CDN이 작업을 수행하도록 할 수 있습니다.

즉시 사용할 수 있는 이미지 구성 요소 기본 로더 지원에는 Vercel, Squoosh(기본값), Imgix, Cloudinary 및 Akamai가 포함됩니다. 우리 자신의 것을 만드는 것은 우리가 필요로 하는 것에 따라 간단한 작업이 될 수 있습니다.

index.js에 다음을 추가하여 Kontent에 정말 간단한 로더를 추가할 수 있습니다.

const kontentLoader = ({ src, width, quality }) => { 
  return `${src}?w=${width}&q=${quality || 75}&auto=format` }

그런 다음 loader={kontentLoader}를 추가하여 이미지를 약간 변경합니다.

<div className={styles.hero}>
  <Image loader={kontentLoader} layout="fill" alt="Styled photo of a retro microphone" className={styles.heroImage} src="https://assets-eu-01.kc-usercontent.com/36a6ba89-afdc-013f-dda5-806bb0d472c1/f125b960-fd12-42fb-8656-124600d6d61f/retro-mic.jpg" />
  <h1 className={styles.title}> Welcome to <a href="https://nextjs.org">Next.js!</a> </h1>
  <p className={styles.description}> Get started by editing{' '} <code className={styles.code}>pages/index.js</code> </p> 
</div>

이제 앱을 다시 시작하면 개발 도구의 네트워크 탭에 로드되는 이미지가 계속 표시되지만 이미지가 소스에서 직접 요청되기 때문에 캐시 폴더에는 아무것도 추가되지 않습니다. 💪

유용한 링크

next/image

next/image loaders

Kontent by Kentico - Image Transformations