mip-website/pages/appContainer.js

import React from 'react'
import Header from './components/Layout/header'
import Footer from './components/Layout/footer'
import Head from 'next/head'
import dynamic from 'next/dynamic'
import { Router } from 'next/router'

const Chat = dynamic(() => import('./pack'), { ssr: false })
const AppContainer = ({ children }) => {
  return (
    <div>
      <Head>
        <meta name="google-site-verification" content="hygRCp6fRa9qi8RXCaAosXK4mBcnCJVRH1ayHtAQy8o" />
        <script
          type='text/javascript'
          dangerouslySetInnerHTML={{
            __html: `
                (function(c,l,a,r,i,t,y){
                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
                })(window, document, "clarity", "script", "kggvhu7xfo");
              `
          }}
        />
      </Head>
      <Chat />
      <Header />
      <main id='main-content'>{children}</main>
      <Footer />
    </div>
  )
}

export default AppContainer