Webpack压缩后如何在React（NextJS12）中获取组件名称？

方案1：通过路由路径判断（最稳定可靠） #

直接利用Next.js的路由pathname来判断，完全不受代码压缩影响，是最推荐的方式：

import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // 配置不需要显示Header的页面路由
  const noHeaderPaths = [
    '/register-now',
    '/signin',
    '/login-error',
    '/create-new-password',
  ];

  return (
    <>
      {!noHeaderPaths.includes(router.pathname) && <Header />}
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

方案2：给页面组件添加自定义静态属性 #

在不需要Header的页面组件上添加静态标记，生产环境下静态属性不会被压缩工具移除：

1. 在目标页面（如RegisterNow.js）中添加静态属性：

function RegisterNow() {
  // 页面内容
}

// 添加自定义静态标记
RegisterNow.disableHeader = true;

export default RegisterNow;

2. 在_app.js中读取该属性判断：

function MyApp({ Component, pageProps }) {
  return (
    <>
      {!Component.disableHeader && <Header />}
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

方案3：使用getLayout布局模式（适合复杂布局场景） #

通过Next.js的getLayout方法为每个页面定制布局，扩展性更强：

1. 无Header的页面（如RegisterNow.js）定义布局：

function RegisterNow() {
  return <div>注册页面内容</div>;
}

export default RegisterNow;

// 自定义无Header布局
export function getLayout(page) {
  return <>{page}</>;
}

2. 需要Header的页面（如首页）定义布局：

function Home() {
  return <div>首页内容</div>;
}

export default Home;

// 自定义带Header布局
export function getLayout(page) {
  return (
    <>
      <Header />
      {page}
    </>
  );
}

3. 在_app.js中统一应用布局：

function MyApp({ Component, pageProps }) {
  // 优先使用页面自定义布局，默认用带Header的布局
  const getLayout = Component.getLayout || ((page) => (
    <>
      <Header />
      {page}
    </>
  ));

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

export default MyApp;

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