Как установить метрику в приложение на Next.js? Нужно код счетчика вставить в шаблон таким образом, чтобы он присутствовал на всех страницах сайта.
Для этого я буду использовать код счётчика и компонент, который будет отслеживать изменения в URL-адресе и фиксировать просмотры.
Решение основано на официальной документации Яндекса.
Код счетчика
Для подключения Яндекс Метрики к Next.js используем компонент <Script />.
Код счетчика Яндекс Метрики для Next.js
Вместо XXXXXXXX вставляем свой id счетчика.
Не забудьте указать defer: true, это отключит автоматическую отправку данных о просмотрах.
Согласно официальной документации яндекса по установке и настройке счетчика для SPA-сайтов, фиксировать показы страниц необходимо с помощью функции hit, ее нужно вызывать при каждом изменении страницы.
Используем hit внутри компонента YandexMetrika(). Показы будут фиксироваться при изменении URL-адреса или параметров в нем.
Код компонента YandexMetrika
components\YandexMetrika\YandexMetrika.jsx
Вместо XXXXXXXX вставляем свой id счетчика.
Код счётчика и компонент готовы. Теперь покажу пример подключения для более старого Next.js: Pages Router и нового App Router.
Используя Next.js: App Router
В случае с использованием App Router, вставляем счетчик яндекс метрики в файл layout.tsx перед закрывающим тегом body.
app\layout.tsx
Туда же импортируем компонент <YandexMetrika />, который будет отправлять данные в метрику при изменении URL-адреса или параметров в нем и добавляем в наш Layout. Для Next.js 14 оборачиваем компонент в <Suspense>, чтобы избежать prerendering Error.
Используя Next.js: Pages Router
В случае с использованием Pages Router, я вставляю счетчик яндекс метрики в _document.tsx.
src\pages\_document.tsx
Компонент <YandexMetrika /> будет находиться внутри общего макета <Layout />, в проекте он у меня один, поэтому я создал Custom App (файл _app.tsx) и обернул его этим макетом.
src\components\Layout\Layout.tsx
src\pages\_app.tsx
Подробнее про единый Layout и Custom App написано в официальной документации: Pages and Layouts
\n```\n\n\nВместо ```XXXXXXXX``` вставляем свой id счетчика.\n\nНе забудьте указать `defer: true`, это отключит автоматическую отправку данных о просмотрах. \n\nСогласно официальной документации яндекса по установке и настройке счетчика для SPA-сайтов, фиксировать показы страниц необходимо с помощью функции `hit`, ее нужно вызывать при каждом изменении страницы.\n\nИспользуем `hit` внутри компонента `YandexMetrika()`. Показы будут фиксироваться при изменении URL-адреса или параметров в нем.\n\n## Код компонента YandexMetrika\n\n\n```js /XXXXXXXX/\n'use client'\n\nimport { useEffect } from 'react'\nimport { usePathname, useSearchParams } from 'next/navigation'\n\nexport default function YandexMetrika() {\n const pathname = usePathname()\n const searchParams = useSearchParams()\n\n useEffect(() => {\n const url = `${pathname}?${searchParams}`\n ym(XXXXXXXX, 'hit', url);\n\n }, [pathname, searchParams])\n\n return null\n}\n```\n\n\nВместо ```XXXXXXXX``` вставляем свой id счетчика.\n\nКод счётчика и компонент готовы. Теперь покажу пример подключения для более старого `Next.js: Pages Router` и нового `App Router`.\n\n## Используя Next.js: App Router\n\nВ случае с использованием App Router, вставляем счетчик яндекс метрики в файл `layout.tsx` перед закрывающим тегом `body`.\n\n\n\n```js {24-39} /XXXXXXXX/ {41}\nimport { DarkModeProvider } from '@/context/darkModeContext';\nimport './globals.css';\nimport { Header } from '@/components/Header/Header';\nimport { Suspense } from 'react';\nimport Footer from '@/components/Footer/Footer';\nimport NextTopLoader from 'nextjs-toploader';\nimport YandexMetrika from '@/components/YandexMetrika/YandexMetrika';\nimport Script from 'next/script';\n\nexport const metadata = {\n title: 'Create Next App',\n description: 'Generated by create next app',\n};\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n \n >}>\n \n \n \n \n {children}\n \n \n \n \n );\n}\n```\n\n\nТуда же импортируем компонент ``, который будет отправлять данные в метрику при изменении URL-адреса или параметров в нем и добавляем в наш Layout. Для Next.js 14 оборачиваем компонент в ``, чтобы избежать prerendering Error.\n\n## Используя Next.js: Pages Router\n\nВ случае с использованием Pages Router, я вставляю счетчик яндекс метрики в `_document.tsx`.\n\n\n\n```js {11-26} /XXXXXXXX/\nimport {Html, Head, Main, NextScript} from 'next/document'\nimport Script from 'next/script';\n\nexport default function Document() {\n return (\n \n \n \n \n \n \n \n \n )\n}\n```\n\n\nКомпонент `````` будет находиться внутри общего макета ``````, в проекте он у меня один, поэтому я создал Custom App (файл _app.tsx) и обернул его этим макетом.\n\n\n\n```js {22}\nimport { ReactNode, useEffect, useState } from 'react';\nimport dynamic from 'next/dynamic';\nimport Header from '@/components/Header/Header';\nimport Footer from '../Footer/Footer';\nimport ScrollProgressBar from '@/components/ScrollProgressBar/ScrollProgressBar';\nimport { YandexMetrika } from '../YandexMetrika/YandexMetrika';\nimport SEO from '../SEO/SEO';\n\nconst Cursor = dynamic(() => import('../Cursor/Cursor'), { ssr: false });\nconst ScrollTopButton = dynamic(() => import('../../components/ScrollTopButton/ScrollTopButton'), { ssr: false });\n\ntype LayoutProps = {\n children?: ReactNode\n}\n\nexport default function Layout({ children }: LayoutProps) {\n\nreturn (\n\n<>\n \n \n \n \n {children}\n \n \n \n>\n); }\n```\n\n\n\n\n```js {35, 37}\nimport '@/styles/utils/normalize.css'\nimport '@/styles/_variables.scss'\nimport '@/styles/globals.scss'\nimport type {AppProps} from 'next/app'\nimport { Raleway, Roboto } from \"next/font/google\";\nimport Layout from \"@/components/Layout/Layout\";\nimport {DarkModeProvider} from \"@/context/darkModeContext\";\nimport { IconContext } from 'react-icons';\nimport { useEffect } from 'react';\nimport { useRouter } from 'next/router';\n// @ts-ignore\nimport NProgress from 'nprogress';\nimport \"nprogress/nprogress.css\";\nimport SEO from \"@/components/SEO/SEO\";\n// ...other code\n\nexport default function App({Component, pageProps}: AppProps) {\n// ...other code\n\nreturn (\n\n<>\n \n\n \n \n \n \n \n IconContext.Provider>\n \n>\n)\n}\n```\n\n\nПодробнее про единый Layout и Custom App написано в официальной документации: Pages and Layouts\n\nОфициальная документация Яндекса по установке и настройке счетчика для SPA-сайтов","headline":"Подключение счетчика Яндекс.Метрики в Next.js","url":"https://sereja-art.ru/blog/podkluchenie-yandex-metriki-nextjs/","image":{"@type":"ImageObject","url":"https://sereja-art.ru/uploads/podkluchenie_yandex_metriki_nextjs_preview_8e2cd2ab85.jpg"},"description":"Подключаю счетчик Яндекс Метрики к приложению на Next.js: руководство по установке","datePublished":"2023-06-23T21:20:53.327Z","publisher":{"@type":"Person","name":"Sergey Artemov","url":"https://sereja-art.ru","image":"/hero-avatar.jpg"},"author":{"@type":"Person","name":"Sergey Artemov","url":"https://sereja-art.ru","image":"/hero-avatar.jpg"}}]}