Zenn
😄

Next.jsにUmamiアナリティクスを導入するメモ

に公開
Next.js
umami
tech

Next.jsにUmamiアナリティクスを導入するメモ

Next.jsアプリケーションにUmamiを導入する時のメモです。初めてやってみましたが、結構簡単に導入できたのでおすすめです。

Umamiとは

  • クラウド版を使用するか自分でデータベースを用意してセルフホスティングするか選べる
  • Google Analyticsの代わりとして注目されている
  • オープンソースのプライバシーに配慮したアナリティクスサービス
  • リアルタイム分析やアクセス国、ブラウザ、OS、デバイス情報など多種多様な情報を解析できる
  • 多言語対応

前提条件

  • セルフホスティングせずに、クラウドの方を使用

導入

  1. app/layout.tsxに追加
<html lang="en">
  <body>
    <div>{children}</div>
    <Script 
      async 
      src="https://cloud.umami.is/script.js" 
      data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID} 
      />
  </body>
</html>
  1. .env.localにwebsite idを追加
    クラウドの方で解析するサイトを追加し、Website IDというのをコピー
NEXT_PUBLIC_UMAMI_WEBSITE_ID=

これだけでデータが反映されます。

最後に

間違っていることがあれば、コメントに書いていただけると幸いです。
よろしくお願いいたします。

GitHubで編集を提案

Discussion