main-site/components/layout.tsx

import PageFooter from './footer'
import PageNavbar from './navbar'
import Script from 'next/script'
import { Page, Main } from './styles/generic'


const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <Page>
      <Script id="matomo_analytics" 
      defer src='https://static.cloudflareinsights.com/beacon.min.js' 
      data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
      </Script>
      <Script id="matomo_analytics">
        {`
              var _paq = window._paq = window._paq || [];
              /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
              _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
              _paq.push(["setCookieDomain", "www.neshweb.net"]);
              _paq.push(["disableCookies"]);
              _paq.push(['trackPageView']);
              _paq.push(['enableLinkTracking']);
              (function() {
                var u="//tracking.neshweb.net/";
                _paq.push(['setTrackerUrl', u+'matomo.php']);
                _paq.push(['setSiteId', '2']);
                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
              })();
            `}
      </Script>

      <PageNavbar />
      <Main>
        {children}
      </Main>
      <PageFooter />
    </Page>
  );
}

export default Layout;