こんにちは
株式会社 TAIAN でソフトウェアエンジニアをしています、竹内です
Webサイト、Webアプリケーションを実装する上で計測などを含むサードパーティスクリプトを扱ったことがある方は多いと思います。
私も例に漏れずGoogle Analyticsを始めとした計測ツールを導入してきました。
経験上Reactを用いたSPAに導入することが多かったのですがその度Web上に存在する情報を断片的にかき集めて実装してきており、所謂ベストプラクティス的なものを知りませんでした。
今回、新たなサービスへ導入するにあたり知った @next/third-partiesについて紹介いたします
@next/third-parties
Next.js公式が提供するサードパーティスクリプトに向けたライブラリです。
多くのWebサイトで使われるスクリプトを効率的にロードさせ、パフォーマンスを高めつつ簡単に導入することができます。
サードパーティスクリプトは扱いを間違えるとパフォーマンスに影響を及ぼし、特にCore Web VitalsのINPとLCPを著しく低下させることもあります。
(詳しくはこちらの記事が詳細に問題提起してくださっています)
こういった問題を解決するべく@next/third-partiesは誕生しました
@next/third-partiesでできること
2025年8月現在、以下の機能が提供されています。
- GoogleTagManager
- GoogleAnalytics
- GoogleMapsEmbed
- YouTubeEmbed
全ての詳細は公式ドキュメントにお願いするとして、ここではGoogleTagManagerの使い方を簡単に紹介します。
GoogleTagManagerを追加する
Google Tag Managerはlayout.tsxで読み込み初回のスクリプト呼び出しを行います。
// app/layout.tsx
import { GoogleTagManager } from '@next/third-parties/google'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<GoogleTagManager gtmId="GTM-XXXXXXXX" />
<body>{children}</body>
</html>
)
}
イベントを送信する
'use client'
import { sendGTMEvent } from '@next/third-parties/google'
export function ProductClickTracker({ productId, category, price }: {
productId: string
category: string
price: number
}) {
const trackProductClick = () => {
sendGTMEvent({
event: 'product_click',
product_id: productId,
category: category,
value: price,
currency: 'JPY'
})
}
return (
<button onClick={trackProductClick} className="product-cta">
商品を見る
</button>
)
}
このように非常に手軽にGTMを設置し、任意のイベント送信処理を実装できます。
最後に
Next.jsのような採用事例の多いフレームワークがこのようなサードパーティスクリプトの仕組みを提供してくれるのは大変嬉しく思います。
worker環境でのスクリプトの実行など、まだまだパフォーマンスを改善するための開発が進むことも言及されていました。
We are hiring!
TAIANでは、このような開発・技術・思想に向き合い、未来をつくる仲間を一人でも多く探しています。少しでも興味を持っていただいた方は弊社の紹介ページをご覧ください。
株式会社TAIANのテックブログです。ブライダル業界向けのVertical SaaSを中心に、お祝いに関するプロダクトを開発中。「日本の未来をもっとアツく、あたたかく」そんな意気込みのメンバーで投稿しています。
Discussion