How to Setup and Integrate Umami to Your Next.js Site

Disclaimer

In this article, I will focus on how to self-host and set up Umami, then integrate it into the Next.js-based project.

Introduction

Often, when someone or organization wants to set up the web analytics tool, they usually use Google Analytics. But as some people know that we cannot collect real data because when there’s a person visit a website and he or she set an adblocker in their browser, the analytic tool cannot work properly. And of course, there’s also a privacy issue with this tool.

Alright so are there any alternatives? Yes, I’ll recommend Umami. Why? According to its official docs, Umami is open source and can be the privacy-focused alternative to Google Analytics.

Okay, so let’s jump to the main point. How to set up and self-host Umami? In this article, I’ll explain how to set up Umami with Vercel and Supabase.

Preparing The Account

First, of course, make sure you already have a Github account. If you don’t have it yet, please make it first because it will be needed to deploy our self-host Umami.

After you have a Github account, make sure you also registered at Vercel and Supabase.

Setup Supabase

Now, you can log in to Supabase and go to the main dashboard and click “New Project”. Use the organization and project’s name based on your preferences and needs.

Fill in the form fields based on your personal preferences. Also, select the closest region to your domicile in the region form field.

After you click the “Create New Project” button, go to the SQL Editor section.

Then, you can copy the SQL Schema query from Umami’s Github Repository. After that, you can run the query.

Deploy on Vercel

You can easily deploy Umami to Vercel just by open Umami’s Docs (Running on Vercel section) and clicking the “Deploy” Button. Then, you can select Github and fill in the repository name and after that, you can just follow the default steps.

If you have reached the step like the image below, head back for a while to Supabase.

In Supabase, go to the Settings menu and then click the “Database” section. Go to the “Connection String” segment. Select “URI” and copy & paste it to DATABASE_URL on your Vercel settings. Don’t forget to change “YOUR_PASSWORD” into your own Supabase database password.

For the HASH_SALT field, you can use Password Generator to generate some random string and copy & paste it. After that, you can deploy it to Vercel.

If you want to change the domain after the deploy process, you can go to the project settings and select the Domain menu, then click the “Edit” button.

Configuring Your Umami

Now you can open the deployed Umami on your browser. The default username is admin and the password is umami. You can change it later if you want. You can go to the Settings menu and go to the profile section to change your current password.

Adding Umami to Your Website

In the Settings menu, go to the Website section and click “Add Website” Button. You can add your website name and link there and enable the “Share URL” if you want.

After the website is added, you can copy the “Tracking Code”. You can paste it into your project soon.

Now for the final step, go to your web project folder. In my case, I use Next.js and I paste the code in the _document.tsx file.

And yeah, congratulations! You just need to push the newest commit of your project and you can watch the statistics of your own site at Umami. The statistics will appear on your Umami dashboard within 24 hours.

Closing

You can follow these same steps on your other projects. Hope it helps. Let me know if you have some feedback or something to discuss in the comment section.

Reference: How to Setup Umami with Vercel and Supabase (by Jacob Bouchard)