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

chy5wohz  于 2022-11-23  发布在  其他
关注(0)|答案(3)|浏览(174)

我正在尝试使用Next.js next/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 includeexperimental: { images: { allowFutureImage: true } }in your next.config.js file.

6ie5vjzr

6ie5vjzr1#

对于下一个v13用户:

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

import Image from 'next/image'

适用于Next v12.3用户(如本问题的作者)

你不需要在配置中添加任何东西来使用future/image。未来的映像现在是稳定的。只需通过导入直接使用它

import Image from 'next/future/image'

事实上,在config中添加images属性会导致错误,因为config模式已经更新了。所以不要这样做

// next.config.js

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

pwuypxnk2#

对我有效的解决方案是添加实验性规则,停止nextjs服务器并重新启动它。

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

vmpqdwk33#

我目前使用的是NextJS 12.3.1版本,如果我在next.config.js中启用它,那么我会在终端上收到一个难看的警告。所以最好只使用import Image from "next/future/image",而不添加配置,以避免警告。希望其他使用12.3.1的人会发现这一点有用(使用future/image可以去掉围绕的讨厌的 Package 器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.

相关问题