2021-04-30 13:09:07 +02:00
# No HTML link for pages
2022-06-14 04:17:42 +02:00
> Prevent usage of `<a>` elements to navigate to internal Next.js pages.
2021-04-30 13:09:07 +02:00
### Why This Error Occurred
2022-06-14 04:17:42 +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
The `Link` component is required in order to enable client-side route transitions between pages and provide a single-page app experience.
### Possible Ways to Fix It
Make sure to import the `Link` component and wrap anchor elements that route to different page routes.
**Before:**
```jsx
function Home() {
return (
< div >
< a href = "/about" > About Us< / a >
< / div >
)
}
```
**After:**
```jsx
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.
If you're working in a monorepo, we recommend configuring the [`rootDir` ](/docs/basic-features/eslint.md#rootDir ) setting in `eslint-plugin-next` , which `pagesDir` will use to locate your `pages` directory.
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.
```json
{
"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
}
}
```
2021-04-30 13:09:07 +02:00
### Useful Links
- [next/link API Reference ](https://nextjs.org/docs/api-reference/next/link )