--- title: No Stylesheets In Head Component --- ## Why This Error Occurred A `` 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 #### Document Add the stylesheet in a custom `Document` component. ```jsx filename="pages/_document.js" import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return (
) } ``` 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. ## Useful Links - [Custom Document](/docs/pages/building-your-application/routing/custom-document)