Привет .
Меня зовут Михаил, более 10 лет разрабатываю интернет-проекты: от сайтов до систем автоматизации.

Добро пожаловать в небольшой туториал о том, как добавить счётчик Яндекс.Метркика в приложение на Next.js. Это не требует установки сторонних библиотек.

Шаг 1

Создайте файл _document.js внутри каталога pages. Этот файл используется для изменения общей структуры страницы (теги html, head, body и пр). Вставьте в созданный файл код счётчика, который можно получить при создании счётчика или в его настройках на сайте Яндекс.Метрики.

В данном примере используется номер счётчика 12345678. Такие данные, как и остальные опции инициализации счётчика, принято выносить в переменные окружения или переменные компонента.

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />

        <script
            dangerouslySetInnerHTML={{
              __html: `
                (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
                m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
                (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
      
                ym(12345678, "init", {
                      clickmap:true,
                      trackLinks:true,
                      accurateTrackBounce:true
                });
              `,
            }}
          />
        <noscript>
          <div>
            <img src="https://mc.yandex.ru/watch/87388785" style={{ position:'absolute', left:'-9999px' }} alt="" />
          </div>
        </noscript>
      </body>
    </Html>
  )
}

Я назвал файл этот файл _document.tsx, так как в своих проектах предпочитаю использовать TypeScript.

Подробнее: https://nextjs.org/docs/advanced-features/custom-document