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.
Add the stylesheet in a custom Document component:
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="stylesheet" href="..." />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument