Setup GA4

app/layout.tsx

@@ -4,6 +4,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import Link from "next/link";
 import "./globals.css";
+import { GoogleAnalytics } from "@next/third-parties/google";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -42,8 +43,17 @@ export default function RootLayout({
 						</div>
 					</header>
 					<div className="flex-1">{children}</div>
+					<footer className="border-t">
+						<div className="mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-6 text-xs text-muted-foreground">
+							<p>© {new Date().getFullYear()} Nozomi Hijikata</p>
+							<Link href="/privacy" className="hover:underline">
+								Privacy Policy
+							</Link>
+						</div>
+					</footer>
 				</div>
 			</body>
+			<GoogleAnalytics gaId="G-BVCVM7BMVH" />
 		</html>
 	);
 }

app/page.tsx

@@ -12,7 +12,8 @@ export default function Home() {
 			<TypographyH1>nozomemein</TypographyH1>
 			<div>
 				<TypographyP>
-					Hello, I&apos;m nozomemein, a passionate software engineer.
+					Hello, I&apos;m Nozomi Hijikata (nozomemein), a passionate software
+					engineer.
 				</TypographyP>
 				<TypographyP>
 					I enjoy building solutions and continuously learning to improve my

app/privacy/page.tsx

@@ -0,0 +1,19 @@
+import PrivacyContent, { frontmatter } from "@/content/pages/privacy.mdx";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: frontmatter.title,
+	description: frontmatter.description,
+	alternates: { canonical: "/privacy" },
+	robots: { index: true, follow: true },
+};
+
+export default function Privacy() {
+	return (
+		<main className="mx-auto w-full max-w-3xl px-6 py-16">
+			<article className="space-y-6 text-sm leading-7 text-foreground">
+				<PrivacyContent />
+			</article>
+		</main>
+	);
+}

content/pages/privacy.mdx

@@ -0,0 +1,17 @@
+---
+title: "プライバシーポリシー"
+description: "Google アナリティクス（GA4）の利用について"
+---
+
+# プライバシーポリシー
+
+当サイトでは、アクセス解析のために Google による解析ツール「Google アナリティクス（GA4）」を利用しています。
+
+Google アナリティクスは、Cookie 等を利用して当サイトの利用状況（閲覧したページ、滞在時間、参照元、端末情報など）を収集し、Google に送信する場合があります。収集されるデータは匿名であり、個人を特定するものではありません。
+
+Cookie を無効にすることで、データ収集を拒否することが可能です。設定方法はご利用のブラウザのヘルプ等をご確認ください。
+
+Google アナリティクスの利用規約およびプライバシーに関する詳細は、Google の提供するページをご参照ください。
+
+- [Google アナリティクス利用規約](https://marketingplatform.google.com/about/analytics/terms/jp/)
+- [Google のプライバシーポリシー](https://policies.google.com/privacy?hl=ja)

mdx.d.ts

@@ -0,0 +1,11 @@
+declare module "*.mdx" {
+	import type { ComponentType } from "react";
+
+	const MDXComponent: ComponentType;
+	export const frontmatter: {
+		title?: string;
+		description?: string;
+		[key: string]: unknown;
+	};
+	export default MDXComponent;
+}

package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
-		"start": "next start",
+		"start": "npx serve@latest out",
 		"lint": "biome lint .",
 		"format": "biome format --write .",
 		"check": "biome check .",
@@ -15,6 +15,7 @@
 	"dependencies": {
 		"@mdx-js/react": "^3.1.0",
 		"@next/mdx": "^16.1.6",
+		"@next/third-parties": "^16.1.6",
 		"@radix-ui/react-slot": "^1.2.4",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
@@ -30,11 +31,11 @@
 		"wrangler": "^4.61.1"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "^1.9.4",
 		"@types/mdx": "^2.0.13",
 		"@types/node": "^20.19.30",
 		"@types/react": "^18.3.27",
 		"@types/react-dom": "^18.3.7",
-		"@biomejs/biome": "^1.9.4",
 		"postcss": "^8.5.6",
 		"tailwindcss": "^3.4.19",
 		"typescript": "^5.9.3"

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - "."
+
+ignoredBuiltDependencies:
+  - '@biomejs/biome'

tsconfig.json

@@ -24,6 +24,7 @@
 	},
 	"include": [
 		"next-env.d.ts",
+		"**/*.d.ts",
 		"**/*.ts",
 		"**/*.tsx",
 		".next/types/**/*.ts",