<a> tag used without a Link component JS-W1014
Anti-pattern
Major
19 days ago
—
19 days old
Do not use an
<a> element to navigate to /sign-in/. Use <Link /> from next/link instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages39 </div>
40 </div>
41 <input class="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} name="password" placeholder="Confirm password" />
42 <p class="m-auto my-2 lg:m-2">Already have an account? Sign in <a class="transition ease-in-out underline hover:text-sky-300" href="/sign-in">here</a></p>43 <input class="rounded-lg bg-neutral-300 dark:bg-neutral-500 px-3 py-2 transition ease-in-out enabled:hover:scale-110 enabled:focus:scale-110 mx-auto my-3 enabled:dark:hover:bg-neutral-400 enabled:dark:focus:bg-neutral-400 block text-2xl outline-none" type="submit" value="Submit" />
44 </fieldset>
45 Do not use an
<a> element to navigate to /sign-up/. Use <Link /> from next/link instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages47 <img src="/images/GoogleLogo.webp" className="w-7"/>
48 <p>Sign in with Google</p>
49 </div>
50 <p className="m-auto my-2 lg:m-2">Don't have an account? Sign up <a class="transition ease-in-out underline hover:text-sky-300" href="/sign-up">here</a></p>51 </fieldset>
52
53 </form>
Description
It is recommended not to use the a tag without wrapping it with NextJs's Link component.
Link is required to enable client-side route transitions between pages and provide a single-page app experience.
Bad Practice
export function Home() {
return (
<div>
<a href="/about">About Us</a>
</div>
)
}
Recommended
import Link from 'next/link'
export function Home() {
return (
<div>
<Link href="/about">
<a>About Us</a>
</Link>
</div>
)
}