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?