NextjsのサイトをGoogle Analyticsで。。。

概要:NextjsのサイトをGoogle Analyticsで。。。

Vercelには独自のアクセス解析機能がありますが、nextプロジェクトをGoogle Analyticsで解析しようと実施。

公式サイトにサンプル

アクセスないので、あまり関係ないのですが、soften.siteにGoogle Analyticsを仕込みました。

サンプルはNextjsの公式にあります。

github.com

今までにノーマルに専用タグを追加したことがあれば大丈夫です。
サンプルファイルを見れば、おおよそ編集可能です。
触るファイルは以下の3つだけです。

pages > _app.js

lib > gtag.js

.env

自分サイトではsrc > pagesと階層に相違がある場合もあるかと思いますが、_app.jsでimportするときの階層をあわせれば問題ありません。

ESlintのキャメルケースのルール

プロジェクトにESlintを入れていて、キャメルケースのルールを指定している場合、gtag.js内の書き方で注意されるかもです。
適宜対応してください。

www.soften.site