\n```\n\nВместо ```XXXXXXXX``` вставляете свой id счетчика.\n\n## Используя Pages Router\n\nВ случае с использованием Pages Router, я вставляю счетчик яндекс метрики в `_document.tsx`.\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У меня один общий макет `````` для всего сайта, поэтому я создал Custom App и обернул его этим макетом.\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 \n \n\n)\n}\n```\n\nПодробнее про единый Layout и Custom App в документации: https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts\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В макет вставляю компонент ``````, который будет отправлять данные в метрику при изменении URL-адреса или параметров в нем.\n\n\n```js\n'use client'\n\nimport { useEffect } from 'react'\nimport { usePathname, useSearchParams } from 'next/navigation'\n\nexport function YandexMetrika() {\n const pathname = usePathname()\n const searchParams = useSearchParams()\n\nuseEffect(() => {\n const url = `${pathname}?${searchParams}`\n ym(XXXXXXXX, 'hit', url);\n\n}, [pathname, searchParams])\n\n return null\n}\n```\n\n## Используя App Router\n\nВ случае с использованием App Router, вставляем счетчик яндекс метрики в файл `layout.tsx` перед закрывающим тегом `body`.\n\n\n```js {24-39}\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Туда же импортируем компонент, который будет отправлять данные в метрику при изменении URL-адреса или параметров в нем и добавляем в наш Layout. Для Next.js 14 оборачиваем компонент в ``, чтобы избежать prerendering Error.\n\n\n```js\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Официальная документация Яндекса по установке и настройке счетчика для SPA-сайтов: https://yandex.ru/support/metrica/code/counter-spa-setup.html","headline":"Подключение счетчика Яндекс.Метрики в Next.JS","url":"https://sereja-art.ru/blog/podkluchenie-yandex-metriki-nextjs/","image":{"@type":"ImageObject","url":"http://tech.sereja-art.ru/upload/blogs/podkluchenie-yandex-metriki-nextjs/podkluchenie-yandex-metriki-nextjs-preview.jpg"},"description":"Подключение счетчика Яндекс.Метрики к сайту на Next.JS","datePublished":"2023-06-24T00:00:00.000Z","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"}}]}
Купите мне кофе

Это помогает создавать больше полезных и интересных материалов.

Угостить кофе

отсканируйте QR-код или нажмите на кнопку