feat: add next-js to product analytics onboarding docs (#20239)

* add next to product analytics docs

* fix spelling

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 />
+        </>
+    )
+}

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,

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 />
         </>
     )
 }

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'

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 />
         </>
     )
 }

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 />
+        </>
+    )
+}