如何解决pages/_app导致的自动静态优化禁用警告？

问题说明 #

警告：由于pages/_app中存在getInitialProps，您已退出自动静态优化（Automatic Static Optimization）。这不会禁用使用getStaticProps的页面

我的_app.tsx代码如下：

import Layout from "../components/Layout";
import "../styles/globals.scss";
import type { AppProps } from "next/app";

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
};

export default MyApp;

经排查，Layout组件内的Footer使用了next-translate/useTranslation做国际化翻译，这应该是触发警告的原因：

function Contacts() {
  const { t } = useTranslation("translations");

  return (
    <footer className={styles.contacts}>
      <div className={styles.contacts__main}>
        <h1 className={styles.contacts__header}>{t("contacts")}</h1>
        ....

解决方案 #

方法1：用next-translate的appWithI18n包装App组件 #

next-translate针对App组件层级有专门的兼容处理，用appWithI18n包裹MyApp组件，可避免隐式注入getInitialProps：

import Layout from "../components/Layout";
import "../styles/globals.scss";
import type { AppProps } from "next/app";
import { appWithI18n } from "next-translate";

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
};

export default appWithI18n(MyApp);

方法2：调整Footer的翻译实现逻辑 #

避免在布局组件中直接使用客户端钩子触发服务端渲染逻辑，可改为在页面层级通过getStaticProps预取翻译内容，或者使用next-translate的Trans组件替代useTranslation（若业务场景允许）。

方法3：给App组件显式添加空的getStaticProps（临时方案，不推荐） #

通过给App组件添加空的getStaticProps覆盖隐式的getInitialProps，但可能影响next-translate的正常工作，仅作临时应急：

MyApp.getStaticProps = async () => {
  return { props: {} };
};

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