Next.js Quick Start

This tutorial demonstrates how to integrate Journium with your Next.js application.

Setup

Set up Journium for your Next.js application.

Clone the Next.js App Router example repository to get started quicklyView Repository

Install @journium/nextjs

The Journium Next.js SDK gives you access to pre-built hooks and components to help you generate events in your Next.js application and get insights from your data.

Run the following command to install the SDK:

Terminal
npm i @journium/nextjs

Set your Journium Publishable Key

  1. Sign up for a Journium account for free at journium.app/signup

  2. Create an application in your Journium dashboard

  3. Copy your Publishable Key from the Developers | API Keys section

    Dashboard URLs automatically navigate to your app - just click!

  4. Create a .env.local file in your project root:

    touch .env.local

  5. Add your key to the .env.local file:

    .env.local
    NEXT_PUBLIC_JOURNIUM_PUBLISHABLE_KEY=your_publishable_key_here

  6. Verify your setup - check that the key is correctly saved:

    cat .env.local
# Should show: NEXT_PUBLIC_JOURNIUM_PUBLISHABLE_KEY=pk_test_...

    Development instances use pk_test_ keys. Production keys start with pk_live_.

Add <NextJourniumProvider> to your app

The <NextJourniumProvider> component provides session and user context to Journium's hooks. It's recommended to wrap your entire app at the entry point with <NextJourniumProvider> to make analytics globally accessible throughout your application.

app/layout.tsx
import { NextJourniumProvider } from '@journium/nextjs';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <NextJourniumProvider>
          {children}
        </NextJourniumProvider>
      </body>
    </html>
  );
}
pages/_app.tsx
import type { AppProps } from 'next/app';
import { NextJourniumProvider } from '@journium/nextjs';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <NextJourniumProvider>
      <Component {...pageProps} />
    </NextJourniumProvider>
  );
}

Run the Development Server

Start your application:

Terminal
npm run dev

Using a custom port? Next.js defaults to port 3000. To use a different port, set the PORT environment variable or use -p flag: npm run dev -- -p 3001

Verify Your Setup

Open http://localhost:3000 (or your custom port) in your browser to see the application running.

Send Events to Journium

Navigate around your app to automatically send events to Journium.

Then view your collected events at Developers | Events.

Success indicator: You should see events appearing in your dashboard within a few seconds.

Generate Your First Insight

When you create an app in Journium, a default Insight Tracker is automatically created. This tracker helps you test data ingestion and insight generation.

  1. Go to your Developers | Insight Trackers page
  2. Click the Analyze now button for the tracker titled "User Engagement"
  3. Monitor the job status in Developers | Jobs
  4. Wait for the job to complete (usually takes 1-2 minutes)
  5. View your generated insights at Dashboard | Insights

Done

Congratulations! You've successfully created your first insight with Journium!

Troubleshooting

What's next?

Custom Events

Learn how to send your own custom events to track user behavior.

Insight Trackers

Create custom analytics and understand how insights are generated.

Last updated on

Journium Docs

Add tracking to your application and get insights from your data in minutes.

What is Journium

Journium transforms analytics from passive dashboards to proactive insights. An AI-driven system that detects meaningful changes and explains what happened in plain language.

On this page

Setup
Install @journium/nextjs
Set your Journium Publishable Key
Add <NextJourniumProvider> to your app
Run the Development Server
Verify Your Setup
Send Events to Journium
Generate Your First Insight
Done
Troubleshooting
What's next?