next build报错pages/404不可用getInitialProps但实际未使用该属性如何解决

我尝试多方搜索，没有找到遇到同类问题的用户。运行next build时收到报错，提示不能使用getInitialProps/getServerSideProps，但我的404.tsx文件中完全没有使用这两个属性。

错误信息 #

错误信息:
    Error: `pages/404` can not have getInitialProps/getServerSideProps
    at /Users/myuser/.nvm/versions/node/v15.5.0/lib/node_modules/next/dist/build/index.js:15:5606
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async /Users/myuser/.nvm/versions/node/v15.5.0/lib/node_modules/next/dist/build/tracer.js:3:470
    at async Promise.all (index 0)
    at async /Users/myuser/.nvm/versions/node/v15.5.0/lib/node_modules/next/dist/build/index.js:15:2910
    at async /Users/myuser/.nvm/versions/node/v15.5.0/lib/node_modules/next/dist/build/tracer.js:3:470
    at async /Users/myuser/.nvm/versions/node/v15.5.0/lib/node_modules/next/dist/build/index.js:15:2147
    at async /Users/myuser/.nvm/versions/node/v15.5.0/lib/node_modules/next/dist/build/tracer.js:3:470

404页面代码 #

import * as React from 'react';

import Head from 'next/head';
import Layout from '../components/Layout';

const Error = () => {
  return (
    <Layout>
      <Head>
        <title>TM</title>
      </Head>
      <h1>Error 404</h1>
      <h2>Page not found</h2>
    </Layout>
  );
};

export default Error;

引用的Layout组件代码 #

import * as React from 'react';

import Footer from './Footer';
import Head from 'next/head';
import Header from './Header';
import styles from '../styles/main.module.css';

type Props = {
  showFooter?: boolean;
  showHeader?: boolean;
  title?: string;
};

const Layout: React.FC<Props> = ({
  showFooter,
  showHeader,
  title,
  children,
}) => {
  showFooter = showFooter || true;
  showHeader = showHeader || true;
  title = title || 'title';
  return (
    <div>
      <Head>
        <title>{title}</title>
      </Head>
      {showHeader && <Header />}
      <div className={styles.content}>{children}</div>
      {showFooter && <Footer />}
    </div>
  );
};

// Layout.defaultProps = {
//   showFooter: true,
//   showHeader: true,
//   title: 'title',
// };

export default Layout;

该报错是Next.js 12.1以前版本的已知构建bug：当页面引用的自定义组件声明了defaultProps属性时，Next.js的构建校验逻辑会误将组件的defaultProps判定为页面导出的getInitialProps，进而触发404页面不能使用服务端渲染属性的校验规则。

• 删除组件的defaultProps声明，直接在参数解构时赋值默认值，可省略内部的二次赋值逻辑，写法更简洁：

const Layout: React.FC<Props> = ({
  showFooter = true,
  showHeader = true,
  title = 'title',
  children,
}) => {
  return (
    <div>
      <Head>
        <title>{title}</title>
      </Head>
      {showHeader && <Header />}
      <div className={styles.content}>{children}</div>
      {showFooter && <Footer />}
    </div>
  );
};

• 升级Next.js到12.1.0及以上版本，该版本已修复此误判问题，无需修改现有代码即可正常构建。
• 若使用Next.js 13及以上版本，可将404页面迁移到App Router下的app/not-found.tsx，App Router下的404页面无此校验限制。

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