Go back
Next.js Image optimization error on Netlify
Apr 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:
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
You can enable the plugin by modifying your next.config.js
file.
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.
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"
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
Thank you for reading this article, I hope you've found it helpful.