` tags, we recommend using [`next/head`](/docs/pages/api-reference/components/head) in your pages or components. * React components outside of `` will not be initialized by the browser. Do not add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), read [Layouts](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern) instead. * `Document` currently does not support Next.js [Data Fetching methods](/docs/pages/building-your-application/data-fetching) like [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) or [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props). ## Customizing `renderPage` Customizing `renderPage` is advanced and only needed for libraries like CSS-in-JS to support server-side rendering. This is not needed for built-in `styled-jsx` support. We do not recommend using this pattern. Instead, consider [incrementally adopting](/docs/app/guides/migrating/app-router-migration) the App Router, which allows you to more easily fetch data for pages and layouts. ```tsx filename="pages/_document.tsx" switcher import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps, } from 'next/document' class MyDocument extends Document { static async getInitialProps( ctx: DocumentContext ): Promise { const originalRenderPage = ctx.renderPage // Run the React rendering logic synchronously ctx.renderPage = () => originalRenderPage({ // Useful for wrapping the whole react tree enhanceApp: (App) => App, // 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 } render() { return (