【Next.js】_document.tsxの設定は基本コピペなのでしょうか。
解決したいこと
Next.jsを学習している者です。
styled-componentsを利用する際、
_document.tsxを以下のようにオーバーライドしてくださいとの説明がありました。
import Document, {DocumentContext} from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App{...props}/>)
})
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: [
initialProps.styles,
sheet.getStyleElement()
],
}
}finally {
sheet.seal();
}
}
}
他のサイトや公式ドキュメント・参考書には
このソースを書いて上書きしてくださいという説明は大変見るのですが、
このソースに関する詳しい説明をしているものを見ないです。
自分の探し方が悪いだけなのかもしれませんが、
例えば実際の現場でNext.jsでstyled-componentsを利用するとなった時、このソースを_document.tsxにコピペして使うみたいなことが普通なのでしょうか。
それとも、利用される方々はこのソースの意図を理解して利用されているのでしょうか。
参考書にも詳しい説明がなく、他のサイトにもこのソースを追記してくださいというような説明が大半なので、このソースの理解を特にせず先に進めて良いものか不安になり投稿致しました。
実際にNext.jsを利用されている方や、
_document.tsxについて詳しい方がいらっしゃいましたら、
ご教示いただけますと幸いでございます。
何卒、宜しくお願いいたします。
0