next image export optimizer
v1.18.0
정적 내보내기 기능을 사용하여 다음.js advanced <이미지/> 구성 요소를 사용하십시오. 다음으로 모든 정적 이미지를 다음 단계에서 다음 단계에서 최적화합니다. JS 정적 내보내기.
경로 문자열을 사용하는 이미지 : (예 : SRC = "/profile.png")
공개/이미지 와 같은 공개 폴더 내부의 폴더에 이미지를 배치
정적 가져 오기 이미지의 경우 : (예 : SRC = {profileImage})
프로젝트의 어느 곳에서나 이미지를 배치 할 수 있습니다. 이미지는 최적화되어 내보내기 폴더에 복사됩니다.
원격 이미지의 경우 : (예 : src = "https://example.com/image.jpg")
원격 이미지의 섹션을 참조하십시오.
npm install next-image-export-optimizer
# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer
다음을 다음에 추가하십시오 next.config.js . TypeScript Projects에 next.config.ts 사용할 수도 있습니다. :
// next.config.js
module . exports = {
output : "export" ,
images : {
loader : "custom" ,
imageSizes : [ 16 , 32 , 48 , 64 , 96 , 128 , 256 , 384 ] ,
deviceSizes : [ 640 , 750 , 828 , 1080 , 1200 , 1920 , 2048 , 3840 ] ,
} ,
transpilePackages : [ "next-image-export-optimizer" ] ,
env : {
nextImageExportOptimizer_imageFolderPath : "public/images" ,
nextImageExportOptimizer_exportFolderPath : "out" ,
nextImageExportOptimizer_quality : "75" ,
nextImageExportOptimizer_storePicturesInWEBP : "true" ,
nextImageExportOptimizer_exportFolderName : "nextImageExportOptimizer" ,
nextImageExportOptimizer_generateAndUseBlurImages : "true" ,
nextImageExportOptimizer_remoteImageCacheTTL : "0" ,
} ,
} ; package.json 에서 빌드 명령을 업데이트하십시오
{
- "build": "next build",
+ "build": "next build && next-image-export-optimizer"
}<image /> 구성 요소를 <ExportEdimage /> 구성 요소로 바꾸십시오.
예:
// Old
import Image from "next/image" ;
< Image
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ;
// Replace with either of the following:
// With static import (Recommended)
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" /> ;
// With dynamic import
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ; 원격 이미지의 경우 SRC를 내보내기 구성 요소에서 HTTP 또는 HTTPS로 시작하는 문자열로 지정해야합니다.
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ; 빌드 시간에 이미지 최적화가 올바르게 작동하려면 프로젝트의 루트 디렉토리 ( next.config.js 도 저장된 위치)의 impreamtoptimizedimages.js 라는 파일에 모든 원격 이미지 URL을 지정해야합니다. 파일은 원격 이미지의 URL을 포함하는 다양한 문자열을 내보내야합니다. 그러한 배열의 약속을 반환하는 것도 지원됩니다.
예:
// remoteOptimizedImages.js
module . exports = [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] ; // Or with a promise
module . exports = new Promise ( ( resolve ) =>
resolve ( [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] )
) ;
// Or with an async API call
module . exports = fetch ( "https://example.com/api/images" ) . catch ( ( error ) => {
console . error ( error ) ;
return [ ] ; // return an empty array in case of error
} ) ;빌드 시점에서 이미지는 캐시에서 다운로드하거나 읽습니다. 이미지 URL은 내보낸 이미지 구성 요소의 최적화 된 이미지 URL로 대체됩니다.
nextImageExportOptimizer_remoteImageCacheTTL 환경 변수를 next.config.js 파일에서 설정하여 몇 초 안에 캐시의 시간을 지정할 수 있습니다. 기본값은 0 초입니다 (이미지가 변경되었으므로).
다음으로 설정하십시오.
사용자로부터 원격 이미지 URL을 숨기려면 ExportEdimage 구성 요소의 OverrideRC Prop를 사용할 수 있습니다. 이렇게하면 이미지 태그의 SRC 속성을 OrederidesRC Prop의 값으로 바꿉니다.
OverridesRC Props를 사용할 때 최적화 된 이미지가 아직 생성되지 않으면 이미지 구성 요소가 원래 이미지 URL로 돌아갈 수 없음을 조심하십시오. 이로 인해 이미지 링크가 끊어집니다.
다음에 다음을 next.config.js 에 추가하여 원격 최적화 된 이미지의 파일 이름을 사용자 정의 할 수 있습니다.
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ; Next.js 프로젝트가 명령을 실행중인 루트 디렉토리에 있지 않은 경우, 예를 들어 Monorepo를 사용할 때 next.config.js 의 위치를 스크립트의 인수로 지정할 수 있습니다.
"export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "환경 변수를 통해 출력 폴더 경로를 지정합니다.
// next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }또는 주장을 대본에 전달함으로써 :
"export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder " 앱을 도메인 하위 폴더에 배포하려면 next.config.js 파일에서 Basepath를 설정할 수 있습니다.
module . exports = {
basePath : "/subfolder" ,
} ;ExportEdimage 구성 요소에는 Basepath를 구성 요소로 전달하는 데 사용할 수있는 Basepath Prop가 있습니다.
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage
src = { testPictureStatic }
alt = "Static Image"
basePath = "/subfolder"
/> ; 작고 흐릿한 자리 표시 자 이미지의 자동 생성을 원하지 않으면 nextImageExportOptimizer_generateAndUseBlurImages 환경을 false 로 설정하고 <ExportedImage /> 구성 요소에서 empty placeholder 소품을 설정하십시오.
내보내기 폴더 이름의 이름을 바꾸려면 nextImageExportOptimizer_exportFolderPath 환경을 원하는 폴더 이름으로 설정하십시오. 기본값은 nextImageExportOptimizer 입니다.
기본적으로 이미지는 Webp 형식으로 저장됩니다.
Webp 형식을 사용하지 않으려면 nextImageExportOptimizer_storePicturesInWEBP 환경을 false 로 설정하십시오.
<exportedImage /> 구성 요소는 다음 <이미지 /> 구성 요소 주변의 래퍼입니다. 사용자 정의 로더 기능을 사용하여 원본 이미지의 다양한 해상도에 대한 SRCSET을 생성합니다. 브라우저는 현재 뷰포트 크기에 따라 올바른 크기를로드 할 수 있습니다.
이미지 변환 작업은 해시를 사용하여 이미지가 이미 최적화되었는지 여부를 결정하므로 최적화됩니다. 이런 식으로 이미지는 빌드 명령이 실행될 때마다 한 번만 최적화됩니다.
최적화 된 이미지가 개발 모드에서 아직 생성되지 않으면 <ExportedImage /> 구성 요소가 원래 이미지로 돌아갑니다. 내보내는 정적 반응 앱에서 응답 형 이미지는 SRCSET으로 제공되며 브라우저에서 동적으로로드됩니다.
정적 가져 오기 메소드는 클라이언트에게 원래 이미지 크기에 대해 알려 주므로 권장됩니다. 원래 이미지 너비보다 큰 폭이 요청되면 장치 크기 배열에서 다음으로 큰 이미지 크기 ( next.config.js 에 지정 됨)는 SRCSET 속성 생성에 사용됩니다. 이미지를 경로 문자열로 지정하면이 라이브러리는 원래 이미지 크기보다 큰 장치 크기 배열에서 각 이미지 크기에 대한 원본 이미지의 복제물을 생성합니다.
unoptimized 소품을 사용하여 원래의 최적화되지 않은 이미지를 출력 할 수 있습니다. 예:
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = { testPictureStatic }
alt = "Original, unoptimized image"
unoptimized = { true }
/> ; 레거시 이미지 구성 요소 next/legacy/image 사용할 수 있습니다.
import ExportedImage from "next-image-export-optimizer/legacy/ExportedImage" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" layout = "fixed" /> ;애니메이션 이미지 : .gif 및 애니메이션 .webp 이미지를 사용할 수 있습니다. Next-Image-Export-Optimizer는 애니메이션 이미지를 자동으로 최적화하고 다양한 해상도에 대한 SRCSET을 생성합니다.
변수 NextImageExportOptimizer_StorePicturesInwebp를 True로 설정하면 애니메이션 이미지가 .webp 형식으로 변환되어 파일 크기를 크게 줄일 수 있습니다. 애니메이션 PNG 이미지는이 패키지에서 지원되지 않습니다.
reactapp.dev/next-image-export-optimizer 에서이 라이브러리 사용의 실시간 예제를 볼 수 있습니다.
경고 버전 1.0.0은 깨진 변화입니다. 다음 13.0.0에 도입 된 변경 사항을 따르는
next/image구성 요소를next/future/image로 대체합니다. 다음 12 이하를 사용하는 경우 버전 0.17.1을 사용하십시오.
