설치
npm install @next/third-parties@latest예시 코드
import { GoogleAnalytics } from '@next/third-parties/google' // ✨
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body>
{children}
</body>
<GoogleAnalytics gaId="G-XYZ" /> // ✨
</html>
);
}<!-- 구글이 제공한 Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-169...256"> // ✨ gaid 복사(AW169...256)
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-16256...'); // ✨ gaid 복사(AW169...256)
</script>
참고자료
https://nextjs.org/docs/messages/next-script-for-ga#use-nextthird-parties-to-add-google-analytics
Using Google Analytics with Next.js (through `next/script`)
Prefer next/script component when using the inline script for Google Analytics. An inline script was used for Google Analytics which might impact your webpage's performance. Instead, we recommend using next/script through the @next/third-parties library. @
nextjs.org
Optimizing: Third Party Libraries | Next.js
Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
nextjs.org
'프론트엔드 > Next.js' 카테고리의 다른 글
설치
npm install @next/third-parties@latest예시 코드
import { GoogleAnalytics } from '@next/third-parties/google' // ✨
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body>
{children}
</body>
<GoogleAnalytics gaId="G-XYZ" /> // ✨
</html>
);
}<!-- 구글이 제공한 Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-169...256"> // ✨ gaid 복사(AW169...256)
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-16256...'); // ✨ gaid 복사(AW169...256)
</script>
참고자료
https://nextjs.org/docs/messages/next-script-for-ga#use-nextthird-parties-to-add-google-analytics
Using Google Analytics with Next.js (through `next/script`)
Prefer next/script component when using the inline script for Google Analytics. An inline script was used for Google Analytics which might impact your webpage's performance. Instead, we recommend using next/script through the @next/third-parties library. @
nextjs.org
Optimizing: Third Party Libraries | Next.js
Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
nextjs.org
