> ## Documentation Index
> Fetch the complete documentation index at: https://docs.litlyx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Learn how to track your first visit & event using Next.js.

## Pre-Requisites

Before proceeding, ensure you:

<Steps>
  <Step title="Have installed Next">
    Get started [here](https://nextjs.org/)
  </Step>

  <Step title="Get your workspace ID">
    Sign up on [Litlyx Dashboard](https://dashboard.litlyx.com/) and create a new workspace.
  </Step>
</Steps>

## 1. Install

Choose your package manager & install the library.

<CodeGroup>
  ```bash npm theme={null}
  npm install litlyx-js
  ```

  ```bash yarn theme={null}
  yarn add litlyx-js
  ```

  ```bash pnpm theme={null}
  pnpm add litlyx-js
  ```

  ```bash bun theme={null}
  bun install litlyx-js
  ```
</CodeGroup>

## 2. Import

Now import litlyx in your `entry-point` file. Normally in Next, you can add this in `layout.tsx`.

```javascript javascript theme={null}
import { Lit } from "litlyx-js"
```

<Note>Don't forget to add `use client` over the imports</Note>

## 3. Initialize

Next, initialize Litlyx library with your workspace in your entry-point file as follow:

```javascript javascript theme={null}
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  Lit.init("workspace_id");
  return (
    <html lang="en" className="dark">
      <body
        className="antialiased overflow-x-hidden"
      >
        {children}
      </body>
    </html>
  );
}
```

This line of code will immediately start collecting web analytics such as: `Page Visits`, `Real-Time Users`, `Referrers`, `Bounce Rate`, `Countries`, `Unique Visitor Sessions`, `OS` & `Devices`.

## 4. Collect Custom Events

To customize your experience, add the following line in each function you desire. There is no limit to the number of events.

```javascript javascript theme={null}
Lit.event("your_event_name");
```

If you want to exercise more control over your events, you can use the `metadata` field.

```javascript javascript theme={null}
Lit.event("your_event_name", metadata: { 
  'type': 'MAIN_CTA', 
  'priority': 0.9
});
```

In practice, let's try to trigger an event:

```javascript javascript theme={null}
<div onClick={() => Lit.event("click-button")}>
  button name
</div>
```

In your dashboard, you can group them in the `Events` tab with the `Event Metadata Analyzer`.
