yarn add -D next-export-optimize-images

yarn add -D next-export-optimize-images

2 - sharp에 플러그인을 추가합니다.

const withExportImages = require('next-export-optimize-images')

module.exports = withExportImages({
  // write your next.js configuration values.
})

3 - next.config.js에서 빌드 명령을 변경합니다.

{
-  "export": "next build && next export",
+  "export": "next build && next export && next-export-optimize-images",
}

4 - 평소와 같이 package.json을 사용합니다.

import Image from 'next/image'

<Image src="/images/img.png" width={1920} height={1280} alt="" />
// Or import as follows
<Image src={require('./img.png')} alt="" />

구성

필요에 따라 기본 동작을 변경할 수 있습니다.
루트에 next/image을 생성합니다.

/**
 * @type {import('next-export-optimize-images').Config}
 */
const config = {
  // your configuration values.
}

module.exports = config

자세한 내용은 this document site을 방문하십시오.

사용 예

다음은 몇 가지 사용 예입니다.
그러나 기본적으로 export-images.config.js 의 사용법과 동일하므로 자세한 내용은 공식 문서 here 을 참조하십시오.

다음/이미지 설정

<Image placeholder="blur" src="/images/img.png" width={1920} height={1280} alt="" />
// Or import as follows
<Image placeholder="blur" src={require('./img.png')} alt="" />

자리 표시자를 레이아웃으로 설정

<Image layout="fill" objectFit="cover" src="/images/img.png" width={1920} height={1280} alt="" />

외부 이미지를 로컬로 다운로드

이 기능은 이 라이브러리의 고유한 동작입니다.

<Image src="https://next-export-optimize-images.vercel.app/og.png" width="1280" height="640" alt="" />

프로덕션에서는 다음과 같이 렌더링됩니다. (중요한 부분만 표시합니다.)

<img
  srcset="/_next/static/chunks/images/og_1920_75.png 1x, /_next/static/chunks/images/og_3840_75.png 2x"
  src="/_next/static/chunks/images/og_3840_75.png"
/>

개발 중에는 로컬 이미지와 마찬가지로 최적화가 수행되지 않습니다.
또한 로컬로의 다운로드는 수행되지 않습니다.

<img
  srcset="https://next-export-optimize-images.vercel.app/og.png?width=1920 1x, https://next-export-optimize-images.vercel.app/og.png?width=3840 2x"
  src="https://next-export-optimize-images.vercel.app/og.png?width=3840"
/>

비교

next-image-export-optimizer

https://github.com/Niels-IO/next-image-export-optimizer

이 라이브러리는 우리 라이브러리와 매우 유사하므로 이 라이브러리도 사용해 보는 것이 좋습니다.

당사 라이브러리와 간단히 비교해 보면 다음과 같은 특성이 나타납니다.



다음 내보내기 최적화 이미지
다음 이미지 내보내기 최적화 도구

fill에 대한 모든 옵션을 사용할 수 있습니다.
○
△ *1

이미지 폴더 지정
특별히 없음(무료)
지정된 디렉토리에서만

사용하는 이미지만 최적화
○
× *2
next/image 지원
×
○


*1: src 속성에는 문자열만 지정할 수 있습니다.
*2: layout="intrinsic"이 있는 다양한 너비의 이미지(현재 1x 및 2x 이미지로 충분하므로).

결론

Next.js는 웹 애플리케이션 개발뿐만 아니라 정적 사이트에서도 사용할 수 있는 매우 사용하기 쉬운 도구입니다.
Next.js는 사용하기 너무 쉬워 정적 사이트에도 사용하고 싶을 것입니다.
이미지 최적화에 문제가 있다면 이 라이브러리를 이용해주세요!

이 라이브러리에 문제가 있거나 기능에 대한 제안이 있으면 주저하지 말고 다음을 통해 연락하십시오.
이슈나 내 트위터!

https://github.com/dc7290/next-export-optimize-images/issues