Sign in

Next.js Quickstart

In the following, we will integrate Insights with a Next.js application.

Check out the example repository on GitHub

Check out the example repository

To get up to speed, it's easiest to check out the example repository. It contains a fully working Next.js application with User Management integrated.

git clone https://github.com/anzuhq/examples.git --depth 1
cd examples/nextjs-insights

bash

Install dependencies

This project has been tested with Node.js 16.17 and pnpm 7.9.5, please make sure that your system is compatible. After cloning the repository, we can install all required dependencies, which may take a while.

pnpm install

bash

Deploy the project initially

To receive a URI to send users to, we need to deploy the project once. We'll use Vercel for this.

$ pnpm run deploy

> nextjs-insights@0.1.0 deploy /examples/nextjs-insights
> vercel

Vercel CLI 28.2.2
? Set up and deploy “~/examples/nextjs-insights”? [Y/n] y
? Which scope do you want to deploy to? demo-scope
? What’s your project’s name? demo-nextjs-insights
? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings (Next.js):
- Build Command: next build
- Development Command: next dev --port $PORT
- Install Command: `yarn install`, `pnpm install`, or `npm install`
- Output Directory: Next.js default
? Want to modify these settings? [y/N] n
🔗  Linked to demo-scope/demo-nextjs-insights (created .vercel)
🔍  Inspect: https://vercel.com/demo-scope/demo-nextjs-insights/... [1s]
✅  Production: https://demo-nextjs-insights.vercel.app [41s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/demo-scope/demo-nextjs-insights/settings```

bash

Make sure to copy the production URL (https://demo-nextjs-insights.vercel.app in the example above), we'll need it later.

Set up Insights

Allow the site origin

Up next, we have to allow the site origin in the Anzu dashboard. Go to the Insights Settings and add the production URL to the list of allowed origins.

Configure the Insights script

To initialize the Insights Script, we'll need to store the environment ID found in the insights settings as an environment variable.

In a new .env.production file, store:

NEXT_PUBLIC_INSIGHTS_ENVIRONMENT_ID=<environment ID>

text

Deploy again

Deploy your application again by running pnpm run deploy --prod in your terminal. This will create a new deployment and update the production deployment.

Trying it out!

Head over to the page and push some events, then check back in the Anzu dashboard and you should a new anonymous user appear in your most active users section. You can also enter a known User Identity ID to link the Insights user to.

Next steps

  • Integrate Insights on your site and start pushing events
  • Ensure known users are linked to their User Identities to get a full picture of their activity
  • Talk to your users!