CODEWITHSUNDEEP
next.js
utg.tdawg
utg.tdawg

Reputation: 358

How to read html files statically-generated by Nextjs?

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?

Upvotes: 1

Views: 1103

Answers (1)

utg.tdawg
utg.tdawg

Reputation: 358

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} />
}

Upvotes: 0

Related Questions