4ad1c5a2bc
Following the [example](https://nextjs.org/docs/advanced-features/custom-document), avoiding the following error: > Identifier 'Document' has already been declared ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`
1.2 KiB
1.2 KiB
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
Document
Add the stylesheet in a custom Document component.
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link rel="stylesheet" href="..." />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
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.