Beginner Tech Blog

Beginner Tech Blog Branding

Linkコンポーネント

2025/01/27 13:13updated: 2025/01/27 13:15

はaタグを拡張してルート間のプリフェッチとクライアントサイドナビゲーションを提供するコンポーネント。

app router であれば自動的に prefetch={true} になるので、false にしたい時以外は明示しなくてよい。

false でも hover状態に入るとprefetchする。

import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

その他

href - 遷移したい先のパスまたは URL です。これは唯一必須のプロパティです。
scroll - ナビゲーションの後にページの先頭にスクロールします。デフォルトは true です。
replace - スタックに新しい URL を追加する代わりに、現在の history の state を置き換えます。デフォルトは false です。

a タグで実装してて画面遷移のモタつきに?となり、この存在に気付いた...

引用:https://nextjs.org/docs/app/api-reference/components/link