next-images

What is next-images?

The next-images npm package is a plugin for Next.js that allows you to import images in your JavaScript and TypeScript files. It simplifies the process of handling images in a Next.js project by enabling you to import image files directly into your components.

What are next-images's main functionalities?

Importing Images

This feature allows you to import image files directly into your JavaScript or TypeScript files. The imported image can then be used as a source in an <img> tag or as a background image in CSS.

import myImage from './myImage.png';

export default function MyComponent() {
  return <img src={myImage} alt="My Image" />;
}

Custom Configuration

This feature allows you to customize the configuration of the next-images plugin. You can specify which file extensions to handle and modify the Webpack configuration as needed.

const withImages = require('next-images');
module.exports = withImages({
  fileExtensions: ['jpg', 'jpeg', 'png', 'gif'],
  webpack(config, options) {
    return config;
  }
});

Other packages similar to next-images

next-optimized-images

The next-optimized-images package is another plugin for Next.js that optimizes images and allows you to import them directly into your components. It provides additional features like image optimization, responsive images, and support for various image formats. Compared to next-images, next-optimized-images offers more advanced image optimization capabilities.

next-image-loader

The next-image-loader package is a custom Webpack loader for handling images in Next.js projects. It allows you to import images and provides options for optimizing and transforming them. While it offers similar functionality to next-images, it requires more manual configuration and does not integrate as seamlessly with Next.js.

README

Next.js + Images

Import images in Next.js (jpg, jpeg, svg, png, ico and gif images)

Features

• Load images from local computer
• Load images from remote (CDN for example) by setting assetPrefix
• Inline small images to Base64 for reducing http requests
• Adds a content hash to the file name so images can get cached

If you also want image minimalization and optimization have a look at next-optimized-images

Installation

npm install --save next-images

or

yarn add next-images

Usage

Create a next.config.js in your project

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

And in your components or pages simply import your images:

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>

or

import img from './my-image.jpg'

export default () => <div>
  <img src={img} />
</div>

Options

assetPrefix

You can serve remote images by setting assetPrefix option.

Example usage:

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  assetPrefix: 'https://example.com',
  webpack(config, options) {
    return config
  }
})

InlineImageLimit

Inlines images with sizes below inlineImageLimit to Base64. Default value is 8192.

Example usage:

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  inlineImageLimit: 16384,
  webpack(config, options) {
    return config
  }
})