homfarnam/Next Js _document.js

## Next Js _document.js
import Document, { Html, Head, Main, NextScript } from "next/document"
import { ServerStyleSheet, createGlobalStyle } from "styled-components"
const GlobalStyle = createGlobalStyle`
  body {
  padding: 0;
  margin: 0;
}
`
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          // useful for wrapping the whole react tree
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(
              <>
                <GlobalStyle />
                <App {...props} />
              </>
            ),
          // useful for wrapping in a per-page basis
          enhanceComponent: (Component) => Component,
        })
      // Run the parent `getInitialProps`, it now includes the custom `renderPage`
      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
export default MyDocument
	import Document, { Html, Head, Main, NextScript } from "next/document"
	import { ServerStyleSheet, createGlobalStyle } from "styled-components"
	const GlobalStyle = createGlobalStyle`
	body {
	padding: 0;
	margin: 0;
	}
	`
	class MyDocument extends Document {
	static async getInitialProps(ctx) {
	const sheet = new ServerStyleSheet()
	const originalRenderPage = ctx.renderPage
	try {
	ctx.renderPage = () =>
	originalRenderPage({
	// useful for wrapping the whole react tree
	enhanceApp: (App) => (props) =>
	sheet.collectStyles(
	<>
	<GlobalStyle />
	<App {...props} />
	</>
	),
	// useful for wrapping in a per-page basis
	enhanceComponent: (Component) => Component,
	})
	// Run the parent `getInitialProps`, it now includes the custom `renderPage`
	const initialProps = await Document.getInitialProps(ctx)
	return {
	...initialProps,
	styles: (
	<>
	{initialProps.styles}
	{sheet.getStyleElement()}
	</>
	),
	}
	} finally {
	sheet.seal()
	}
	}
	render() {
	return (
	<Html lang="en">
	<Head />
	<body>
	<Main />
	<NextScript />
	</body>
	</Html>
	)
	}
	}
	export default MyDocument