next-i18next: Next.js 12.3.0 AppProps generic breaks appWithTranslation type

Next.js 12.3.0 #38867 introduces the use of a generic for AppProps type, that is incompatible with appWithTranslation type.

To Reproduce

The following example causes a TypeScript error (TS2345):Argument of type '({ Component, pageProps }: AppProps<{ session: Session;}>) => JSX.Element' is not assignable to parameter of type 'ComponentType<AppProps>'.

const App = ({Component, pageProps}: AppProps<{session: Session}>) => (
  <SessionProvider session={pageProps.session}>
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  </SessionProvider>
)

export default appWithTranslation(App)

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 25
Comments: 17 (5 by maintainers)

Commits related to this issue

Make _nextI18Next optional for next@12.3, fixes #1944 This change is to allow compatibility for next@12.3 — committed to gazs/next-i18next by gazs 2 years ago

Most upvoted comments

@gazs I don’t think you want to do that. What you want is extend SSRConfig to allow whatever the pageProps are and include _nextI18Next as well.

As I see it, the PR is actually correct. _nextI18Next is nullable, as it may or may not be provided in each page, depending on if the page calls serverSideTranslations. Looking at the code for appWithTranslation, _nextI18Next is even checked for null/undefined. Also, I would say that _nextI18Next is an internal library type which the consumer shouldn’t need to care about when calling appWithTranslation.

So #1948 would fix this. It can even include some cleanup in the function, as there are a few redundant if-checks.

Ref the “extending with what pageProps are” solution; is it even possible in Typescript as of today? Wouldn’t that be a higher kind type, which isn’t implemented? Ref https://github.com/microsoft/TypeScript/issues/1213

Also, extending the type would still require the caller to send in the SSRConfig, which is not expected.

Another workaround:

const MyApp = ({Component, pageProps}: AppProps<YourType & SSRConfig>) => (

oddsund on Oct 11, 2022

you can use this till they fix this bug export default appWithTranslation(MyApp) as FC

Thanks Ebrahim, worked for me with a little tweak: export default appWithTranslation(MyApp as FC)

aziaziazi on Sep 20, 2022

a new major version will be published as soon as -> #1966

adrai on Oct 25, 2022

extend SSRConfig to allow whatever the pageProps are and include _nextI18Next as well.

pageProps is {} and extending it is essentially what the existing code does as far as I understand. however it fails because the Validator type expects a {} – unsure where that comes from so far

gazs on Sep 12, 2022