Next.js点击Link跳转Twitter授权API路由报脚本加载错误如何解决？

问题原因 #

Next.js 内置的 <Link> 组件仅用于客户端页面路由跳转，它会尝试加载对应路径下的页面组件静态 JS 块。而你指向的 pages/api/* 路径是服务端 API 路由，仅在服务端运行，不会生成客户端可用的 JS chunk，因此触发了资源加载失败的报错。

修复方案 #

两种方案任选其一即可：

• 替换为原生 <a> 标签
  直接将 <Link> 替换为走浏览器原生跳转逻辑的 a 标签即可：

  <a href='/api/twitter/generate-auth-link'>Login with Twitter</a>
  

• 手动触发浏览器跳转
  如果需要通过交互事件（比如按钮点击）触发跳转，直接修改页面地址即可：

  <button onClick={() => window.location.href = '/api/twitter/generate-auth-link'}>
    Login with Twitter
  </button>
  

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