react-doctor/nextjs-no-a-element

`import Link from 'next/link'` — enables client-side navigation, prefetching, and preserves scroll position

• Category: Next.js
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: nextjs
• Enabled when: framework=nextjs and capabilities=nextjs

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Only flags <a> tags whose href is a string literal starting with / (internal app routes). External URLs, hash anchors (#section), mailto:/tel: links, and dynamic href expressions are intentionally ignored. Confirm the link is in-app navigation rather than a download link or a target="_blank" doc reference.

Fix prompt

Use this once validation confirms the diagnostic is real.

Replace with <Link href="/path"> imported from next/link. It prefetches the destination route on viewport entry, performs client-side navigation without a full reload, and preserves scroll position by default. https://nextjs.org/docs/app/api-reference/components/link

Related rules

More Next.js rules from the rules reference:

• react-doctor/nextjs-no-client-fetch-for-server-data: Remove 'use client' and fetch directly in the Server Component — no API round-trip, secrets stay on server
• react-doctor/nextjs-no-client-side-redirect: Avoid redirects inside useEffect. Use an event handler, middleware, or server-side redirect (App Router: redirect() from next/navigation; Pages Router: getServerSideProps redirect)
• react-doctor/nextjs-no-css-link: Import CSS directly: `import './styles.css'` or use CSS Modules: `import styles from './Button.module.css'`
• react-doctor/nextjs-no-default-export-in-route-handler: Remove the default export from this route.ts and export the handler as a named HTTP method instead: export async function GET(request: Request) { ... }
• react-doctor/nextjs-no-edge-og-runtime: Remove `export const runtime = "edge"` from OG image route files so they use the default Node.js runtime