import type { NextPage } from "next" ; import PlausibleProvider from "next-plausible" ; import type { AppProps } from "next/app" ; import Head from "next/head" ; import React , { Fragment , useState } from "react" ; import type { PropsWithChildren } from "react" ; import { QueryClient , QueryClientProvider } from "react-query" ; import { ReactQueryDevtools } from "react-query/devtools" ; import { Hydrate } from "react-query/hydration" ; import { ThemeProvider } from "styled-components" ; import { DefaultLayout } from "@/layouts/Default" ; import { GlobalStyles } from "@/styles" ; import { TGlobalThemeObject } from "@/typings/styled" ; if ( process . env . NEXT_PUBLIC_API_MOCKING_ENABLED === "true" ) { require ( "mocks" ) ; } type NextPageWithLayout = NextPage & { Layout ? : ( { children } : PropsWithChildren < unknown > ) => JSX . Element ; } ; type AppPropsWithLayout = AppProps & { Component : NextPageWithLayout ; } ; type TThemeObjectInitial = Pick < TGlobalThemeObject , "theme" > ; const initTheme = { theme : undefined , } ; const MyApp = ( { Component , pageProps } ) => { const reactQueryClient = new QueryClient ( ) ; const [ themeObject , setThemeObject ] = useState < TThemeObjectInitial > ( initTheme ) ; const ComponentLayout = Component . Layout ?? DefaultLayout ; function getCSSVarValue ( variable ) { if ( typeof window !== "undefined" ) return getComputedStyle ( document . body ) . getPropertyValue ( variable ) ; return undefined ; } const changeThemeVariant = ( theme ) => { setThemeObject ( { theme } ) ; } ; const themeForContext = { ... themeObject , getCSSVarValue , changeThemeVariant , } ; return ( < Fragment > < Head > < meta name = "viewport" content = "initial-scale=1.0, width=device-width" / > < /Head> < QueryClientProvider client = { reactQueryClient } > < Hydrate state = { pageProps . dehydratedState } > < PlausibleProvider domain = "sreetamdas.com" customDomain = "sreetamdas.com" > < ThemeProvider theme = { themeForContext } > < GlobalStyles /> < ComponentLayout > < Component { ... pageProps } / > < /ComponentLayout> < /ThemeProvider> < /PlausibleProvider> < /Hydrate> < ReactQueryDevtools / > < /QueryClientProvider> < /Fragment>); } ; export default MyApp ;