laconic.com/src/pages/_app.tsx

import '~/css/global.scss'

import { NextComponentType, NextPageContext } from 'next'
import { AppProps } from 'next/app'
import { RealViewportProvider } from 'next-real-viewport'
import { ThemeProvider } from 'next-themes'
import * as React from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'

// import { Footer } from '~/components/common/footer'
// import { Header } from '~/components/common/header'
import { Noise } from '~/components/common/noise'
import { AnimationContextProvider } from '~/context/animation'
import { basementLog, isProd } from '~/lib/constants'
import { FontsReadyScript } from '~/lib/font-scripts'
import { GAScripts, useAppGA } from '~/lib/ga'

export type Page<P = Record<string, unknown>> = NextComponentType<
  NextPageContext,
  Record<string, unknown>,
  P
> & { getLayout?: GetLayoutFn<P> }

export type GetLayoutFn<P = Record<string, unknown>> = (
  props: AppProps<P>
) => React.ReactNode

if (isProd) {
  // eslint-disable-next-line no-console
  console.log(basementLog)
}

const queryClient = new QueryClient()

const App = ({ Component, pageProps, ...rest }: AppProps) => {
  useAppGA()

  React.useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if (event.code === `Tab`) {
        document.body.classList.add('user-is-tabbing')
      }
    }

    function handleMouseDown() {
      document.body.classList.remove('user-is-tabbing')
    }

    window.addEventListener('keydown', handleKeyDown)
    window.addEventListener('mousedown', handleMouseDown)
    return () => {
      window.removeEventListener('keydown', handleKeyDown)
      window.removeEventListener('mousedown', handleMouseDown)
    }
  }, [])

  const getLayout: GetLayoutFn =
    (Component as any).getLayout ||
    (({ Component, pageProps }) => <Component {...pageProps} />)

  return (
    <QueryClientProvider client={queryClient}>
      <RealViewportProvider debounceResize={false}>
        <Noise />
        <AnimationContextProvider>
          <ThemeProvider enableSystem={false} defaultTheme="dark">
            <GAScripts />
            <FontsReadyScript />
            {/* <Header /> */}
            {getLayout({ Component, pageProps, ...rest })}
            {/* <Footer /> */}
          </ThemeProvider>
        </AnimationContextProvider>
      </RealViewportProvider>
    </QueryClientProvider>
  )
}

export default App