ad981783ab
Adds support for render props to the `<Main>` component, when using the [functional custom `Document`](https://github.com/vercel/next.js/pull/28515) style. This allows you to write something like this: ```tsx export default function Document() { const jsxStyleRegistry = createStyleRegistry() return ( <Html> <Head /> <body> <Main> {content => ( <StyledJsxWrapper registry={jsxStyleRegistry}> {content} </StyledJsxWrapper> )} </Main> <NextScript /> </body> </Html> ) } ``` In functional document components, this allows the `<App>` to be wrapped, similar to `enhanceApp` (which is only available via `getInitialProps`, which is not supported by functional document components). The primary use for this is for integrating with 3rd party CSS-in-JS libraries, allowing them to attach an `useFlush` handler to [support React 18](https://github.com/reactwg/react-18/discussions/110): ```tsx import { unstable_useFlush as useFlush } from 'next/document' export default function StyledJsxWrapper({ children, registry }) { useFlush(() => { /* ... */ }) return ( <StyleRegistry registry={registry}> {children} </StyleRegistry> ) } ``` Support for `useFlush` will be added in a follow up PR. |
||
|---|---|---|
| .. | ||
| lib | ||