Next.js 13公共文件夹静态文件无法加载问题求助

问题根源 #

你在next.config.js中配置了loader: 'akamai'，这个配置是用于生产环境部署到Akamai CDN时的设置，本地开发环境没有Akamai CDN服务，会导致图片路径解析异常，进而加载失败。

解决方案 #

方案1：区分开发/生产环境配置 #

修改next.config.js，仅在生产环境启用Akamai loader：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true
  },
  reactStrictMode: true,
  images: {
    // 仅生产环境启用Akamai CDN配置
    ...(process.env.NODE_ENV === 'production' ? {
      loader: 'akamai',
      path: '/'
    } : {})
  }
}

module.exports = nextConfig

方案2：本地开发临时注释CDN配置 #

如果不需要区分环境，本地开发时直接注释Akamai相关配置，生产部署前再恢复：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true
  },
  reactStrictMode: true,
  images: {
    // 本地开发时注释以下两行，生产部署时开启
    // loader: 'akamai',
    // path: '/'
  }
}

module.exports = nextConfig

额外验证点 #

1. 确认图片文件确实位于public文件夹根目录：public/logo-flutter-png.png，路径无层级错误
2. 你使用的<Image src={flutterImg} width={500} height={500} alt='Flutter Logo' />写法符合App Router规范，无需手动传入flutterImg.src

修改配置后重启开发服务器，即可正常加载本地静态图片。

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