Build warning: appWithTranslation opted-out Automatic Static Optimization due to getInitialProps in pages/_app

[nataliaroque77]

Describe the bug

_app.tsx has not getInitialProps, but appWithTranslation has getInitialProps

When building we get below warning
Warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app. This does not opt-out pages with getStaticProps

Occurs in next-i18next version

"next-i18next": "^4.2.1"

Steps to reproduce

yarn run build

Expected behaviour

No opted-out Automatic Static Optimization warnings

[nataliaroque77]

@isaachinman do you know a solution regarding this waring, I read different reports about this, but there is not solution.

Thank you, kindly

[isaachinman]

Hi there, please search through previous issues.

[nataliaroque77]

@isaachinman

Please re-open issue.
Is related to appWithTranslation HOC getInitialProps. I found related issues, but there is not solution

Related issues:
#77
#586

[fillon]

@nataliaroque77 how did you fix it?

[nataliaroque77]

There is not fix for this yet, appWithTranslation has getInitialProps. People with similar issues were worst, their app was not doing translations, etc.
Our app is doing translations, things work fine, but the warning is not nice! Team that deploy raised this waring, we don't like it.

[SalahAdDin]

since we cant use serverSideProps together with initialProps. we can make use of React FunctionComponent.defaultProps
here is the workaround that works for me, and it still works with initialProps (#615 (comment))

1. particular page

Page.defaultProps = {
      i18nNamespaces: ['home-page']
}

1. main app / _app.tsx

MyApp.getInitialProps = async (appContext: AppContextType<Router>) => {
    const appProps = await App.getInitialProps(appContext)
    const defaultProps = appContext.Component.defaultProps
    return {
        ...appProps,
        pageProps: {
            namespacesRequired: [...(appProps.pageProps.namespacesRequired || []), ...(defaultProps?.i18nNamespaces || [])]
        }
    }
}

Well, i thought it would work good, but it works with delay:

At the first loading, it does not load the skill-test namespaces, i need to reload it to get that namespace active and the proper localization strings.

Inspecting it for the first time we get this:

After reloading, we can find the required namespace:

Both namespaces are in the option, but just the first one, defined on _app.js by getInitialProps, is loaded.

Why does this happen?

[isaachinman]

@SalahAdDin This will be solved by #869.