next-images

@opensourceframework/next-images

Compatibility-first image imports for Next.js applications

Important

This is a maintained fork of the original next-images package for teams that want to keep the existing plugin workflow and switch package names with minimal app changes. If next/image fits your app, you can use it, but this package is still actively maintained as a compatibility option.

Why This Fork?

The original package is no longer actively maintained. This fork provides:

• 🔄 Drop-In Migration: Keep the classic next-images plugin shape and image import workflow
• 🔒 Active Maintenance: Security fixes and compatibility work for modern Next.js environments
• 📦 Modern Tooling: Built with TypeScript, tsup, and modern build tools
• 📖 Documentation: Improved and up-to-date documentation
• 🧪 Regression Coverage: Tests for webpack rule generation and compatibility behavior

Installation

npm install @opensourceframework/next-images
# or
yarn add @opensourceframework/next-images
# or
pnpm add @opensourceframework/next-images

Migration from Original

Replace:

npm install next-images

with:

npm install @opensourceframework/next-images

Then update your next.config.js import:

const withImages = require('@opensourceframework/next-images');

Existing withImages(...) configuration can stay the same.

Usage

// next.config.js
const withImages = require('@opensourceframework/next-images');

module.exports = withImages({
  inlineImageLimit: 8192,
});

import logo from './logo.png';

export function Header() {
  return <img src={logo} alt="Company logo" />;
}

Configuration

withImages accepts the classic next-images options:

• inlineImageLimit: Max size in bytes for Base64 inlining. Set false to always emit files.
• assetPrefix: Prefix emitted asset URLs for CDN support.
• basePath: Respect a Next.js base path when building asset URLs.
• fileExtensions: Control which image extensions the loader handles.
• exclude: Skip matching files or directories.
• name: Customize emitted filename format. Default: [name]-[hash].[ext].
• esModule: Emit ES module loader output.
• dynamicAssetPrefix: Resolve the asset prefix from runtime config on the server.
• webpack: Chain custom webpack logic after the image rule is applied.

TypeScript Support

Add the type reference once in your app if needed:

/// <reference types="@opensourceframework/next-images" />

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT © OpenSource Framework Contributors

Links

• Original Package
• Issue Tracker
• Changelog