I've written this before in 2022 about how to integrate Umami as a web tracker in your Next.js site, but now I think I need to rewrite it so it can be updated.

Please refer to the official docs. I just share what I've done before and can't cover the whole topic.

Introduction

As I've written before, Umami is an open-source alternative for web tracking tools. It also can be self-hosted and of course, because of that, you have full control of it.

In this blog, I'll use Supabase as the main database to store the tracking data from Umami. If you're using the other database platform, you can check through this official guide from Umami Docs.

Database Setup

Before we install Umami in our local device or repository, we need to set up the database first. You can go to Supabase site and log in with your account. Do the registration if you don't have the account yet.

Open the Dashboard page and click the New Project button, also select your organization.

After you select the organization, the web will display the base form to set up your database. You can click Create New Project if you have set up your project name, password, and region.

Now, when the database has been finished to be configured. You can open the Settings menu and select Database. You'll find your connection string that will be used in the Umami Setup as an environment variable.

Umami Installation

Make sure you have Node.js installed and have configured Yarn. If not yet, you can install yarn through NPM.

Clone the Umami repository to your local device and install the deps.

Create the file in your root folder and create the as the environment variable. Use the **connection string ** that we've got from Supabase before as the value.

You can now build and start your project to run it in your local device.

The default username is admin and the default password is umami. You can change it by following this guide.

Deploying To Vercel

You can push the umami source code to your own Github repository first. Make sure you already set up the Vercel in your GitHub repository too. I also assume that you already have a Vercel account.

In your Vercel dashboard, you can Create New Project and import the repository that contains the Umami source codes.

After that, don't forget to set up the environment variable the same as your local source codes. Then, you can deploy the project to Vercel and wait until the build process is done.

Closing

My current blog may be obsolete in the future. This is why I always refer to the Umami Official Docs. You need to read it also, so you can adjust it based on your needs. I just shared what I've known when I created this😅.