在Next.js的_app.js中使用getInitialProps导致404页面失效求助

问题原因 #

当在_app.js中自定义getInitialProps时，会覆盖Next.js默认的错误处理逻辑，导致访问不存在的路径时，无法自动渲染默认404页面，反而抛出客户端异常。

解决方案 #

1. 手动调用页面组件的getInitialProps #

在MyApp.getInitialProps中，先尝试获取当前页面组件的props（包括404页面的props），再获取导航数据，确保错误页面能正常加载：

export default function MyApp({ Component, pageProps, navData }) {
  return (
    <>
      <Layout navData={navData}>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};

  // 先获取当前页面的props，兼容404等错误页面
  try {
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
  } catch (error) {
    // 捕获页面抛出的错误，不中断导航数据的获取
    console.error('Page props fetch error:', error);
  }

  // 获取导航栏数据
  const json = await FetchGQL(NavQuery);
  const navData = json.data.allPosts;

  return { pageProps, navData };
};

2. 确保存在自定义404页面 #

在pages目录下创建404.js文件，定义你的404页面组件：

export default function Custom404() {
  return <h1>404 - 页面不存在</h1>;
}

3. （可选）正确处理重定向（替代手动操作res） #

如果需要将404页面重定向到首页，不要直接操作ctx.res，而是返回redirect配置，这符合Next.js的规范，不会在构建时报错：

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};

  // 检查是否为404状态
  if (ctx.res?.statusCode === 404) {
    return {
      redirect: {
        destination: '/',
        permanent: false, // 临时重定向，使用302状态码
      },
      navData: (await FetchGQL(NavQuery)).data.allPosts, // 可选，重定向时也可获取导航数据
    };
  }

  // 正常页面逻辑
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  const navData = (await FetchGQL(NavQuery)).data.allPosts;
  return { pageProps, navData };
};

关键说明 #

• 自定义getInitialProps后，Next.js不会自动处理错误页面的渲染，必须手动调用页面组件的getInitialProps来兼容错误场景。
• 直接操作ctx.res在生产构建时可能引发错误，Next.js提供了redirect配置来规范处理页面跳转。

内容的提问来源于stack exchange，提问作者Mathias Dahl Jensen