編集

Next.js 15.3 リリース

#Next.js #React #TypeScript

Next.js 15.3 がリリースされた。Turbopack の next build でのサポート。実験的な機能として Rspack のサポート。Client Instrumentation hook と Navigation hooks を追加。TypeScript plugin の改善により大規模な codebase でのサポートを向上など。

出展：Next.js 15.3

#Client Instrumentation hook

instrumentation-client.js|tsファイルでフロントエンドコード実行前に monitoring や analytics コードを追加可能。

javascript
// instrumentation-client.js
performance.mark("app-init");
console.log("Analytics initialized");
window.addEventListener("error", (event) => {
  reportError(event.error);
});

出展：Next.js 15.3#client-instrumentation-hook

onNavigateはLinkコンポーネントの新しいプロパティ。client-side navigation 中に実行される。

javascript
<Link
  href="/about"
  onNavigate={(e) => {
    startTransitionAnimation();
    if (shouldCancelNavigation) {
      e.preventDefault();
    }
  }}
>
  About
</Link>

useLinkStatusは Client Component hook。navigation の進行状況を監視可能。

javascript
function LoadingIndicator() {
  const { pending } = useLinkStatus();
  return pending ? <div>Loading...</div> : null;
}

<Link href="/about">
  About
  <LoadingIndicator />
</Link>;

出展：Next.js 15.3#navigation-hooks

編集