頁面沒有 HTML 連結

避免使用 <a> 元素導覽至 Next.js 內部頁面。

錯誤發生的原因

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

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

可能的解決方法

請務必導入 Link 元件，並將導向不同頁面路由的錨點元素包裹起來。

修改前

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

修改後

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

選項

pagesDirrootDir 設定，pagesDir 將使用它來找到您的 pages 目錄。

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

eslint.config.json

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

實用連結