fix(types): add custom types to pageProps with translation

2 files changed, 15 insertions, 4 deletions

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5bc9f85..ec5dab7 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -11,13 +11,14 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   const { locale, defaultLocale } = useRouter();
   const appLocale: string = locale || settings.locales.defaultLocale;
   const getLayout = Component.getLayout ?? ((page) => page);
+  const { translation, ...componentProps } = pageProps;
 
   return (
     <AckeeProvider domain={settings.ackee.url} siteId={settings.ackee.siteId}>
       <IntlProvider
         locale={appLocale}
         defaultLocale={defaultLocale}
-        messages={pageProps.translation}
+        messages={translation}
       >
         <ThemeProvider
           defaultTheme="system"
@@ -25,7 +26,7 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
           enableSystem={true}
         >
           <PrismThemeProvider>
-            {getLayout(<Component {...pageProps} />, {})}
+            {getLayout(<Component {...componentProps} />, {})}
           </PrismThemeProvider>
         </ThemeProvider>
       </IntlProvider>
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index c11c31b..64bb3af 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -1,6 +1,7 @@
 import { NextPage } from 'next';
-import { AppProps } from 'next/app';
+import { AppProps as NextAppProps } from 'next/app';
 import { ReactElement, ReactNode } from 'react';
+import { MessageFormatElement } from 'react-intl';
 
 export type NextPageWithLayoutOptions = {
   withExtraPadding?: boolean;
@@ -15,7 +16,16 @@ export type NextPageWithLayout<T = {}> = NextPage<T> & {
   ) => ReactNode;
 };
 
-export type AppPropsWithLayout = AppProps & {
+// modified version - allows for custom pageProps type, falling back to 'any'
+type AppProps<P = any> = {
+  pageProps: P;
+} & Omit<NextAppProps<P>, 'pageProps'>;
+
+type CustomPageProps = {
+  translation: Record<string, string> | Record<string, MessageFormatElement[]>;
+};
+
+export type AppPropsWithLayout = AppProps<CustomPageProps> & {
   Component: NextPageWithLayout;
 };