跳到主要內容
文件錯誤頁面沒有 HTML 連結

頁面沒有 HTML 連結

防止使用 <a> 元素導航至 Next.js 內部頁面。

發生此錯誤的原因

使用了 <a> 元素導航到頁面路由，但未使用 next/link 元件，導致不必要的完整頁面重新整理。

需要 Link 元件才能啟用頁面之間的用戶端路由轉換，並提供單頁應用程式體驗。

可能的修正方式

請務必匯入 Link 元件，並包裝路由到不同頁面路由的錨點元素。

之前

pages/index.js
function Home() {
  return (
    <div>
      <a href="/about">About Us</a>
    </div>
  )
}

之後

pages/index.js
import Link from 'next/link'
 
function Home() {
  return (
    <div>
      <Link href="/about">About Us</Link>
    </div>
  )
}
 
export default Home

選項

pagesDir

此規則通常可以自動找到您的 pages 目錄。

如果您在 monorepo 中工作，我們建議在 eslint-plugin-next 中設定 rootDir 設定，pagesDir 將使用該設定來找到您的 pages 目錄。

在某些情況下，您可能還需要直接設定此規則，方法是提供 pages 目錄。這可以是路徑或路徑陣列。

eslint.config.json
{
  "rules": {
    "@next/next/no-html-link-for-pages": ["error", "packages/my-app/pages/"]
  }
}