@posthog/wizard
Version:
The PostHog wizard helps you to configure your project
284 lines (259 loc) • 10 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getModernNextjsDocs = exports.getNextjsPagesRouterDocs = exports.getNextjsAppRouterDocs = void 0;
const urls_1 = require("../utils/urls");
const getNextjsAppRouterDocs = ({ host, language, }) => {
return `
==============================
FILE: PostHogProvider.${language === 'typescript' ? 'tsx' : 'jsx'} (put it somewhere where client files are, like the components folder)
LOCATION: Wherever other providers are, or the components folder
==============================
Changes:
- Create a PostHogProvider component that will be imported into the layout file.
- Make sure to include the defaults: '2025-05-24' option in the init call.
Example:
--------------------------------------------------
"use client"
import posthog from "posthog-js"
import { PostHogProvider as PHProvider, usePostHog } from "posthog-js/react"
import { Suspense, useEffect } from "react"
import { usePathname, useSearchParams } from "next/navigation"
export function PostHogProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: "/ingest",
ui_host: "${(0, urls_1.getUiHostFromHost)(host)}",
defaults: '2025-05-24',
capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this
debug: process.env.NODE_ENV === "development",
})
}, [])
return (
<PHProvider client={posthog}>
{children}
</PHProvider>
)
}
--------------------------------------------------
==============================
FILE: layout.${language === 'typescript' ? 'tsx' : 'jsx'}
LOCATION: Wherever the root layout is
==============================
Changes:
- Import the PostHogProvider from the providers file and wrap the app in it.
Example:
--------------------------------------------------
// other imports
import { PostHogProvider } from "LOCATION_OF_POSTHOG_PROVIDER"
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<PostHogProvider>
{/* other providers */}
{children}
{/* other providers */}
</PostHogProvider>
</body>
</html>
)
}
--------------------------------------------------
==============================
FILE: posthog.${language === 'typescript' ? 'ts' : 'js'}
LOCATION: Wherever works best given the project structure
==============================
Changes:
- Initialize the PostHog Node.js client
Example:
--------------------------------------------------
import { PostHog } from "posthog-node"
// NOTE: This is a Node.js client, so you can use it for sending events from the server side to PostHog.
export default function PostHogClient() {
const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
flushAt: 1,
flushInterval: 0,
})
return posthogClient
}
--------------------------------------------------
==============================
FILE: next.config.{js,ts,mjs,cjs}
LOCATION: Wherever the root next config is
==============================
Changes:
- Add rewrites to the Next.js config to support PostHog, if there are existing rewrites, add the PostHog rewrites to them.
- Add skipTrailingSlashRedirect to the Next.js config to support PostHog trailing slash API requests.
- This can be of type js, ts, mjs, cjs etc. You should adapt the file according to what extension it uses, and if it does not exist yet use '.js'.
Example:
--------------------------------------------------
const nextConfig = {
// other config
async rewrites() {
return [
{
source: "/ingest/static/:path*",
destination: "${(0, urls_1.getAssetHostFromHost)(host)}/static/:path*",
},
{
source: "/ingest/:path*",
destination: "${host}/:path*",
},
{
source: "/ingest/flags",
destination: "${host}/flags",
},
];
},
// This is required to support PostHog trailing slash API requests
skipTrailingSlashRedirect: true,
}
module.exports = nextConfig
--------------------------------------------------`;
};
exports.getNextjsAppRouterDocs = getNextjsAppRouterDocs;
const getNextjsPagesRouterDocs = ({ host, language, }) => {
return `
==============================
FILE: _app.${language === 'typescript' ? 'tsx' : 'jsx'}
LOCATION: Wherever the root _app.${language === 'typescript' ? 'tsx' : 'jsx'} file is
==============================
Changes:
- Initialize PostHog in _app.js.
- Wrap the application in PostHogProvider.
- Make sure to include the defaults: '2025-05-24' option in the init call.
Example:
--------------------------------------------------
import { useEffect } from "react"
import posthog from "posthog-js"
import { PostHogProvider } from "posthog-js/react"
export default function App({ Component, pageProps }) {
useEffect(() => {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
api_host: "/ingest",
ui_host: "${(0, urls_1.getUiHostFromHost)(host)}",
defaults: '2025-05-24',
capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this
debug: process.env.NODE_ENV === "development",
})
}, [])
return (
<PostHogProvider client={posthog}>
<Component {...pageProps} />
</PostHogProvider>
)
}
--------------------------------------------------
==============================
FILE: posthog.${language === 'typescript' ? 'ts' : 'js'}
LOCATION: Wherever works best given the project structure
==============================
Changes:
- Initialize the PostHog Node.js client
Example:
--------------------------------------------------
import { PostHog } from "posthog-node"
// NOTE: This is a Node.js client, so you can use it for sending events from the server side to PostHog.
export default function PostHogClient() {
const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
flushAt: 1,
flushInterval: 0,
})
return posthogClient
}
--------------------------------------------------
==============================
FILE: next.config.{js,ts,mjs,cjs}
LOCATION: Wherever the root next config is
==============================
Changes:
- Add rewrites to the Next.js config to support PostHog, if there are existing rewrites, add the PostHog rewrites to them.
- Add skipTrailingSlashRedirect to the Next.js config to support PostHog trailing slash API requests.
- This can be of type js, ts, mjs, cjs etc. You should adapt the file according to what extension it uses, and if it does not exist yet use '.js'.
Example:
--------------------------------------------------
const nextConfig = {
// other config
async rewrites() {
return [
{
source: "/ingest/static/:path*",
destination: "${(0, urls_1.getAssetHostFromHost)(host)}/static/:path*",
},
{
source: "/ingest/:path*",
destination: "${host}/:path*",
},
{
source: "/ingest/flags",
destination: "${host}/flags",
},
];
},
// This is required to support PostHog trailing slash API requests
skipTrailingSlashRedirect: true,
}
module.exports = nextConfig
--------------------------------------------------`;
};
exports.getNextjsPagesRouterDocs = getNextjsPagesRouterDocs;
const getModernNextjsDocs = ({ host, language, }) => {
return `
==============================
FILE: instrumentation-client.${language === 'typescript' ? 'ts' : 'js'}
LOCATION: in the root of the application or inside an src folder.
==============================
Changes:
- Create or update the instrumentation-client.${language === 'typescript' ? 'ts' : 'js'} file to use the PostHog client. If the file does not exist yet, create it.
- Do *not* import instrumentation-client.${language === 'typescript' ? 'ts' : 'js'} in any other file; Next.js will automatically handle it.
- Do not modify any other pages/components in the Next.js application; the PostHog client will be automatically initialized and handle all pageview tasks on its own.
- Make sure to include the defaults: '2025-05-24' option in the init call.
Example:
--------------------------------------------------
import posthog from "posthog-js"
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: "/ingest",
ui_host: "${(0, urls_1.getUiHostFromHost)(host)}",
defaults: '2025-05-24',
capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this
debug: process.env.NODE_ENV === "development",
});
--------------------------------------------------
==============================
FILE: next.config.{js,ts,mjs,cjs}
LOCATION: Wherever the root next config is
==============================
Changes:
- Add rewrites to the Next.js config to support PostHog, if there are existing rewrites, add the PostHog rewrites to them.
- Add skipTrailingSlashRedirect to the Next.js config to support PostHog trailing slash API requests.
- This can be of type js, ts, mjs, cjs etc. You should adapt the file according to what extension it uses, and if it does not exist yet use '.js'.
Example:
--------------------------------------------------
const nextConfig = {
// other config
async rewrites() {
return [
{
source: "/ingest/static/:path*",
destination: "${(0, urls_1.getAssetHostFromHost)(host)}/static/:path*",
},
{
source: "/ingest/:path*",
destination: "${host}/:path*",
},
{
source: "/ingest/flags",
destination: "${host}/flags",
},
];
},
// This is required to support PostHog trailing slash API requests
skipTrailingSlashRedirect: true,
}
module.exports = nextConfig
--------------------------------------------------`;
};
exports.getModernNextjsDocs = getModernNextjsDocs;
//# sourceMappingURL=docs.js.map