如何启用NextJS“下一个/未来/图像”？

Question

我正在尝试使用 Next.jsnext/future/image实验组件。

我将 Next.js 版本升级package.json到"next": "^12.2.0".

这是我的next.config.js文件：

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

module.exports = nextConfig;

它不允许我使用此功能。这是浏览器控制台中的错误消息：

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

对于 Next v13 用户：

我相信next/future/image现在是默认Image组件。所以不需要额外的工作！只需导入并使用

import Image from 'next/image'

对于 Next v12.3 用户（比如这个问题的作者）

您无需向配置添加任何内容即可使用future/image。未来的形象现在已经稳定了。直接导入使用即可

import Image from 'next/future/image'

事实上，images向配置添加属性会导致错误，因为配置架构已更新。所以不要这样做。

import Image from 'next/image'

Answer 2

对我有用的解决方案是添加实验规则并停止 nextjs 服务器并重新启动它。然后它就会开始工作

module.exports = {
  experimental: {
    images: {
      allowFutureImage: true,
    },
  },
}