import { useEffect } from 'react' ; import type { AppProps } from 'next/app' ; import Router from 'next/router' ; import Head from 'next/head' ; import { ChakraProvider } from '@chakra-ui/react' ; import NProgress from 'nprogress' ; import splitbee from '@splitbee/web' ; import { theme } from '../theme' ; import { SEO } from '@/components/SEO' ; import { ThemeEditorProvider } from '@hypertheme-editor/chakra-ui' ; Router . events . on ( 'routeChangeStart' , ( ) => NProgress . start ( ) ) ; Router . events . on ( 'routeChangeComplete' , ( ) => NProgress . done ( ) ) ; Router . events . on ( 'routeChangeError' , ( ) => NProgress . done ( ) ) ; const inIframe = ( ) => window . location !== window . parent . location ; function App ( { Component , pageProps , router } ) { const isTemplate = router . asPath . startsWith ( '/templates/' ) ; useEffect ( ( ) => { if ( ! inIframe ( ) ) { splitbee . init ( ) ; } document . body . classList . add ( isTemplate ? 'template' : 'body' ) ; } , [ ] ) ; return ( < ChakraProvider theme = { theme } > < ThemeEditorProvider > { isTemplate && < SEO />} < Head > < meta name = "viewport" content = "width=device-width, initial-scale=1" / > < link rel = "shortcut icon" type = "image/x-icon" href = "/favicon.png" / > < link rel = "preconnect" href = "https://fonts.gstatic.com" / > < link href = "https://fonts.googleapis.com/css2?family=Work+Sans:wght@700&family=Inter:wght@400;500;600;700&display=swap" rel = "stylesheet" / > < /Head> < Component { ... pageProps } /> < /ThemeEditorProvider> < /ChakraProvider>); } export default App ;