首先使用alias

在next.config.js文件中, 添加如下代碼

const path = require('path');

module.exports = {
  webpack: config => {
    config.resolve.alias['~'] = path.resolve(__dirname);
    return config;
  }
};

此時(shí)已經(jīng)可以使用'~/components/Widget'這種形式的引入了

讓vscode識(shí)別出來(lái)別名路徑

jsconfig.json中添加如下代碼

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

即可
此時(shí)vscode可以認(rèn)出來(lái)你的別名路徑了