# Step 4: Next.js 프로젝트에 GA4 코드 추가하기 ## 이 문서의 목표 - `.env.local`에 측정 ID 추가 - `layout.tsx`에 GA4 스크립트 추가 - 코드 변경 내용 이해하기 --- ## Step 4-1: 환경변수 설정 ### 파일: `.env.local` 기존 내용에 GA 측정 ID를 추가합니다: ```env # WordPress REST API Base URL NEXT_PUBLIC_WP_API_BASE=https://2025032623012012057904.onamaeweb.jp/blog/wp-json/wp/v2 # Revalidate Secret (for /api/revalidate) REVALIDATE_SECRET=LWCTd22HKmCa8uNqOvaoTYlXoNONFVlhx # Google Analytics 4 NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX ← 실제 측정 ID로 교체 ``` ### 환경변수 이름 규칙 - `NEXT_PUBLIC_` 접두사: 브라우저에서 접근 가능 - GA는 클라이언트에서 실행되므로 `NEXT_PUBLIC_` 필수 --- ## Step 4-2: GoogleAnalytics 컴포넌트 생성 ### 새 파일: `components/GoogleAnalytics.tsx` ```tsx "use client"; import Script from "next/script"; const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID; export default function GoogleAnalytics() { // 측정 ID가 없으면 렌더링하지 않음 if (!GA_MEASUREMENT_ID) { return null; } return ( <> ); } ``` ### 코드 설명 | 부분 | 설명 | |------|------| | `"use client"` | 클라이언트 컴포넌트로 지정 | | `Script` | Next.js의 스크립트 최적화 컴포넌트 | | `strategy="afterInteractive"` | 페이지 로드 후 스크립트 실행 | | `gtag('config', ...)` | GA4에 페이지뷰 전송 | --- ## Step 4-3: layout.tsx 수정 ### 파일: `app/layout.tsx` ```tsx import type { Metadata } from "next"; import { Noto_Sans_JP } from "next/font/google"; import "./globals.css"; import Footer from "@/components/layout/footer"; import Header from "@/components/layout/header"; import AOSProvider from "@/components/AOSProvider"; import ReactQueryProvider from "@/components/ReactQueryProvider"; import SonnerToaster from "@/components/SonnerToaster"; import HolyLoader from "holy-loader"; import GoogleAnalytics from "@/components/GoogleAnalytics"; // ← 추가 const natoSansJp = Noto_Sans_JP({ variable: "--font-noto-sans-jp", subsets: ["latin"], weight: ["400", "700"], }); export const metadata: Metadata = { title: "PlanitAI", description: "Planit AI", icons: { icon: "/favicon2.svg", }, }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {/* ← 추가 */}
{children}