App defined as stateless function gets a warning

[eric-burel]

Describe the bug

App defined as stateless function won't work as expected (getInitialProps not detected, triggering a warning about namespaceRequired not being defined).

Occurs in next-i18next version

4.2.0

Example:

//import { AppProps } from "next/app";
//import { appWithTranslation } from "../lib/i18n";
//
///**
// * @see https://nextjs.org/docs/advanced-features/custom-app
// */
//const App = ({
//  Component, // active page
//  pageProps // empty for static pages or result of getInitialProps for dynamic pages
//}: AppProps) => <Component {...pageProps} />;
//export default appWithTranslation(App);

import React from "react";
import App from "next/app";
import { appWithTranslation } from "../lib/i18n";

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

export default appWithTranslation(MyApp)

Steps to reproduce

Comment or uncomment one of the 2 versions.

Expected behaviour

If using a class component is mandatory, it should be documented.

In Next doc, the stateless syntax is preferred: https://nextjs.org/docs/advanced-features/custom-app

[isaachinman]

Duplicate of #615.

From the exact link you provided:

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

More context.

[eric-burel]

Sorry for the dupe, PRed a clearer explanation in the README (#646)

It's easy to fall in this trap if you defined the custom app before adding i18n. The component version that extends App is uncommon (multiple level of inheritance is avoided in functional development, you barely see that in React code in the first place) and adds getInitialProps implicitely, so it's not clear that the stateless version (more common) needs it to be explicitely defined.

Thanks for the detailed explanation in the other issue!

[isaachinman]

The component version that extends App is uncommon

It's not "uncommon", it's just "fallen out of fashion" - it used to be the recommended way via the NextJs docs.