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 (
+ {`posthog.capture('my event', { property: 'value' })`}
+ )
+}
+
+export const ProductAnalyticsAllJSFinalSteps = (): JSX.Element => {
+ return (
+ <>
+
Send events
+
+ Click around and view a couple pages to generate some events. Our package automatically captures them
+ for you.
+
+ Optional: Send a manual event
+ If you'd like, you can manually define events, too.
+
+ >
+ )
+}
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 (
- {`posthog.capture('my event', { property: 'value' })`}
- )
-}
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
export function HTMLSnippetInstructions(): JSX.Element {
return (
<>
- Optional: Send a manual event
- Our snippet will autocapture events for you, but you can manually define events, too!
-
+
>
)
}
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 (
- {`posthog.capture('my event', { property: 'value' })`}
- )
-}
+import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps'
export function JSWebInstructions(): JSX.Element {
return (
<>
- Optional: Send a manual event
- Our package will autocapture events for you, but you can manually define events, too!
-
+
>
)
}
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 (
+ <>
+
+
+
+ >
+ )
+}