Skip to content
DocsErrorsNo Stylesheets In Head Component

No Stylesheets In Head Component

Why This Error Occurred

A <link rel="stylesheet"> tag was added using the next/head component.

We don't recommend this pattern because it will potentially break when used with Suspense and/or streaming. In these contexts, next/head tags aren't:

  • guaranteed to be included in the initial SSR response, so loading could be delayed until client-side rendering, regressing performance.

  • loaded in any particular order. The order that the app's Suspense boundaries resolve will determine the loading order of your stylesheets.

Possible Ways to Fix It


Add the stylesheet in a custom Document component.

import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
  return (
        <link rel="stylesheet" href="..." />
        <Main />
        <NextScript />

Note that the functional syntax for Document above is preferred over the class syntax, so that it will be compatible with React Server Components down the line.