first commit

examples/with-segment-analytics/components/analytics.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { analytics } from "@/lib/segment";
+
+export default function Analytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    analytics.page();
+  }, [pathname, searchParams]);
+
+  return null;
+}

examples/with-segment-analytics/components/form.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import { analytics } from "@/lib/segment";
+
+export default function Form() {
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    analytics.track("Form Submitted", {
+      message,
+    });
+    setMessage("");
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <label>
+          <span>Message:</span>
+          <textarea
+            onChange={(e) => setMessage(e.target.value)}
+            value={message}
+          />
+        </label>
+        <button type="submit">submit</button>
+      </form>
+
+      <style jsx>{`
+        label span {
+          display: block;
+          margin-bottom: 12px;
+        }
+
+        textarea {
+          min-width: 300px;
+          min-height: 120px;
+        }
+
+        button {
+          margin-top: 12px;
+          display: block;
+        }
+      `}</style>
+    </>
+  );
+}

examples/with-segment-analytics/components/header.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+export default function Header() {
+  return (
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <Link href="/">Home</Link>
+          </li>
+          <li>
+            <Link href="/about">About</Link>
+          </li>
+          <li>
+            <Link href="/contact">Contact</Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+}