I'm using NextJS and Styled Components. Reading the documentation below I added a custom _document.js in NextJS to make Styled Components works.
The example code is written in a React Class, is there a way of converting this to a function?
2
-
you can always convert a class component to a function one, thing is, based on your question I think you're not familiar with React class component style, you should go read to docs first, then when you're comfortable with both styles, you can do everything effortlessly. reactjs.org/docs/components-and-props.htmlvuongvu– vuongvu2021-02-18 09:25:05 +00:00Commented Feb 18, 2021 at 9:25
-
I wouldn't recommend doing so as it's not currently supported by Next.js: github.com/vercel/next.js/issues/19355.juliomalves– juliomalves2021-02-18 11:00:12 +00:00Commented Feb 18, 2021 at 11:00
Add a comment
|
2 Answers
This is possible since Next 11.1.1, thanks to #28515, but the feature seems currently undocumented.
See an example below:
import { Html, Head, Main, NextScript } from 'next/document'
const Document = () => (
<Html>
<Head/>
<body>
<Main />
<NextScript />
</body>
</Html>
)
export default Document
Comments
The answer is that there is no good way to do it, I guess you could somehow override it but Next.js uses _document and _app for in its custom runtime and it is not a good idea to override it.
_document's purpose:
A custom Document is commonly used to augment your application's <html> and <body> tags.
Also, note that using any logic (apart from this inside getInitialProps) inside _document is unadvisable: https://nextjs.org/docs/advanced-features/custom-document#caveats
