TypeScript integration with custom functional _app component, layout and additional pageProps

[nirtamir2]

Hi
I try to integrate next-i18next to my Next.js + TypeScript project.
It includes:

• A layout component pattern
• React query SSR - which means that pageProps gets additional property
  But wrapping my app with appWithTranslation function does have type error.

                      The types of 'props' are incompatible between these types.                         Type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<{ dehydratedState: unknown; }> & Readonly<{ children?: ReactNode; }>'.                           Property 'dehydratedState' is missing in type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' but required in type 'Readonly<{ dehydratedState: unknown; }>'.  _app.tsx(36, 3): 'dehydratedState' is declared here.

import { ReactElement, useState } from "react";
import { NextPage } from "next";
import { appWithTranslation } from "next-i18next";
import { AppProps as NextAppProps } from "next/app";
import { Hydrate, QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import { DefaultLayout } from "@/layouts/DefaultLayout";

type AppProps<P = unknown> = Omit<NextAppProps<P>, "pageProps"> & {
  pageProps: P;
};

export type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactElement;
};

type AppPropsWithLayout<P = unknown> = AppProps<P> & {
  Component: NextPageWithLayout;
};

const App = ({
  Component,
  pageProps,
}: AppPropsWithLayout<{
  dehydratedState: unknown;
}>) => {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
          },
        },
      })
  );

  const getLayout =
    Component.getLayout ?? ((page) => <DefaultLayout>{page}</DefaultLayout>);

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        {getLayout(<Component {...pageProps} />)}
      </Hydrate>
      <ReactQueryDevtools position="bottom-right" />
    </QueryClientProvider>
  );
};

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
export default appWithTranslation(App);

Can you show me an example of using _app with appWithTranslation and additional props like what I've tried to do?

[Syner-David]

Have you find a way to use 'appWithTranslation' with custom props for _app ?

[nirtamir2]

Not yet