From 072667548e7559a4fdc9667793d7b9927339af81 Mon Sep 17 00:00:00 2001
From: Luke Bussey <luke@loganbussey.com>
Date: Thu, 6 Jul 2023 06:48:09 -0700
Subject: [PATCH 1/9] Update example to use segmentio/analytics-next and NextJS
 app layout

---
 examples/with-segment-analytics/README.md     |  4 +--
 .../{pages/about.js => app/about/page.tsx}    |  4 +++
 .../app/contact/page.tsx                      | 14 ++++++++
 .../with-segment-analytics/app/layout.tsx     | 21 +++++++++++
 .../{pages/index.js => app/page.tsx}          |  4 +++
 .../with-segment-analytics/components/Page.js | 17 ---------
 .../components/analytics.tsx                  | 23 ++++++++++++
 .../{pages/contact.js => components/form.tsx} | 14 ++++----
 .../components/{Header.js => header.tsx}      |  1 -
 examples/with-segment-analytics/package.json  |  7 +++-
 examples/with-segment-analytics/pages/_app.js | 36 -------------------
 examples/with-segment-analytics/tsconfig.json | 28 +++++++++++++++
 12 files changed, 109 insertions(+), 64 deletions(-)
 rename examples/with-segment-analytics/{pages/about.js => app/about/page.tsx} (70%)
 create mode 100644 examples/with-segment-analytics/app/contact/page.tsx
 create mode 100644 examples/with-segment-analytics/app/layout.tsx
 rename examples/with-segment-analytics/{pages/index.js => app/page.tsx} (70%)
 delete mode 100644 examples/with-segment-analytics/components/Page.js
 create mode 100644 examples/with-segment-analytics/components/analytics.tsx
 rename examples/with-segment-analytics/{pages/contact.js => components/form.tsx} (78%)
 rename examples/with-segment-analytics/components/{Header.js => header.tsx} (93%)
 delete mode 100644 examples/with-segment-analytics/pages/_app.js
 create mode 100644 examples/with-segment-analytics/tsconfig.json

diff --git a/examples/with-segment-analytics/README.md b/examples/with-segment-analytics/README.md
index 10906c1ac4f3c..53698224c130b 100644
--- 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/examples/with-segment-analytics/pages/about.js b/examples/with-segment-analytics/app/about/page.tsx
similarity index 70%
rename from examples/with-segment-analytics/pages/about.js
rename to examples/with-segment-analytics/app/about/page.tsx
index b7a8cc625091c..616ac9625aac4 100644
--- a/examples/with-segment-analytics/pages/about.js
+++ b/examples/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
new file mode 100644
index 0000000000000..e1223920f2453
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..d61385ceb3265
--- /dev/null
+++ 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/examples/with-segment-analytics/pages/index.js b/examples/with-segment-analytics/app/page.tsx
similarity index 70%
rename from examples/with-segment-analytics/pages/index.js
rename to examples/with-segment-analytics/app/page.tsx
index f069f23390606..8c632f41fd25b 100644
--- a/examples/with-segment-analytics/pages/index.js
+++ b/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
deleted file mode 100644
index c5d50c3e14295..0000000000000
--- a/examples/with-segment-analytics/components/Page.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import Router from 'next/router'
-import Header from './Header'
-
-// Track client-side page views with Segment
-Router.events.on('routeChangeComplete', (url) => {
-  window.analytics.page(url)
-})
-
-const Page = ({ children }) => (
-  <div>
-    <Header />
-    {children}
-  </div>
-)
-
-export default Page
diff --git a/examples/with-segment-analytics/components/analytics.tsx b/examples/with-segment-analytics/components/analytics.tsx
new file mode 100644
index 0000000000000..2528c09389465
--- /dev/null
+++ b/examples/with-segment-analytics/components/analytics.tsx
@@ -0,0 +1,23 @@
+'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'
+
+export const analytics = AnalyticsBrowser.load({
+  writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY || DEFAULT_WRITE_KEY,
+})
+
+export default function Analytics() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    analytics.page()
+  }, [pathname, searchParams])
+
+  return null
+}
diff --git a/examples/with-segment-analytics/pages/contact.js b/examples/with-segment-analytics/components/form.tsx
similarity index 78%
rename from examples/with-segment-analytics/pages/contact.js
rename to examples/with-segment-analytics/components/form.tsx
index 1fd3f6936f230..5bc133c321caf 100644
--- a/examples/with-segment-analytics/pages/contact.js
+++ b/examples/with-segment-analytics/components/form.tsx
@@ -1,19 +1,20 @@
+'use client'
 import { useState } from 'react'
+import { analytics } from '@/components/analytics'
 
-const Contact = () => {
+export default function Form() {
   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 +42,6 @@ const Contact = () => {
           display: block;
         }
       `}</style>
-    </div>
+    </>
   )
 }
-export default Contact
diff --git a/examples/with-segment-analytics/components/Header.js b/examples/with-segment-analytics/components/header.tsx
similarity index 93%
rename from examples/with-segment-analytics/components/Header.js
rename to examples/with-segment-analytics/components/header.tsx
index 110f5c172f800..68edfe251205b 100644
--- a/examples/with-segment-analytics/components/Header.js
+++ b/examples/with-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
index e7f5b01511684..cf615a727fc7a 100644
--- 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
deleted file mode 100644
index 5c2c2bf7d0a2d..0000000000000
--- a/examples/with-segment-analytics/pages/_app.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Page from '../components/Page'
-import Script from 'next/script'
-import * as snippet from '@segment/snippet'
-
-// This write key is associated with https://segment.com/nextjs-example/sources/nextjs.
-const DEFAULT_WRITE_KEY = 'NPsk1GimHq09s7egCUlv7D0tqtUAU5wa'
-
-function renderSnippet() {
-  const opts = {
-    apiKey: process.env.NEXT_PUBLIC_ANALYTICS_WRITE_KEY || DEFAULT_WRITE_KEY,
-    // note: the page option only covers SSR tracking.
-    // Page.js is used to track other events using `window.analytics.page()`
-    page: true,
-  }
-
-  if (process.env.NODE_ENV === 'development') {
-    return snippet.max(opts)
-  }
-
-  return snippet.min(opts)
-}
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <Page>
-      {/* Inject the Segment snippet into the <head> of the document  */}
-      <Script
-        id="segment-script"
-        dangerouslySetInnerHTML={{ __html: renderSnippet() }}
-      />
-      <Component {...pageProps} />
-    </Page>
-  )
-}
-
-export default MyApp
diff --git a/examples/with-segment-analytics/tsconfig.json b/examples/with-segment-analytics/tsconfig.json
new file mode 100644
index 0000000000000..e06a4454ab062
--- /dev/null
+++ 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"]
+}

From 11bff8345c879b078261356cde6343a168f813da Mon Sep 17 00:00:00 2001
From: Luke Bussey <luke@loganbussey.com>
Date: Thu, 6 Jul 2023 16:48:03 -0700
Subject: [PATCH 2/9] Implement useSegment hook

---
 examples/with-segment-analytics/components/analytics.tsx | 8 ++++++--
 examples/with-segment-analytics/components/form.tsx      | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/examples/with-segment-analytics/components/analytics.tsx b/examples/with-segment-analytics/components/analytics.tsx
index 2528c09389465..feb901549c982 100644
--- a/examples/with-segment-analytics/components/analytics.tsx
+++ b/examples/with-segment-analytics/components/analytics.tsx
@@ -7,10 +7,14 @@ import { AnalyticsBrowser } from '@segment/analytics-next'
 // This write key is associated with https://segment.com/nextjs-example/sources/nextjs.
 const DEFAULT_WRITE_KEY = 'NPsk1GimHq09s7egCUlv7D0tqtUAU5wa'
 
-export const analytics = AnalyticsBrowser.load({
+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()
@@ -20,4 +24,4 @@ export default function Analytics() {
   }, [pathname, searchParams])
 
   return null
-}
+}
\ No newline at end of file
diff --git a/examples/with-segment-analytics/components/form.tsx b/examples/with-segment-analytics/components/form.tsx
index 5bc133c321caf..ceed4640682fa 100644
--- a/examples/with-segment-analytics/components/form.tsx
+++ b/examples/with-segment-analytics/components/form.tsx
@@ -1,8 +1,9 @@
 'use client'
 import { useState } from 'react'
-import { analytics } from '@/components/analytics'
+import { useSegment } from '@/components/analytics'
 
 export default function Form() {
+  const analytics = useSegment();
   const [message, setMessage] = useState('')
 
   const handleSubmit = (e: React.FormEvent) => {

From df9efcb13cc80bc129930964e6a4a9736426d412 Mon Sep 17 00:00:00 2001
From: Luke Bussey <luke@loganbussey.com>
Date: Mon, 17 Jul 2023 18:58:48 -0700
Subject: [PATCH 3/9] Update to use hook

---
 examples/with-segment-analytics/.env.local.example  |  2 ++
 .../with-segment-analytics/components/analytics.tsx | 13 ++-----------
 examples/with-segment-analytics/components/form.tsx |  3 ++-
 examples/with-segment-analytics/hooks/useSegment.ts |  9 +++++++++
 4 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 examples/with-segment-analytics/.env.local.example
 create mode 100644 examples/with-segment-analytics/hooks/useSegment.ts

diff --git a/examples/with-segment-analytics/.env.local.example b/examples/with-segment-analytics/.env.local.example
new file mode 100644
index 0000000000000..54e6fa3d3f231
--- /dev/null
+++ b/examples/with-segment-analytics/.env.local.example
@@ -0,0 +1,2 @@
+// This write key is associated with https://segment.com/nextjs-example/sources/nextjs.
+NEXT_PUBLIC_SEGMENT_WRITE_KEY=NPsk1GimHq09s7egCUlv7D0tqtUAU5wa
\ No newline at end of file
diff --git a/examples/with-segment-analytics/components/analytics.tsx b/examples/with-segment-analytics/components/analytics.tsx
index feb901549c982..7273ebcbad3a4 100644
--- a/examples/with-segment-analytics/components/analytics.tsx
+++ b/examples/with-segment-analytics/components/analytics.tsx
@@ -2,22 +2,13 @@
 
 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;
-}
+import { useSegment } from "@/hooks/useSegment"
 
 export default function Analytics() {
   const pathname = usePathname()
   const searchParams = useSearchParams()
+  const analytics = useSegment()
 
   useEffect(() => {
     analytics.page()
diff --git a/examples/with-segment-analytics/components/form.tsx b/examples/with-segment-analytics/components/form.tsx
index ceed4640682fa..5aa0e58b9492e 100644
--- a/examples/with-segment-analytics/components/form.tsx
+++ b/examples/with-segment-analytics/components/form.tsx
@@ -1,6 +1,7 @@
 'use client'
+
 import { useState } from 'react'
-import { useSegment } from '@/components/analytics'
+import { useSegment } from '@/hooks/useSegment'
 
 export default function Form() {
   const analytics = useSegment();
diff --git a/examples/with-segment-analytics/hooks/useSegment.ts b/examples/with-segment-analytics/hooks/useSegment.ts
new file mode 100644
index 0000000000000..23147941a88bf
--- /dev/null
+++ b/examples/with-segment-analytics/hooks/useSegment.ts
@@ -0,0 +1,9 @@
+import { AnalyticsBrowser } from '@segment/analytics-next'
+
+const analytics = AnalyticsBrowser.load({
+  writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!
+})
+
+export function useSegment() {
+  return analytics;
+}
\ No newline at end of file

From 04f3d4ddf3c13035200db677c0cf396752ee6373 Mon Sep 17 00:00:00 2001
From: Luke Bussey <luke@loganbussey.com>
Date: Mon, 31 Jul 2023 09:02:23 -0700
Subject: [PATCH 4/9] Update to remove hook and just return analytics

---
 examples/with-segment-analytics/components/analytics.tsx | 6 ++----
 examples/with-segment-analytics/components/form.tsx      | 3 +--
 examples/with-segment-analytics/hooks/useSegment.ts      | 9 ---------
 examples/with-segment-analytics/lib/segment.ts           | 5 +++++
 4 files changed, 8 insertions(+), 15 deletions(-)
 delete mode 100644 examples/with-segment-analytics/hooks/useSegment.ts
 create mode 100644 examples/with-segment-analytics/lib/segment.ts

diff --git a/examples/with-segment-analytics/components/analytics.tsx b/examples/with-segment-analytics/components/analytics.tsx
index 7273ebcbad3a4..64d684e518baf 100644
--- a/examples/with-segment-analytics/components/analytics.tsx
+++ b/examples/with-segment-analytics/components/analytics.tsx
@@ -2,17 +2,15 @@
 
 import { useEffect } from 'react'
 import { usePathname, useSearchParams } from 'next/navigation'
-
-import { useSegment } from "@/hooks/useSegment"
+import { analytics } from '@/lib/segment'
 
 export default function Analytics() {
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const analytics = useSegment()
 
   useEffect(() => {
     analytics.page()
   }, [pathname, searchParams])
 
   return null
-}
\ No newline at end of file
+}
diff --git a/examples/with-segment-analytics/components/form.tsx b/examples/with-segment-analytics/components/form.tsx
index 5aa0e58b9492e..317fdd3c2f855 100644
--- a/examples/with-segment-analytics/components/form.tsx
+++ b/examples/with-segment-analytics/components/form.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import { useState } from 'react'
-import { useSegment } from '@/hooks/useSegment'
+import { analytics } from '@/lib/segment'
 
 export default function Form() {
-  const analytics = useSegment();
   const [message, setMessage] = useState('')
 
   const handleSubmit = (e: React.FormEvent) => {
diff --git a/examples/with-segment-analytics/hooks/useSegment.ts b/examples/with-segment-analytics/hooks/useSegment.ts
deleted file mode 100644
index 23147941a88bf..0000000000000
--- a/examples/with-segment-analytics/hooks/useSegment.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { AnalyticsBrowser } from '@segment/analytics-next'
-
-const analytics = AnalyticsBrowser.load({
-  writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!
-})
-
-export function useSegment() {
-  return analytics;
-}
\ No newline at end of file
diff --git a/examples/with-segment-analytics/lib/segment.ts b/examples/with-segment-analytics/lib/segment.ts
new file mode 100644
index 0000000000000..d828cb22047c7
--- /dev/null
+++ b/examples/with-segment-analytics/lib/segment.ts
@@ -0,0 +1,5 @@
+import { AnalyticsBrowser } from '@segment/analytics-next'
+
+export const analytics = AnalyticsBrowser.load({
+  writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!,
+})

From 9a9fa306fe18da5be7913fe51d2577e581c5f199 Mon Sep 17 00:00:00 2001
From: Luke Bussey <luke@loganbussey.com>
Date: Thu, 10 Aug 2023 10:36:47 -0700
Subject: [PATCH 5/9] Update readme

---
 examples/with-segment-analytics/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/with-segment-analytics/README.md b/examples/with-segment-analytics/README.md
index 53698224c130b..268b3a67e4278 100644
--- a/examples/with-segment-analytics/README.md
+++ b/examples/with-segment-analytics/README.md
@@ -1,6 +1,6 @@
 # With Segment Analytics
 
-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)).
+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)] which 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.tsx`](https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/app/contact/page.tsx)).
 
 ## Deploy your own
 

From 9d3c9d75ced1e432d8bdcec6d39608aa099628c8 Mon Sep 17 00:00:00 2001
From: Luke Bussey <luke@loganbussey.com>
Date: Thu, 10 Aug 2023 10:44:14 -0700
Subject: [PATCH 6/9] Add pages router example

---
 .../.env.local.example                        |  2 +
 .../.gitignore                                | 35 ++++++++++++++
 .../README.md                                 | 27 +++++++++++
 .../components/analytics.tsx                  | 13 ++++++
 .../components/form.tsx                       | 46 +++++++++++++++++++
 .../components/header.tsx                     | 21 +++++++++
 .../lib/segment.ts                            |  5 ++
 .../package.json                              | 19 ++++++++
 .../pages/_app.tsx                            | 16 +++++++
 .../pages/about.tsx                           | 14 ++++++
 .../pages/contact.tsx                         | 16 +++++++
 .../pages/index.tsx                           | 14 ++++++
 .../tsconfig.json                             | 28 +++++++++++
 13 files changed, 256 insertions(+)
 create mode 100644 examples/with-segment-analytics-pages-router/.env.local.example
 create mode 100644 examples/with-segment-analytics-pages-router/.gitignore
 create mode 100644 examples/with-segment-analytics-pages-router/README.md
 create mode 100644 examples/with-segment-analytics-pages-router/components/analytics.tsx
 create mode 100644 examples/with-segment-analytics-pages-router/components/form.tsx
 create mode 100644 examples/with-segment-analytics-pages-router/components/header.tsx
 create mode 100644 examples/with-segment-analytics-pages-router/lib/segment.ts
 create mode 100644 examples/with-segment-analytics-pages-router/package.json
 create mode 100644 examples/with-segment-analytics-pages-router/pages/_app.tsx
 create mode 100644 examples/with-segment-analytics-pages-router/pages/about.tsx
 create mode 100644 examples/with-segment-analytics-pages-router/pages/contact.tsx
 create mode 100644 examples/with-segment-analytics-pages-router/pages/index.tsx
 create mode 100644 examples/with-segment-analytics-pages-router/tsconfig.json

diff --git a/examples/with-segment-analytics-pages-router/.env.local.example b/examples/with-segment-analytics-pages-router/.env.local.example
new file mode 100644
index 0000000000000..54e6fa3d3f231
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/.env.local.example
@@ -0,0 +1,2 @@
+// This write key is associated with https://segment.com/nextjs-example/sources/nextjs.
+NEXT_PUBLIC_SEGMENT_WRITE_KEY=NPsk1GimHq09s7egCUlv7D0tqtUAU5wa
\ No newline at end of file
diff --git a/examples/with-segment-analytics-pages-router/.gitignore b/examples/with-segment-analytics-pages-router/.gitignore
new file mode 100644
index 0000000000000..8f322f0d8f495
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/with-segment-analytics-pages-router/README.md b/examples/with-segment-analytics-pages-router/README.md
new file mode 100644
index 0000000000000..71fefec4dfb97
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/README.md
@@ -0,0 +1,27 @@
+# With Segment Analytics (Pages Router)
+
+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 custom app [component](https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics-pages-router/pages/_app_.tsx) includes a component (analytics.tsx)[(https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics-pages-router/components/analytics.tsx)] which 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.tsx`](https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics-pages-router/pages/contact.tsx)).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-segment-analytics-pages-router)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-segment-analytics-pages-router&project-name=with-segment-analytics-pages-router&repository-name=with-segment-analytics-pages-router)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-segment-analytics-pages-router with-segment-analytics-app
+```
+
+```bash
+yarn create next-app --example with-segment-analytics-pages-router with-segment-analytics-app
+```
+
+```bash
+pnpm create next-app --example with-segment-analytics-pages-router with-segment-analytics-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-segment-analytics-pages-router/components/analytics.tsx b/examples/with-segment-analytics-pages-router/components/analytics.tsx
new file mode 100644
index 0000000000000..7182b6b6a76df
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/components/analytics.tsx
@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import { analytics } from '@/lib/segment'
+
+export default function Analytics() {
+  const { asPath } = useRouter()
+
+  useEffect(() => {
+    analytics.page()
+  }, [asPath])
+
+  return null
+}
diff --git a/examples/with-segment-analytics-pages-router/components/form.tsx b/examples/with-segment-analytics-pages-router/components/form.tsx
new file mode 100644
index 0000000000000..58930c4f2db05
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/components/form.tsx
@@ -0,0 +1,46 @@
+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>
+    </>
+  )
+}
diff --git a/examples/with-segment-analytics-pages-router/components/header.tsx b/examples/with-segment-analytics-pages-router/components/header.tsx
new file mode 100644
index 0000000000000..68edfe251205b
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/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>
+  )
+}
diff --git a/examples/with-segment-analytics-pages-router/lib/segment.ts b/examples/with-segment-analytics-pages-router/lib/segment.ts
new file mode 100644
index 0000000000000..d828cb22047c7
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/lib/segment.ts
@@ -0,0 +1,5 @@
+import { AnalyticsBrowser } from '@segment/analytics-next'
+
+export const analytics = AnalyticsBrowser.load({
+  writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!,
+})
diff --git a/examples/with-segment-analytics-pages-router/package.json b/examples/with-segment-analytics-pages-router/package.json
new file mode 100644
index 0000000000000..cf615a727fc7a
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/package.json
@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@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-router/pages/_app.tsx b/examples/with-segment-analytics-pages-router/pages/_app.tsx
new file mode 100644
index 0000000000000..c688385f19b24
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/pages/_app.tsx
@@ -0,0 +1,16 @@
+import type { AppProps } from 'next/app'
+import { Inter } from 'next/font/google'
+import Header from '@/components/header'
+import Analytics from '@/components/analytics'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <main className={inter.className}>
+      <Header />
+      <Component {...pageProps} />
+      <Analytics />
+    </main>
+  )
+}
diff --git a/examples/with-segment-analytics-pages-router/pages/about.tsx b/examples/with-segment-analytics-pages-router/pages/about.tsx
new file mode 100644
index 0000000000000..e8045004061be
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/pages/about.tsx
@@ -0,0 +1,14 @@
+import Head from 'next/head'
+
+export default function About() {
+  return (
+    <>
+      <Head>
+        <title>About</title>
+      </Head>
+      <div>
+        <h1>This is the About page</h1>
+      </div>
+    </>
+  )
+}
diff --git a/examples/with-segment-analytics-pages-router/pages/contact.tsx b/examples/with-segment-analytics-pages-router/pages/contact.tsx
new file mode 100644
index 0000000000000..74230b58ed39a
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/pages/contact.tsx
@@ -0,0 +1,16 @@
+import Head from 'next/head'
+import Form from '@/components/form'
+
+export default function Contact() {
+  return (
+    <>
+      <Head>
+        <title>Contact</title>
+      </Head>
+      <div>
+        <h1>This is the Contact page</h1>
+        <Form />
+      </div>
+    </>
+  )
+}
diff --git a/examples/with-segment-analytics-pages-router/pages/index.tsx b/examples/with-segment-analytics-pages-router/pages/index.tsx
new file mode 100644
index 0000000000000..0bf386bafe5fd
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/pages/index.tsx
@@ -0,0 +1,14 @@
+import Head from 'next/head'
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Home</title>
+      </Head>
+      <div>
+        <h1>This is the Home page</h1>
+      </div>
+    </>
+  )
+}
diff --git a/examples/with-segment-analytics-pages-router/tsconfig.json b/examples/with-segment-analytics-pages-router/tsconfig.json
new file mode 100644
index 0000000000000..e06a4454ab062
--- /dev/null
+++ b/examples/with-segment-analytics-pages-router/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"]
+}

From 5216458b46520b04242ca52d9d68e8ef298b9c49 Mon Sep 17 00:00:00 2001
From: Luke Bussey <luke@loganbussey.com>
Date: Thu, 10 Aug 2023 11:54:12 -0700
Subject: [PATCH 7/9] Update to pages router example to use routeChangeComplete

---
 .../components/analytics.tsx                       | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/examples/with-segment-analytics-pages-router/components/analytics.tsx b/examples/with-segment-analytics-pages-router/components/analytics.tsx
index 7182b6b6a76df..3fcefcdc81131 100644
--- a/examples/with-segment-analytics-pages-router/components/analytics.tsx
+++ b/examples/with-segment-analytics-pages-router/components/analytics.tsx
@@ -3,11 +3,21 @@ import { useRouter } from 'next/router'
 import { analytics } from '@/lib/segment'
 
 export default function Analytics() {
-  const { asPath } = useRouter()
+  const router = useRouter()
 
   useEffect(() => {
     analytics.page()
-  }, [asPath])
+
+    const handleRouteChange = () => {
+      analytics.page()
+    }
+
+    router.events.on('routeChangeComplete', handleRouteChange)
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [])
 
   return null
 }

From 6d4193932b3eec04092bcd758462d1d540adbe70 Mon Sep 17 00:00:00 2001
From: Luke Bussey <luke@loganbussey.com>
Date: Thu, 10 Aug 2023 12:02:20 -0700
Subject: [PATCH 8/9] Update to match @kylemh example

---
 .../components/analytics.tsx                              | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/examples/with-segment-analytics-pages-router/components/analytics.tsx b/examples/with-segment-analytics-pages-router/components/analytics.tsx
index 3fcefcdc81131..8c247d86c7102 100644
--- a/examples/with-segment-analytics-pages-router/components/analytics.tsx
+++ b/examples/with-segment-analytics-pages-router/components/analytics.tsx
@@ -8,14 +8,10 @@ export default function Analytics() {
   useEffect(() => {
     analytics.page()
 
-    const handleRouteChange = () => {
-      analytics.page()
-    }
-
-    router.events.on('routeChangeComplete', handleRouteChange)
+    router.events.on('routeChangeComplete', () => analytics.page())
 
     return () => {
-      router.events.off('routeChangeComplete', handleRouteChange)
+      router.events.off('routeChangeComplete', () => analytics.page())
     }
   }, [])
 

From b46dfd0b8a2dde557e52cce7aec894d4edbf5f8a Mon Sep 17 00:00:00 2001
From: Luke Bussey <luke@loganbussey.com>
Date: Mon, 14 Aug 2023 08:23:34 -0700
Subject: [PATCH 9/9] Fix lint error

---
 .../components/analytics.tsx                                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/with-segment-analytics-pages-router/components/analytics.tsx b/examples/with-segment-analytics-pages-router/components/analytics.tsx
index 8c247d86c7102..8f6a704516cb3 100644
--- a/examples/with-segment-analytics-pages-router/components/analytics.tsx
+++ b/examples/with-segment-analytics-pages-router/components/analytics.tsx
@@ -13,7 +13,7 @@ export default function Analytics() {
     return () => {
       router.events.off('routeChangeComplete', () => analytics.page())
     }
-  }, [])
+  }, [router.events])
 
   return null
 }