@stefanprobst/next-image

next-image

Adds a Webpack loader for importing .jpg and .png images to the Next.js config.

How to use

First, add the loader to the Next.js configuration in next.config.js:

const withImages = require('@stefanprobst/next-image')()

const nextConfig = {
  /** ... */
}

module.exports = withImages(nextConfig)

In your components, images can then be imported:

import Logo from '@/assets/icons/logo.png'

export default function Page() {
  return (
    <h1>
      <img src={Logo} alt="Logo" /> How cool!
    </h1>
  )
}

Options

This package uses url-loader, which can be configured with the limit option.

const createImagePlugin = require('@stefanprobst/next-image')

const withImages = createImagePlugin({
  limit: 8192,
})

const nextConfig = {
  /** ... */
}

module.exports = withImages(nextConfig)

Typescript

To make typescript understand .jpg and .png imports, add the following to next-env.d.ts:

/// <reference types="@stefanprobst/next-image" />

SVG images

For importing .svg images, use @stefanprobst/next-svg