Avoid adding stylesheet manuallyJS-W1021

Using an HTML link element to link to an external stylesheet can affect the resource loading (CSS) on your web page. It is recommended to use the Next.js built-in CSS or stylesheet loading instead, which gives you the ability to import CSS from any JavaScript file.

Bad Practice

import { Head } from "next/document";
export class NavBar extends Head {
  render() {
    return (
      <div>
        <h1>Welcome to DeepSource!</h1>
        <link href="/_next/static/css/styles.css" rel="stylesheet" />
      </div>
    );
  }
}

Recommended

import { Head } from "next/document";
import styles from './styles.css'
export class NavBar extends Head {
  render() {
    return (
      <div>
        <h1 className={styles.Heading}>Welcome to DeepSource!</h1>
      </div>
    );
  }
}

References

• Nextjs CSS support