NextJS 12生产模式下如何禁用页面源码中的Dynamic SSR false栈？

以下是几种可行的解决方式：

1. 修复自定义ErrorBoundary组件 #

你的栈信息中包含自定义ErrorBoundary，大概率是它在生产环境没有正确隐藏调试栈。修改组件逻辑，仅在开发环境展示栈信息，生产环境只返回友好提示：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ errorInfo });
    // 生产环境仅上报错误到监控，不要将errorInfo暴露到页面
  }

  render() {
    if (this.state.hasError) {
      if (process.env.NODE_ENV === 'production') {
        return <h2>页面加载异常，请稍后重试。</h2>;
      }
      // 开发环境保留栈信息用于调试
      return (
        <div>
          <h2>页面加载出错</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error?.toString()}
            <br />
            {this.state.errorInfo?.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

2. 确认Next.js生产环境配置 #

检查next.config.js，确保没有开启会暴露源码/栈信息的选项：

module.exports = {
  productionBrowserSourceMaps: false, // 生产环境禁止生成source map，默认即为false，不要手动开启
  // 其他项目配置...
};

3. 调整动态加载组件（LoadableComponent）的配置 #

栈信息显示涉及LoadableComponent，确保动态加载组件在生产环境不启用调试模式：

import loadable from '@loadable/component';

// 动态加载BloodBank组件，生产环境默认不会暴露调试栈
const BloodBank = loadable(() => import('./blood-bank/index.jsx'), {
  fallback: <div>加载中...</div>,
  // 不要在生产环境设置debug: true
});

4. 优化样式库的生产配置 #

你的项目使用了styled-components和styled-jsx，确保它们的生产环境配置正确，减少调试信息输出：

// next.config.js
module.exports = {
  compiler: {
    styledComponents: {
      displayName: false, // 生产环境关闭组件名称标识
      ssr: true,
    },
    styledJsx: {
      sourceMaps: false, // 禁用styled-jsx的source map
    },
  },
};

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