NextJS迁移页面至app目录后本地图片无法加载求助

1. 检查本地图片路径与App Router规范 #

• 确保本地图片存放在项目根目录的public文件夹下（App Router与Pages Router共享全局public目录），比如/public/images/banner.jpg。
• 引用图片时必须使用绝对路径，例如<img src="/images/banner.jpg" alt="Banner" />，避免使用../images/banner.jpg这类相对路径——App Router的组件路径解析逻辑与Pages Router不同，相对路径会导致请求指向错误的内部地址。

2. 修正Next.js配置中的图片规则 #

打开项目根目录的next.config.js，确认图片配置匹配你的域名与部署环境：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    // 允许当前域名作为图片源
    hostname: 'kwekerijvantuyl.nl',
    // 补充服务器内网解析需要的主机名（比如localhost或服务器内网IP）
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'kwekerijvantuyl.nl',
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

如果网站部署在Plesk的子目录下，需额外添加basePath: '/你的子目录名'，确保图片路径包含正确的前缀。

3. 验证Plesk的Nginx反向代理配置 #

登录Plesk后台，进入域名的「Apache & Nginx设置」，检查Nginx规则是否正确转发静态资源：

• 确保主代理规则正确指向Next.js服务端口（通常是3000）：

  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
  

• 添加静态资源直接处理规则，避免转发错误：

  location ~* \.(png|jpg|jpeg|gif|svg)$ {
    root /var/www/vhosts/kwekerijvantuyl.nl/http/.next/static/images;
    expires 30d;
    add_header Cache-Control "public, immutable";
  }
  

注意替换root路径为你的Next.js项目实际静态资源目录（通常是项目根目录/.next/static/images）。

4. 修复服务器本地域名解析问题 #

Econnrefused大概率是服务器内部无法解析自身域名导致的：

• 登录服务器终端，执行ping kwekerijvantuyl.nl，检查是否能解析到服务器的公网/内网IP。
• 如果解析失败，编辑/etc/hosts文件，添加一行：你的服务器IP kwekerijvantuyl.nl，强制服务器本地正确解析域名。

5. 重新构建并重启服务 #

• 执行npm run build（或yarn build）重新生成App Router的静态资源。
• 在Plesk的「应用程序」面板中重启Next.js服务，确保新配置和资源生效。

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