Next.js项目用getStaticProps/Path后页面源码无HTML，SEO遇阻求助

核心问题 #

你的_app.js渲染方法中，用typeof window !== "undefined"包裹了全部页面内容。在静态生成（SSG）或服务端渲染阶段，服务端不存在window对象，导致服务端直接输出空内容，仅当客户端加载JS后才会渲染页面——这就是源码无HTML、禁用JS无法显示的根本原因。

修复步骤 #

修改_app.js的render逻辑，仅将需要客户端执行的组件（如NextNProgress）用window判断包裹，核心页面组件直接渲染，保证服务端能输出完整HTML：

import React from "react";
import App from "next/app";
import TagManager from "react-gtm-module";
import NextNProgress from "../components/NextNProgress";
import "bootstrap/dist/css/bootstrap.css";
import "../scss/index.scss";

const tagManagerArgs = {
  gtmId: "########",
};
export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  componentDidMount() {
    TagManager.initialize(tagManagerArgs);
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <>
        {/* 仅客户端渲染进度条，不影响核心页面的服务端输出 */}
        {typeof window !== "undefined" && <NextNProgress />}
        {/* 核心页面组件直接渲染，保证服务端生成HTML */}
        <Component {...pageProps} />
      </>
    );
  }
}

额外检查 #

• 确认页面组件的getStaticProps/getStaticPaths逻辑正常，确保构建时已获取到页面所需数据，这样服务端生成的HTML会包含完整的页面内容。
• TagManager.initialize放在componentDidMount是正确的，它本身就需要在客户端执行，无需改动。

内容的提问来源于stack exchange，提问作者Nilesh102001