2023-07-05 15:11:16 +02:00
---
title: No HTML link for pages
---
2021-04-30 13:09:07 +02:00
2022-06-14 04:17:42 +02:00
> Prevent usage of `<a>` elements to navigate to internal Next.js pages.
2023-07-05 15:11:16 +02:00
## Why This Error Occurred
2021-04-30 13:09:07 +02:00
2023-07-05 15:11:16 +02:00
An `<a>` element was used to navigate to a page route without using the `next/link` component, causing unnecessary full-page refreshes.
2021-04-30 13:09:07 +02:00
2023-07-05 15:11:16 +02:00
The `Link` component is required to enable client-side route transitions between pages and provide a single-page app experience.
2021-04-30 13:09:07 +02:00
2023-07-05 15:11:16 +02:00
## Possible Ways to Fix It
2021-04-30 13:09:07 +02:00
Make sure to import the `Link` component and wrap anchor elements that route to different page routes.
**Before:**
2023-07-05 15:11:16 +02:00
```jsx filename="pages/index.js"
2021-04-30 13:09:07 +02:00
function Home() {
return (
<div>
<a href="/about">About Us</a>
</div>
)
}
```
**After:**
2023-07-05 15:11:16 +02:00
```jsx filename="pages/index.js"
2021-04-30 13:09:07 +02:00
import Link from 'next/link'
function Home() {
return (
<div>
2023-01-25 04:17:09 +01:00
<Link href="/about">About Us</Link>
2021-04-30 13:09:07 +02:00
</div>
)
}
export default Home
```
2021-08-19 11:07:30 +02:00
### Options
#### `pagesDir`
This rule can normally locate your `pages` directory automatically.
2023-07-05 15:11:16 +02:00
If you're working in a monorepo, we recommend configuring the [`rootDir`](/docs/pages/building-your-application/configuring/eslint#rootdir) setting in `eslint-plugin-next`, which `pagesDir` will use to locate your `pages` directory.
2021-08-19 11:07:30 +02:00
In some cases, you may also need to configure this rule directly by providing a `pages` directory. This can be a path or an array of paths.
2023-07-05 15:11:16 +02:00
```json filename="eslint.config.json"
2021-08-19 11:07:30 +02:00
{
"rules": {
2022-01-26 13:41:14 +01:00
"@next/next/no-html-link-for-pages": ["error", "packages/my-app/pages/"]
2021-08-19 11:07:30 +02:00
}
}
```
2023-07-05 15:11:16 +02:00
## Useful Links
2021-04-30 13:09:07 +02:00
2023-07-05 15:11:16 +02:00
- [next/link API Reference](/docs/pages/api-reference/components/link)