Next.js Discord

Discord Forum

Pages document to app router root layout.

Unanswered
Cape horse mackerel posted this in #help-forum
Open in Discord
Cape horse mackerelOP
The issue is that we have to use internal ui library which is doing some "magic" with pages router, but it's not working with app router, so I have to somehow figure out how to do it in app router. I can send a small part of code just so you can see. 
class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const intialProps = await Document.getInitialProps(ctx)
    const page = await ctx.renderPage()
    const uiLib = extractCritical(page.html)
    const { head = [], styles } = await Document.getInitialProps(ctx)

    return {
      ...intialProps,
      head: [...head, uiLib.metadata],
      styles: (
        <>
          {styles}
          {uiLib.style}
        </>
      ),
    }
  }

  render() {
    return (
      <Html translate="no">
        <Head>
          <meta name="robots" content="notranslate" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

and the extract critical file
/**
 * Extract critical elements that are required to be rendered statically in the served HTML.
 * It's a key building to support server-side-like rendering patterns (SSR, SSG, ISR, ...) consumer-side.
 * Using SSR aims to improve the CRP (Critical Rendering Path) and mitigate FOUC (Flash Of Unstyled Content).
 * @param html The stringified application html rendered consumer-side
 * @returns A collection of JSX critical elements to be rendered into the application head
 */
declare const extractCritical: (html: string) => {
    metadata: react_jsx_runtime.JSX.Element;
    style: react_jsx_runtime.JSX.Element[];
    toString(): string;
};

export { extractCritical };

2 Replies

DirtyCajunRice | AppDir
this shouldnt be needed in app dir. alp dir already has ssr by default.
Cape horse mackerelOP
yeah, I have to do something similar to mui implementation
https://mui.com/material-ui/guides/next-js-app-router/