Next.js 站点中如何配置和集成 Umami

原文链接 ### How to Setup and Integrate Umami to Your Next.js Site -- 作者 Yehezkiel Gunawan

前言

本文，我们将讲解如何自建并设置 Umami，然后将其和 Next.js 项目集成起来。

介绍

当某人或者某个组织想设置一个网站分析工具，他们通常使用 Google Analytics。但是正如我们所知道，我们不能够收集真实的数据，因为当有人访问站点并且 TA 在浏览器中设置了广告拦截器时，Google Analytics 分析工具无法正常工作。当然，此工具也存在隐私问题。

那么，有其他可选的工具？是的，我们推荐 Umami。为什么呢？根据其官方文档，Umami 是开源的并且可以保护隐私，是 Google Analytics 的替代方案。

Okay，我们进入重点。怎么设置和自建 Umami？本文，我将讲解怎么使用 Vercel 和 Supabase 设置 Umami。

准备账号

首先，确保你已经有 Github 账号。如果还没有，请注册一个，因为我们要使用它来发布我们自建的 Umami。

确保你有了 Github 账号后，你需要在 Vercel 和 Supabase 上注册账号（如果没有）。

设置 Subpabase

现在，你可以登入 Supabase，去到导航仪表盘页面，并点击 New Project 按钮。根据你个人爱好和实际需求来选择组织和输入项目名称。

根据你个人喜好，填写下面的表单。此外，在地区表字段中，选择离你最近的区域。

发布在 Vercel

根据 Umami’s Docs (Running on Vercel section) 章节的指引，然后通过点击 Deploy 按钮，你能很容易将 Umami 发布到 Vercel 上。然后，你可以选择 Github 并填写代码仓库名称，之后按照默认步骤进行操作。

如果你到了下面这步，请移步 Supabase。

在 Supabase 中，切到设置菜单页面并点击 Database 章节。去到 Connection String 部分。选择 URI 并复制粘贴到你的 Vercel 设置中的 DATABASE_URL 内。别忘记了更改 YOUR_PASSWORD 为你自己 Supabase 数据库密码。

对于 HASH_SALT 表字段，你可以使用 Password Generator 来生成随机的字符串并复制粘贴它。做了这个后，你可以将其发布到 Vercel。

发布过程之后，如果你想更改域名，你可以移步到项目设置并选择域名菜单，然后点击 Edit 按钮。

配置你的 Umami

现在，在浏览器中打开你部署的 Umami（链接）。默认的用户名和密码都是 admin。如果你想更改密码，可以去到设置菜单，进入个人章节更改你当前的密码。

添加 Umami 到你的站点

在设置菜单中，切到 Website 章节并点击 Add Website 按钮。你可以添加你的站点名称及其链接，如果你想开启 Share URL 可以点选。

添加站点后，你可以复制跟踪代码 Tracking Code。很方便将其粘贴到你的项目上。

最后一步，去到你的站点项目文件夹。在我这个案例中，我使用的是 Next.js 构建项目，所以我将粘贴代码到 _document.tsx 文件中。

恭喜你🎉！你只需要推送项目的最新一次提交，然后你在自建的 Umami 站点上就可以看到自己站点的统计数据。统计数据将在 24 小时内展示在你的导航仪表盘页面。

最后

你可以按照步骤在其他项目上实践。希望这能帮到你。