{"library":"next-export-optimize-images","title":"Build-time Image Optimization for Next.js Exports","description":"next-export-optimize-images is a utility for Next.js applications designed to optimize images during the build process, specifically for projects utilizing `next export` to generate static sites. It brings the benefits of Next.js's built-in image optimization, typically available only in server-rendered or deployed environments, to static exports. The library, currently at v4.7.0, maintains an active release cadence with several updates per year, focusing on new features, bug fixes, and compatibility improvements, such as adding chunking for image processing and support for Node.js v22. Key differentiators include its use of `sharp` for fast image processing, the ability to convert image formats (e.g., PNG to WebP), local downloading of external images, and a robust caching mechanism to prevent redundant optimizations. It fully supports TypeScript and Next.js App Router, providing a comprehensive solution for high-performance static websites.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install next-export-optimize-images"],"cli":{"name":"next-export-optimize-images","version":null}},"imports":["import { withExportImages } from 'next-export-optimize-images'","import { RemoteImage } from 'next-export-optimize-images'","import type { Config } from 'next-export-optimize-images'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// next.config.mjs\nimport { withExportImages } from 'next-export-optimize-images';\n\nconst nextConfig = {\n  output: 'export', // Essential for static export\n  images: {\n    // Strongly recommended to set to true to prevent conflicts with Next.js's built-in loader\n    unoptimized: true,\n  },\n  // Optional: Plugin-specific configuration\n  exportOptimizeImages: {\n    quality: 75,\n    formats: ['webp', 'jpeg'],\n  },\n};\n\nexport default withExportImages(nextConfig);\n\n// pages/index.tsx (or app/page.tsx)\nimport Image from 'next/image';\n\nexport default function HomePage() {\n  return (\n    <div>\n      <h1>Optimized Image Example</h1>\n      {/* Place a local image in your `public` directory, e.g., `public/my-image.jpg` */}\n      <Image\n        src=\"/my-image.jpg\"\n        alt=\"A local image optimized at build time\"\n        width={600}\n        height={400}\n        priority // Ensures it's optimized early\n      />\n      <p>Run `npm run build && npm run export` to generate optimized images in your static output.</p>\n    </div>\n  );\n}","lang":"typescript","description":"Demonstrates how to configure `next-export-optimize-images` in `next.config.mjs` and use `next/image` for local assets for build-time optimization in a Next.js static export.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}