From 6c3234166c793b65e60b3008ce3ce8f08e643ff9 Mon Sep 17 00:00:00 2001
From: Raquel Smith <raquelmsmith@users.noreply.github.com>
Date: Fri, 16 Feb 2024 10:17:46 -0800
Subject: [PATCH] feat: add next-js to product analytics onboarding docs
 (#20239)

* add next to product analytics docs

* fix spelling
---
 .../product-analytics/AllJSFinalSteps.tsx     | 22 +++++++++++++++++++
 .../ProductAnalyticsSDKInstructions.tsx       |  4 +++-
 .../sdks/product-analytics/html-snippet.tsx   | 12 ++--------
 .../sdks/product-analytics/index.tsx          |  1 +
 .../sdks/product-analytics/js-web.tsx         | 12 ++--------
 .../sdks/product-analytics/next-js.tsx        | 14 ++++++++++++
 6 files changed, 44 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/AllJSFinalSteps.tsx
 create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/next-js.tsx

diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/AllJSFinalSteps.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/AllJSFinalSteps.tsx
new file mode 100644
index 0000000000000..8086a64eb437d
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/AllJSFinalSteps.tsx
@@ -0,0 +1,22 @@
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+
+function JSEventSnippet(): JSX.Element {
+    return (
+        <CodeSnippet language={Language.JavaScript}>{`posthog.capture('my event', { property: 'value' })`}</CodeSnippet>
+    )
+}
+
+export const ProductAnalyticsAllJSFinalSteps = (): JSX.Element => {
+    return (
+        <>
+            <h4>Send events</h4>
+            <p>
+                Click around and view a couple pages to generate some events. Our package automatically captures them
+                for you.
+            </p>
+            <h4>Optional: Send a manual event</h4>
+            <p>If you'd like, you can manually define events, too.</p>
+            <JSEventSnippet />
+        </>
+    )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
index e3291c8d38124..c6bc257335e44 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx
@@ -9,6 +9,7 @@ import {
     ProductAnalyticsFlutterInstructions,
     ProductAnalyticsGoInstructions,
     ProductAnalyticsIOSInstructions,
+    ProductAnalyticsNextJSInstructions,
     ProductAnalyticsNodeInstructions,
     ProductAnalyticsPHPInstructions,
     ProductAnalyticsPythonInstructions,
@@ -19,7 +20,8 @@ import {
 export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.JS_WEB]: JSWebInstructions,
     [SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions,
-    // add next, getsby, and others here
+    [SDKKey.NEXT_JS]: ProductAnalyticsNextJSInstructions,
+    // add getsby and other frameworks here
     [SDKKey.IOS]: ProductAnalyticsIOSInstructions,
     [SDKKey.REACT_NATIVE]: ProductAnalyticsRNInstructions,
     [SDKKey.ANDROID]: ProductAnalyticsAndroidInstructions,
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/html-snippet.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/html-snippet.tsx
index 48dc2e5a8058f..85ea4699977fd 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/html-snippet.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/html-snippet.tsx
@@ -1,22 +1,14 @@
 import { LemonDivider } from '@posthog/lemon-ui'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
 
 import { SDKHtmlSnippetInstructions } from '../sdk-install-instructions/html-snippet'
-
-function JSEventSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.JavaScript}>{`posthog.capture('my event', { property: 'value' })`}</CodeSnippet>
-    )
-}
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
 
 export function HTMLSnippetInstructions(): JSX.Element {
     return (
         <>
             <SDKHtmlSnippetInstructions />
             <LemonDivider thick dashed className="my-4" />
-            <h4>Optional: Send a manual event</h4>
-            <p>Our snippet will autocapture events for you, but you can manually define events, too!</p>
-            <JSEventSnippet />
+            <ProductAnalyticsAllJSFinalSteps />
         </>
     )
 }
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
index 72e13e2a4a295..291d5555184a4 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx
@@ -6,6 +6,7 @@ export * from './go'
 export * from './html-snippet'
 export * from './ios'
 export * from './js-web'
+export * from './next-js'
 export * from './nodejs'
 export * from './php'
 export * from './python'
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx
index fe26ef71b1088..0c4289254152b 100644
--- a/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx
@@ -1,22 +1,14 @@
 import { LemonDivider } from '@posthog/lemon-ui'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
 
 import { SDKInstallJSWebInstructions } from '../sdk-install-instructions'
-
-function JSEventSnippet(): JSX.Element {
-    return (
-        <CodeSnippet language={Language.JavaScript}>{`posthog.capture('my event', { property: 'value' })`}</CodeSnippet>
-    )
-}
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
 
 export function JSWebInstructions(): JSX.Element {
     return (
         <>
             <SDKInstallJSWebInstructions />
             <LemonDivider thick dashed className="my-4" />
-            <h4>Optional: Send a manual event</h4>
-            <p>Our package will autocapture events for you, but you can manually define events, too!</p>
-            <JSEventSnippet />
+            <ProductAnalyticsAllJSFinalSteps />
         </>
     )
 }
diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/next-js.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/next-js.tsx
new file mode 100644
index 0000000000000..3ce56e7e78ecd
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/product-analytics/next-js.tsx
@@ -0,0 +1,14 @@
+import { LemonDivider } from '@posthog/lemon-ui'
+
+import { SDKInstallNextJSInstructions } from '../sdk-install-instructions/next-js'
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
+
+export function ProductAnalyticsNextJSInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallNextJSInstructions />
+            <LemonDivider thick dashed className="my-4" />
+            <ProductAnalyticsAllJSFinalSteps />
+        </>
+    )
+}