1

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?

Improve this question
2
  • 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
    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
    Commented Dec 17, 2022 at 12:42

1 Answer 1

Reset to default
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} />
}
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.