Next.js生产构建后Component.name为空 条件布局失效如何解决

问题原因 #

生产构建过程中，打包工具会默认对代码做压缩混淆处理，组件的name属性会被改写为短字符或者清空，所以无法通过Component.name匹配到原组件名，而开发模式下没有开启压缩，所以能正常获取。

解决建议 #

• 方案1：给页面组件添加自定义静态标识（最推荐） #

  不需要依赖原生的name属性，直接给需要特殊布局的页面组件自定义静态属性，不会受打包压缩影响。
  例如首页pages/index.js添加自定义属性：

  const Home = () => {
    // 原有页面逻辑
  }
  // 方式1：自定义displayName
  Home.displayName = 'Home'
  // 方式2：直接定义布局标识，判断逻辑更直观
  Home.useCustomLayout = false
  export default Home
  

  调整_app.js的判断逻辑：

  import "../styles/globals.css";
  import Layout from "../components/Layout";
  
  function MyApp({ Component, pageProps }) {
    // 对应方式1的判断
    if (Component.displayName === 'Home') {
      return <Component {...pageProps} />
    }
    // 对应方式2的判断
    // if (Component.useCustomLayout === false) {
    //   return <Component {...pageProps} />
    // }
    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    )
  }
  
  export default MyApp
  

• 方案2：通过路由路径判断（无需修改页面组件） #

  借助Next.js内置的路由能力，通过页面路径判断布局，完全不依赖组件属性：
  调整后的_app.js代码：

  import { useRouter } from 'next/router'
  import "../styles/globals.css";
  import Layout from "../components/Layout";
  
  function MyApp({ Component, pageProps }) {
    const router = useRouter()
    // 首页路径默认为/，可根据实际路由调整
    if (router.pathname === '/') {
      return <Component {...pageProps} />
    }
    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    )
  }
  
  export default MyApp
  

• 方案3：配置打包规则保留组件名（不推荐） #

  可以修改打包配置，禁止压缩工具混淆函数/类名，但是会增大生产包体积，降低压缩效率，仅做备选：
  在项目根目录的next.config.js中添加如下配置：

  module.exports = {
    webpack: (config, { dev }) => {
      // 仅生产环境生效
      if (!dev) {
        config.optimization.minimizer.forEach(minimizer => {
          if (minimizer.constructor.name === 'TerserPlugin') {
            minimizer.options.terserOptions.keep_fnames = true
            minimizer.options.terserOptions.keep_classnames = true
          }
        })
      }
      return config
    }
  }
  

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