efault loader is not compatible with `next export`.

Why is the default loader not compatible with next export?#

If you are using Next.js, you might have encountered an issue where the default loader is not compatible with `next export`. This error message appears when you run `next export`:

Error: Cannot use the default loader because your version of Next.js is newer than 9.3.0. Please upgrade `next` and `next-compose-plugins` to the latest version.

This error occurs because the default loader in Next.js is not designed to work with `next export`. `next export` is a command that generates a static version of your website, so it requires a different set of loaders than the ones used during development.

How to fix the issue?#

The solution to this issue is to use the `next-compose-plugins` package to add the necessary plugins for `next export`. Here are the steps:

• Install `next-compose-plugins` package:

npm install --save-dev next-compose-plugins

• Create a new file called `next.config.js`:

const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

module.exports = withPlugins([
  [optimizedImages, {
    /* config for next-optimized-images */
  }],
]);

This will add the necessary plugins for `next export` to work.

Alternative solution#

If you prefer not to use `next-compose-plugins`, you can also manually add the necessary plugins to your `next.config.js`. Here's an example:

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Add the necessary loaders here
    config.module.rules.push({
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            publicPath: '/_next',
            name: 'static/media/[name].[hash].[ext]',
          },
        },
      ],
    });

    return config;
  },
};

This example adds the `file-loader` plugin to handle image assets.

Conclusion#

The default loader in Next.js is not compatible with `next export`, but it can easily be fixed using `next-compose-plugins` or by manually adding the necessary loaders to your `next.config.js` file.