> Site index: https://usehardal.com/llms.txt
> Every content route also serves markdown at <url>.md

# Track Your Next.js App as Cookieless Using Hardal

In this tutorial, you will learn to add Hardal to your Next.js app for cookieless tracking.

Source: https://usehardal.com/hardal-next-js
Published: 2022-12-18
Updated: 2022-12-18
Author: Berkay Demirbas

---

[Hardal](https://usehardal.com) is a privacy-focused, cookieless, lightweight, and free web analytics tool which is available also **web3** ecosystem.

In other words, a **free** alternative to **Google Analytics 4**. Yay!✌️

[Next.js](https://nextjs.org/) is amazing a react framework which is using Hardal's main tech stack.

Here are the steps:

Sign up for a free account at Hardal's website and setup an event tracking profile.

- Click **Add Website**Choose your event type as Landing Page or any web2 based event type.

![https://framerusercontent.com/images/3TorFOcK6wioNwGpqdWQi8HRNrY.png](https://framerusercontent.com/images/3TorFOcK6wioNwGpqdWQi8HRNrY.png)

Go to **Tracker** in your website settings. Then copy your **website ID** at the bottom.

- Website ID is your website's unique ID in Hardal.

![https://framerusercontent.com/images/ldvifKt2NXbEkaCOszPRJ1ZpeY.png](https://framerusercontent.com/images/ldvifKt2NXbEkaCOszPRJ1ZpeY.png)

Open the `pages/app.js` file and import the Script component at the top on your Nextjs.

```js
// import Script
import Script from 'next/script'

//Create your Hardal Website ID variable.
const hardalWebsiteID = process.env.NEXT_PUBLIC_HARDAL_ID

// Inject this script to your <head>.

```

Add **NEXT_PUBLIC_HARDAL_ID** variable to your **.env**

For this time we will use **Vercel** for deploy and environment.

- So go to your Vercel account.
- Choose your project and go to **Environment Variables.**

![https://framerusercontent.com/images/YgUxA2GjA9g12Nj6zcH8U625YyA.jpg](https://framerusercontent.com/images/YgUxA2GjA9g12Nj6zcH8U625YyA.jpg)

To confirm that your integration was successful, you can inspect the source code of your website and you will see Hardal's tracking snippet or you can just check your website visitor widget in overview.

![https://framerusercontent.com/images/LeoyiFyRXwPJyz4guuAOnOaIiHU.png](https://framerusercontent.com/images/LeoyiFyRXwPJyz4guuAOnOaIiHU.png)

Congratulations. 🎊 Your integration is completed.

You can now start tracking and analyzing your website as cookieless and privacy-focused on your any Next.js app.
