An example of using PostHog for analytics with a Next.js application.
Sign up for a PostHog Cloud account.
Deploy the example using Vercel:
Remember to setup your NEXT_PUBLIC_POSTHOG_TOKEN environment variable in Vercel.
Execute create-next-app with npm or Yarn to bootstrap the example::
npx create-next-app --example https://github.com/leggetter/with-posthog
# or
yarn create next-app --example https://github.com/leggetter/with-posthogSign up for a PostHog Cloud account
Once you have your account, create a copy of the .env.local configuration file from the example .env.local.example file:
cp .env.local.example .env.local
Update the NEXT_PUBLIC_POSTHOG_TOKEN variable in the new .env.local file with your PostHog token.
Deploy it to the cloud with Vercel (Documentation).
Create and set an environment variable for NEXT_PUBLIC_POSTHOG_TOKEN using the following command and when prompted enter your PostHog token and select a for all environments:
vercel env add secret NEXT_PUBLIC_POSTHOG_TOKEN
Deploy:
vercel
Run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
Demonstates using PostHog for:
- Page Views
- Custom Events/Capture via JS Web
- Setting identity via JS Web
- Custom Events/Capture via Node.js
PostHog events dashboard
PostHog toolbar
PostHog Funnel
To learn more about PostHog, take a look at the following resources:
This is a Next.js project bootstrapped with create-next-app.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.