How to read html files statically-generated by Nextjs?

Question

After running npm run build, I can find the statically-generated html files under .next/server/pages.

However, each of the html files contains mainly script tags and JSON data. A standard example would look something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="preconnect" href="/" crossorigin="anonymous" />
    <link
      rel="preload"
      href="/_next/static/css/123.css"
      as="style"
    />
    <meta name="viewport" content="width=device-width" />
    <meta name="next-head-count" content="2" />
    <link
      rel="stylesheet"
      href="/_next/static/css/afe06a54dae95702.css"
      data-n-g=""
    />
    <noscript data-n-css=""></noscript>
    <script
      defer=""
      nomodule=""
      src="/_next/static/chunks/polyfills-123.js"
    ></script>
    <script
      src="/_next/static/chunks/webpack-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/chunks/framework-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/chunks/main-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/chunks/pages/_app-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/chunks/pages/demo-123.js"
      defer=""
    ></script>
    <script
      src="/_next/static/123/_buildManifest.js"
      defer=""
    ></script>
    <script
      src="/_next/static/123/_ssgManifest.js"
      defer=""
    ></script>
  </head>
  <body>
    <div id="__next"></div>
    <script id="__NEXT_DATA__" type="application/json">
      {
        "props": { "pageProps": {} },
        "page": "/demo",
        "query": {},
        "buildId": "123",
        "nextExport": true,
        "autoExport": true,
        "isFallback": false,
        "scriptLoader": []
      }
    </script>
  </body>
</html>

Why does Nextjs' statically-generated html files look like this instead of containing just pure html? Is there another processing step that occurs on the browser that convert these files into html? If so, is there a way to obtain the final html output?

My site has much more useful HTML in it then your example. I'd speculate that your pages depend on a lot of client-side code that isn't put somewhere it can be included with getStaticProps — Quentin
– Quentin, Commented Dec 16, 2022 at 16:07
@Quentin Strange. I tested out with a page with no client-side code but got the same result. I am using next v13. May I know what version of next are you using? — utg.tdawg
– utg.tdawg, Commented Dec 17, 2022 at 12:42

utg.tdawg · Accepted Answer · 2022-12-24 06:14:32Z

0

Found the problem. Within _app.tsx, I was waiting for the user's authentication state to be determined before rendering the pages. In the meantime, _app.tsx was returning null.

// _app.tsx

export default function({
  Component,
  pageProps,
}: {
  Component: any;
  pageProps: any;
}) {
  const initialised = useAuthInit();

  if (!initialised) return null;

  return <Component {...pageProps} />
}

answered Dec 24, 2022 at 6:14

utg.tdawg

3581 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to read html files statically-generated by Nextjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related