NextJS构建后Component.name值异常导致布局切换失效问题

问题原因 #

你这种实现方式本身是不可靠的，问题出在生产环境的代码压缩逻辑：
NextJS生产构建时会自动用Terser对代码做混淆压缩，为了减小包体积会把组件的函数/类名压缩成短字符，所以Component.name在生产环境已经不是你开发时看到的Login原始值，自然判断失效。开发环境没有开启压缩所以可以正常获取组件名。

推荐解决方案 #

方案1：给页面组件添加自定义静态标记（最简单稳妥）

在你的Login页面组件中添加自定义静态属性：

// pages/login.js
const Login = () => {
  // 原有逻辑
}
// 新增自定义标记
Login.disableLayout = true

export default Login

然后修改_app.js的判断逻辑：

if (Component.disableLayout) {
  return <Component {...{ pageProps, toast }} />;
}
return (
  <Layout>
    <Component {...{ pageProps, toast }} />
  </Layout>
);

压缩工具不会修改自定义的静态属性，所以生产环境不会失效。

方案2：使用NextJS官方推荐的布局模式（扩展性最好）

如果后续还有其他特殊布局需求（比如部分页面用后台管理布局、部分用空白布局），可以用官方推荐的getLayout方案：
首先在需要特殊布局的页面定义布局方法：

// pages/login.js 不需要布局
const Login = () => {
  // 原有逻辑
}
Login.getLayout = (page) => page

// pages/admin.js 需要后台布局
const Admin = () => {
  // 原有逻辑
}
Admin.getLayout = (page) => <AdminLayout>{page}</AdminLayout>

然后修改_app.js的全局逻辑：

// 没有定义getLayout的页面默认使用通用Layout
const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>)

return getLayout(<Component {...{ pageProps, toast }} />)

不推荐的解决方案 #

如果非要保留按组件名判断的逻辑，可以修改NextJS的压缩配置，保留组件名，但会导致打包体积变大、性能下降，不建议使用：

// next.config.js
module.exports = {
  webpack: (config) => {
    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，提问作者Cyrus Rome Dela Cruz