我刚好碰到过一模一样的场景，给你几个亲测有效的解决方法：

方法1：配置Webpack别名（推荐） #

Next.js本身支持通过配置别名来映射路径，同时让IntelliJ自动识别这个关联：

• 在项目根目录的next.config.js里添加这段配置：

const path = require('path');

module.exports = {
  webpack: (config) => {
    // 把根路径"/"映射到public目录
    config.resolve.alias['/'] = path.join(__dirname, 'public');
    return config;
  },
};

• 接着打开IntelliJ的设置：File > Settings > Languages & Frameworks > JavaScript > Webpack，选择项目里的next.config.js作为Webpack配置文件。保存后IDE会自动读取这个别名映射，/my-image.png就能正确关联到public/my-image.png，警告自然就消失了。

方法2：用jsconfig/tsconfig配置路径映射 #

如果不想改动Webpack配置，直接在IDE层面配置路径映射也可以：

• 如果是JavaScript项目，在根目录新建或修改jsconfig.json，添加以下内容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "/*": ["public/*"]
    }
  }
}

• 要是TypeScript项目，就修改tsconfig.json的compilerOptions部分，加上同样的paths配置。保存后IntelliJ会自动识别这个映射，解析根路径开头的资源引用。

方法3：临时 workaround（不推荐） #

如果上面两种方法都暂时不想用，也可以先临时处理：

• 先用相对路径编写（比如../public/my-image.png），然后右键点击IDE里的路径警告，选择Inspection Settings > Disable inspection关闭这个检查。不过这个方法有隐患，上线前还得把路径改回根路径，容易漏改出错，所以只适合临时救急。

另外提一句，你的IntelliJ版本是2020.2.1，相对比较旧了，新版本对Next.js的静态资源解析支持更完善，如果上述方法都没效果，可以考虑升级到IDE的最新稳定版试试。

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