はじめに
Next.js15.3のアップデートで、Linkコンポーネントの新しいプロパティである「onNavigate」と、ナビゲーションフックである「useLinkStatus」が導入されました。
特に、「useLinkStatus」は非常に使い勝手の良い機能で、これを使うと、ページ遷移時にインジケーターを表示するなどの処理ができるようなるため、非常に便利なものかと思います。
使ってみよう
実際に使ってみましょう。
ヘッダーの中で実装していくので、「layout.tsx」に「Header」コンポーネントを用意しておきます。
layout.tsx
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja" className={geist.className}>
<body>
<Header />
{children}
</body>
</html>
);
}
onNavigate
まずは「onNavigate」です。
以下のコードは、ページ遷移時にコンソールを出力します。
「onNavigate」プロパティを使うためには、クライアントコンポーネントにする必要があります。
Header.tsx
"use client";
import Link from "next/link";
export default function Header() {
return (
<header>
<Link
href="/dashboard"
onNavigate={() => {
console.log("Navigation...");
}}
>
Dashboard
</Link>
</header>
);
}
以下のように動作します。
この機能を利用することで、ページ遷移時に何かしらの処理を入れたいといった場面で使えるかと思います。
useLinkStatus
「useFormStatus」と同じような感じで、「Link」コンポーネントの子要素として別コンポーネントに切り出して使います。
以下のコードは、公式のサンプルコードで、ページ遷移時に砂時計を表示します。
loading-indicator.tsx
"use client";
import { useLinkStatus } from "next/link";
export default function LoadingIndicator() {
const { pending } = useLinkStatus();
return pending ? <span>⌛</span> : null;
}
Header.tsx
import Link from "next/link";
import LoadingIndicator from "./LoadingIndicator";
export default function Header() {
return (
<header>
<Link href="/dashboard">
Dashboard <LoadingIndicator />
</Link>
</header>
);
}
以下のように動作します。
これを利用することで、ページ遷移時に重い処理が走り、画面表示までに時間がかかる場合でも、ユーザーにレスポンスを返すことが簡単にできるようになるので、とても便利だと思いました。
最後に
他にも色々な記事を書いているので、よければ読んでいってください！