vercel · leerob · Aug 30, 2023 · Jul 6, 2023 · Jul 6, 2023 · Jul 18, 2023
diff --git a/examples/with-segment-analytics/README.md b/examples/with-segment-analytics/README.md
@@ -1,6 +1,6 @@
-# Example app with analytics
+# With Segment Analytics
 
-This example shows how to use Next.js along with [Segment Analytics](https://segment.com). A [custom app](https://nextjs.org/docs/advanced-features/custom-app) is used to inject the [Segment Analytics.js snippet](https://github.com/segmentio/snippet). The server and client-side call the [Page API](https://segment.com/docs/connections/spec/page/), while components call the [Track API](https://segment.com/docs/connections/spec/track/) on user actions (Refer to [`contact.js`](https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/pages/contact.js)).
+This example shows how to use Next.js along with [Segment Analytics](https://segment.com) using [segmentio/analytics-next](https://github.com/segmentio/analytics-next). The main app [layout](https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/app/layout.tsx) includes a client component (analytics.tsx)[(https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/components/analytics.tsx)] loads Segment and also exports the `analytics` object which can be imported and used to call the [Track API](https://segment.com/docs/connections/spec/track/) on user actions (Refer to [`contact.js`](https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/app/contact/page.tsx)).
 
 ## Deploy your own
 

diff --git a/...les/with-segment-analytics/pages/about.js → ...with-segment-analytics/app/about/page.tsx b/...les/with-segment-analytics/pages/about.js → ...with-segment-analytics/app/about/page.tsx
@@ -1,3 +1,7 @@
+export const metadata = {
+  title: 'About',
+}
+
 export default function About() {
   return (
     <div>

diff --git a/examples/with-segment-analytics/app/contact/page.tsx b/examples/with-segment-analytics/app/contact/page.tsx
@@ -0,0 +1,14 @@
+import Form from '@/components/form'
+
+export const metadata = {
+  title: 'Contact',
+}
+
+export default function Contact() {
+  return (
+    <div>
+      <h1>This is the Contact page</h1>
+      <Form />
+    </div>
+  )
+}
diff --git a/examples/with-segment-analytics/app/layout.tsx b/examples/with-segment-analytics/app/layout.tsx
@@ -0,0 +1,21 @@
+import { Inter } from 'next/font/google'
+import Header from '@/components/header'
+import Analytics from '@/components/analytics'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body className={inter.className}>
+        <Header />
+        {children}
+      </body>
+      <Analytics />
+    </html>
+  )
+}
diff --git a/...les/with-segment-analytics/pages/index.js → examples/with-segment-analytics/app/page.tsx b/...les/with-segment-analytics/pages/index.js → examples/with-segment-analytics/app/page.tsx
@@ -1,3 +1,7 @@
+export const metadata = {
+  title: 'Home',
+}
+
 export default function Home() {
   return (
     <div>

diff --git a/examples/with-segment-analytics/components/Page.js b/examples/with-segment-analytics/components/Page.js
diff --git a/examples/with-segment-analytics/components/analytics.tsx b/examples/with-segment-analytics/components/analytics.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { useEffect } from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { AnalyticsBrowser } from '@segment/analytics-next'
+
+// This write key is associated with https://segment.com/nextjs-example/sources/nextjs.
+const DEFAULT_WRITE_KEY = 'NPsk1GimHq09s7egCUlv7D0tqtUAU5wa'
+
+const analytics = AnalyticsBrowser.load({
+  writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY || DEFAULT_WRITE_KEY,
+})
+
+export function useSegment() {
+  return analytics;
+}
+
+export default function Analytics() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    analytics.page()
+  }, [pathname, searchParams])
+
+  return null
+}
diff --git a/...s/with-segment-analytics/pages/contact.js → ...ith-segment-analytics/components/form.tsx b/...s/with-segment-analytics/pages/contact.js → ...ith-segment-analytics/components/form.tsx
@@ -1,19 +1,21 @@
+'use client'
 import { useState } from 'react'
+import { useSegment } from '@/components/analytics'
 
-const Contact = () => {
+export default function Form() {
+  const analytics = useSegment();
   const [message, setMessage] = useState('')
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
-    global.analytics.track('Form Submitted', {
+    analytics.track('Form Submitted', {
       message,
     })
     setMessage('')
   }
 
   return (
-    <div>
-      <h1>This is the Contact page</h1>
+    <>
       <form onSubmit={handleSubmit}>
         <label>
           <span>Message:</span>
@@ -41,7 +43,6 @@ const Contact = () => {
           display: block;
         }
       `}</style>
-    </div>
+    </>
   )
 }
-export default Contact
diff --git a/...th-segment-analytics/components/Header.js → ...h-segment-analytics/components/header.tsx b/...th-segment-analytics/components/Header.js → ...h-segment-analytics/components/header.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 
 export default function Header() {

diff --git a/examples/with-segment-analytics/package.json b/examples/with-segment-analytics/package.json
@@ -6,9 +6,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "@segment/snippet": "^4.0.1",
+    "@segment/analytics-next": "1.53.0",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.4.0",
+    "@types/react": "18.2.14",
+    "typescript": "5.1.6"
   }
 }
diff --git a/examples/with-segment-analytics/pages/_app.js b/examples/with-segment-analytics/pages/_app.js
diff --git a/examples/with-segment-analytics/tsconfig.json b/examples/with-segment-analytics/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}