A tiny Next.js <Link/>
wrapper that improves server-side rendered output with better keyboard navigation support
yarn add next-isomorphic-link
Replace import from of next/link
with next-isomorphic-link
:
- import Link from 'next/link'
+ import Link from 'next-isomorphic-link'
The default <Link/>
component usage looks like this (as of Next 9):
<Link href='/puppies'>
<a>Puppies</a>
</Link>
When you view the source, or disable JavaScript, the markup will look like this:
<a>Puppies</a>
There are a few issues here:
<a>
tags withouthref
attributes are not tabbable (you can’t tab around the page)- When the page has’nt been rendered client side (e.g. JS disabled, slow network speed) the link will not be clickable
- Once the bundle has been executed and the page is interactive, hitting
Enter
(or the spacebar if you have that option enabled) when focussed on the link will have no effect.
These are easy to fix:
- Add the
href
attribute to the child<a>
in the server-rendered markup (and remove it when mounted) - Add a
tabIndex
of0
to the client-side rendered link to ensure tabbability (if that is a word) - Add an event handler for the Enter key
- 0.2.5: Added TypeScript declaration file
- 0.2.3: Bump peer dependency version