Best Practices for Opening Links in New Tabs in NextJS with ESLint Issue Resolution

Problem Background and Common Misconceptions

During NextJS development, many developers habitually use the <Link> component for all navigation needs. However, when opening external links in new tabs, this practice can lead to unexpected ESLint warnings and potential accessibility issues.

A typical incorrect implementation is shown below:

<Link href="https://twitter.com/" passHref>
  <a target="_blank">
    <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
  </a>
</Link>

While this approach achieves the functionality of opening links in new tabs, it triggers an ESLint warning: The href attribute is required for an anchor to be keyboard accessible. This warning highlights a significant accessibility issue—anchor elements without href attributes cannot be properly recognized by keyboard navigation.

Analysis of Optimal Solutions

For external link scenarios, the most direct and correct solution is to use native HTML <a> tags instead of NextJS <Link> components. This is because:

• The <Link> component primarily optimizes preloading and client-side navigation for internal application routes
• External links do not require NextJS routing optimization mechanisms
• Native <a> tags provide complete accessibility support

The recommended implementation code is:

<a target="_blank" href="https://twitter.com/" rel="noopener noreferrer">
  <div className={`${dark ? styles.iconTwitterWhite : styles.iconTwitter} mr-3`} />
</a>

Security and Performance Considerations

When implementing external links, adding the rel="noopener noreferrer" attribute is crucial. This combination provides dual protection:

• noopener prevents newly opened pages from accessing the original page's window object via window.opener, avoiding potential security risks
• noreferrer prevents browsers from sending Referrer information in HTTP headers, protecting user privacy

From a performance perspective, directly using <a> tags avoids unnecessary NextJS routing processing overhead while ensuring semantic correctness of links.

Implementation Differences Across NextJS Versions

As NextJS versions evolve, the implementation of the <Link> component has also changed. In NextJS 13 and later versions, the <Link> component directly renders as an <a> tag internally, meaning that in some cases, target="_blank" can be set directly on <Link>:

<Link href="https://google.com" rel="noopener noreferrer" target="_blank">
  Google
</Link>

However, for purely static external links, using native <a> tags is still recommended because it is more semantic and does not introduce unnecessary framework dependencies.

Accessibility Best Practices

Ensuring link accessibility is a key principle of modern web development. In addition to providing necessary href attributes, consider:

• Providing meaningful alternative text or ARIA labels for icon links
• Ensuring links have clear focus states during keyboard navigation
• Avoiding using <div> or other non-semantic elements as clickable areas

By following these best practices, developers can create web applications that are both functionally complete and friendly to users with disabilities.