How to enable NextJS "next/future/image"?

Question

I'm trying to use Next.js next/future/image experimental component.

I upgraded the Next.js version in package.json to "next": "^12.2.0".

Here's my next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
    strictMode: true,
    experimental: {
        images: {
            allowFutureImage: true,
        },
    },
    images: {
        domains: ['firebasestorage.googleapis.com',],
    },
};

module.exports = nextConfig;

It doesn't allow me to use this feature. Here's the error message in the browser console:

Error: The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include `experimental: { images: { allowFutureImage: true } }` in your next.config.js file.

Answer 1

For Next v13 users:

I believe next/future/image is now the default Image component. So no additional work necessary! Just import and use

import Image from 'next/image'

For Next v12.3 users(like the author of this question)

You don't need to add anything to the config to use future/image. The future image is now stable. Just use it directly by importing

import Image from 'next/future/image'

In fact, adding an images property to the config will cause an error, since the config schema has been updated. So don't do that.

// next.config.js

module.exports = {
  experimental: {
    images: { // This will cause an error
      allowFutureImage: true,
    },
  },
}