Next.js独立模式下图片优化失效问题求助

问题描述 #

我正在构建采用standalone输出模式的Next.js项目，按教程配置后，通过node server.js启动服务器可正常运行，但图片优化功能报错：

Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly

已确认package.json中已安装sharp，且在.env中添加了NEXT_SHARP_PATH=/tmp/node_modules/sharp，但问题仍未解决。

备注：使用Windows子系统Linux（WSL），运行生产模式npm run start时无需配置.env即可正常使用图片优化，但启动standalone模式时该功能失效，配置.env也没用。

我的next.config.js配置 #

/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa")({
  dest: "public",
  register: true,
  disable: process.env.NODE_ENV === "development"
});

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: "standalone",
  images: {
    minimumCacheTTL: 2592000,
    domains: ["dzzoo94ozikw5.cloudfront.net", "lh3.googleusercontent.com", "platform-lookaside.fbsbx.com"]
  },
}

module.exports = withPWA(nextConfig)

解决方法 #

1. 强制让Next.js打包sharp到standalone目录 #

Next.js的standalone模式默认会自动追踪依赖，但sharp这类带二进制文件的包可能被遗漏。修改next.config.js，添加对应配置：

• 若使用Next.js 13+：

const nextConfig = {
  // 保留原有配置...
  experimental: {
    serverComponentsExternalPackages: ['sharp']
  }
}

• 若使用Next.js 12：

const nextConfig = {
  // 保留原有配置...
  serverExternalPackages: ['sharp']
}

2. 修正NEXT_SHARP_PATH的路径 #

在WSL环境下，standalone模式启动时，sharp的实际路径并非/tmp/node_modules/sharp：

1. 执行npm run build后，进入.next/standalone/node_modules目录，确认是否存在sharp文件夹。
2. 若存在，修改.env中的路径：
   • 相对路径：NEXT_SHARP_PATH=./node_modules/sharp
   • 绝对路径：NEXT_SHARP_PATH=/你的项目绝对路径/.next/standalone/node_modules/sharp

3. 清理依赖缓存重新构建 #

缓存可能导致依赖异常，执行以下命令：

rm -rf node_modules .next package-lock.json
npm install
npm run build

需在WSL环境下执行，避免Windows与Linux环境的依赖不一致问题。

4. 针对Azure App Service的部署调整 #

如果是部署到Azure时出现问题：

• 在应用服务的环境变量中，设置NEXT_SHARP_PATH为对应路径：Windows环境用D:\home\site\wwwroot\.next\standalone\node_modules\sharp，Linux环境用/home/site/wwwroot/.next/standalone/node_modules/sharp。
• 确保sharp在package.json的dependencies中，而非devDependencies，且部署脚本包含npm install --production。

内容的提问来源于stack exchange，提问作者Savana