Go back

Next.js Image optimization error on Netlify

April 16, 2022 — 3 min read

Next.js has a built-in Image component that comes with a lot of performance optimization features when you're using it.

But a problem arises when you try to deploy your app on Netlify, an error gets triggered during the build process. This is because the image component of Next.js does not perform the image optimization process during the build, but it optimizes the images in a particular project on demand.

Take a look at the error below

Error: Image Optimization using Next.js' default loader is not compatible with 'next export'

In this article, we're going to see the various methods of fixing this error. Some of them are listed below.

Now that you have seen the various methods of solving this error. Let's get into the full details below.

Using the 'next start' command

When you install a Next.js project, there are three commands that you can use to get started. See them below:

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start"
}

When you type npm run dev or npm dev in your terminal, it starts up a development server for you to test and build your app. When you type npm run build, the command builds and exports your project for you.

The next start command, when it is initialized, starts up a dev server at localhost:3000 and simultaneously starts the Image Optimization API

Use the next-optimized-image npm package

This package helps you optimize images in your Next.js project. You can install it with the command below

npm i next-optimized-images

You can enable the plugin by modifying your next.config.js file.

const withPlugins = require('next-compose-plugins')
const optimizedImages = require('next-optimized-images')
 
module.exports = withPlugins([
  [
    optimizedImages,
    {
      // all other plugins will go here
    },
  ],
])

Kindly go over their documentation on how to configure the plugins for this to work

Configure a third party loader

This option should be a last resort, only if you want to customize your image optimization process, instead of using Next.js' image optimization API.

Next.js comes with some built-in cloud provider's loaders and you can configure them in your next.config.js file.

module.exports = {
  images: {
    loader: 'cloudinary',
    path: '/',
  },
}

The other options are Imgix and Akamai

If you want to completely opt out of the image optimization process, and still retain the awesome features that next/image provides, you can use the custom loader option.

In your next.config file, you'll set loader to "custom"

module.exports = {
  images: {
    loader: 'custom',
  },
}
import Image from 'next/image'
 
// opt-out of image optimization, no-op
const customLoader = ({ src }) => {
  return src
}
 
export default function Image(props) {
  return <Image {...props} loader={customLoader} />
}

wrapping up

Alternatively, you can avoid this error completely, by deploying your projects on Vercel, the company behind the Next.js framework, or better still, just add this to your next.config.js file

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

Thank you for reading this article, I hope you've found it helpful.

In this article