运行npm run build后，我可以在.next/server/pages下找到静态生成的html文件。
但是，每个html文件主要包含脚本标签和JSON数据。一个标准的例子看起来像这样:
<!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>
为什么Nextjs的静态生成的html文件看起来像这样，而不是只包含纯html?是否在浏览器上发生另一个处理步骤，将这些文件转换为html?如果是这样，是否有办法获得最终的html输出?
找到问题。在_app.tsx中，我正在等待在渲染页面之前确定用户的身份验证状态。同时，_app.tsx正在返回null。
// _app.tsx
export default function({
Component,
pageProps,
}: {
Component: any;
pageProps: any;
}) {
const initialised = useAuthInit();
if (!initialised) return null;
return <Component {...pageProps} />
}