Next.js配置basePath后通过Nginx部署时图片无法渲染如何解决？

问题根因 #

配置basePath后，next/image组件的绝对路径src不会自动拼接basePath前缀，导致图片请求路径未匹配到/some-keyword路由规则，请求到根域名应用下找不到对应资源。

1. 调整next/image组件的src路径 #

两种修改方式二选一即可：

• 方式1：手动拼接basePath前缀
  直接把图片路径修改为带basePath的完整路径：

<Image src='/some-keyword/img/alert-down.png' width={550} height={320} />

• 方式2：动态获取basePath拼接（适合多环境部署场景）
  通过useRouter钩子获取配置的basePath，避免硬编码：

import { useRouter } from 'next/router'

// 组件内使用
const Demo = () => {
  const { basePath } = useRouter()
  return <Image src={`${basePath}/img/alert-down.png`} width={550} height={320} />
}

2. 补充next.config.js配置 #

在原有配置基础上新增图片优化路径配置，确保Next.js内置的图片优化服务路径正确：

module.exports = {
  basePath: '/some-keyword',
  // 新增配置
  images: {
    path: '/some-keyword/_next/image'
  },
  // Next 13+ App Router版本可额外加assetPrefix确保所有静态资源路径正确
  assetPrefix: '/some-keyword'
}

3. 校验Nginx配置（无需大改，确认2点即可） #

• 你当前的proxy_pass http://localhost:8000;后面不要加斜杠，否则会自动去除请求路径中的/some-keyword前缀，导致Next.js无法匹配路由
• 如果需要优化静态资源加载速度，可以在配置块内新增静态资源缓存规则（非必须）：

location ~* ^/some-keyword/.*\.(png|jpg|jpeg|gif|ico|svg)$ {
  proxy_pass http://localhost:8000;
  expires 30d;
  add_header Cache-Control "public, immutable";
}

4. 生效配置 #

修改完成后执行以下操作生效：

• 重新build Next.js项目：npm run build
• 重启Next.js服务
• 重载Nginx配置：nginx -s reload
• 清除浏览器缓存后访问测试

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