如何启用下一个JS "next/future/image"？

Question

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

我将package.json的Next.js版本升级到"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'

For Next v12.3 users(就像这个问题的作者)

你不需要添加任何配置使用future/image。未来的图像现在是稳定的。只需通过导入

直接使用它

import Image from 'next/future/image'

实际上，向配置中添加images属性会导致错误，因为配置模式已经更新。所以不这样做.

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

Answer 2

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

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

Answer 3

我目前正在使用NextJS版本12.3.1，如果我在next.config.js中启用它，那么我在终端上得到一个丑陋的警告。所以最好只设置import Image from "next/future/image"而不添加配置以避免警告。希望其他使用12.3.1的用户发现这个有用(使用future/image可以摆脱讨厌的包装器div/span)

警告我看到配置在适当的地方:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - Invalid next.config.js options detected: 
- The value at .experimental has an unexpected property, images, which is not in the list of allowed properties (adjustFontFallbacks, amp, appDir, browsersListForSwc, cpus, craCompat, disableOptimizedLoading, disablePostcssPresetEnv, esmExternals, externalDir, fallbackNodePolyfills, forceSwcTransforms, fullySpecified, gzipSize, incrementalCacheHandlerPath, isrFlushToDisk, isrMemoryCacheSize, largePageDataBytes, legacyBrowsers, manualClientBasePath, modularizeImports, newNextLinkBehavior, nextScriptWorkers, optimizeCss, optimisticClientCache, outputFileTracingRoot, pageEnv, profiling, proxyTimeout, runtime, scrollRestoration, serverComponents, sharedPool, sri, swcFileReading, swcMinify, swcMinifyDebugOptions, swcPlugins, swcTraceProfiling, urlImports, workerThreads).
See more info here: https://nextjs.org/docs/messages/invalid-next-config
warn  - You have enabled experimental feature (images) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

Answer 4

在next js 13中它是默认启用的

<div className="relative rounded-md h-full p-3 border-2">
<Image 
width="0"
height="0"
sizes="100vw"
className="w-full h-full top-0 left-0 object-cover rounded-2xl"
src="https://gbpay.uk/assets/images/gbpay-how-it-works.png" 
/>
</div>