最近React.js(Next.js)を学習し始めた学生エンジニアです。
メインはバックエンドをやっているのですが、インターンとして参加している会社でどっちもやってもらうと言われましたので現在キャッチアップ中です。 
今回はNext.jsが提供している二つの画面遷移方法についてその挙動や使用法の違いを復習がてらまとめました。なおversionは13.4を使用しています。
<h2 data-sourcepos="6:1-6:34">
<a></a>Next.jsにおける画面遷移</h2>
Next.jsには画面遷移のパフォーマンス向上のため、いくつかの内部的な仕組みがあります。それを踏まえた上でLinkコンポーネントやuseRouterを使用するのが良いかと思いましたのでそれを先に紹介したいと思います。 
今回はいくつかある特徴のうち、最も重要な二つについて紹介します。
<h3 data-sourcepos="11:1-11:24">
<a></a>1️⃣ Prefetching</h3>
prefetchとはその表現にも表されている通りpre(事前に)fetch(取得)⇒遷移先ページを事前に取得しておくことで、遷移時にページのロードが起こらないようにする機能のことをいいます。 
本日紹介するLinkとuseRouterそれぞれに対してPrefetchingを行うようにする方法があります。
Linkコンポーネント 
viewportにLinkが表示された際に、デフォルトでは自動的に遷移先ページのprefetchが実行されます。prefetchはページの初回表示時かスクロールによって表示された際に実行されます。
useRouter 
useRouterではrouter.prefetch(url)とすることでprefetchが可能ですが、特に設定がない場合は実行されません。ですので、初回ページ表示時にuseRouterの遷移先をuseEffectでprefetchすると良いのかなと思います。
また、Linkコンポーネントはページの遷移先がstatic page(普通のページ (/page))かdynamic page(詳細ページなど (/page/{id}))でprefetchの挙動が異なります。
static pageの場合 
デフォルトで全てのページが自動的にprefetchされます。
dynamic pageの場合 
最初のloading.jsファイルまでの共有レイアウトのみがプリフェッチされ、30秒間キャッシュされます。これによって、全てのdynamic pageをprefetchするコストを避けつつ、高速なページ表示を実現することができています。 
⇒ dynamic pageはたくさんあるのでそれぞれに対してのprefetchは行わないということですね。
<h3 data-sourcepos="31:1-31:20">
<a></a>2️⃣ Caching</h3>
Next.jsにはRouter Cacheと呼ばれるクライアント側のキャッシュがあり、prefetchされた部分と、過去訪問したページに関してはそのキャッシュに保存されています。 
そのため再訪問する際にサーバーにリクエストをすることなく、ページの表示が可能となり、ますますパフォーマンス向上につながっていきます。
<h2 data-sourcepos="36:1-36:28">
<a></a>Linkコンポーネント</h2>
aタグを拡張したNext.js独自のリンク作成のタグになります。 
Next.jsの大概のページ遷移はこれで行います。
<h3 data-sourcepos="41:1-41:13">
<a></a>使用法</h3>
基本 
以下のようにLinkコンポーネントをnext/linkからインポートします。 
Linkコンポーネントはhrefというpropsを持ち、そこに遷移先のページを指定してあげることでリンクとして機能します。
<div data-lang="jsx" data-sourcepos="47:1-53:3"><div><pre><code>import Link from 'next/link'
 
export default function Page() {
 return &lt;Link href="/dashboard"&gt;Dashboard&lt;/Link&gt;
}
</code></pre></div></div>
詳細ページへのリンク 
もし、詳細ページ等へのリンクを作りたい場合にはテンプレートリテラルを使用して実現することができます。
<div data-lang="jsx" data-sourcepos="58:1-60:3"><div><pre><code>&lt;Link href={`/blog/${post.slug}`}&gt;{post.title}&lt;/Link&gt;
</code></pre></div></div>
リンクがアクティブか判定する 
リンクがアクティブな際に、スタイリングを変えたいなどと言ったことがあるかと思います。 
そのような時はusePathname()を使用することによって実現することができます。
<div data-lang="jsx" data-sourcepos="66:1-94:3"><div><pre><code>'use client'
 
import { usePathname } from 'next/navigation'
import Link from 'next/link'
 
export function Navigation({ navLinks }) {
 const pathname = usePathname()

 return (
 &lt;&gt;
 {navLinks.map((link) =&gt; {
　　　　　// 今のpathとlinkのhrefを比較して同じならtrueを返す
 const isActive = **pathname === link.href**

 return (
 &lt;Link
 className={isActive ? 'text-blue' : 'text-black'}
 href={link.href}
 key={link.name}
 &gt;
 {link.name}
 &lt;/Link&gt;
 )
 })}
 &lt;/&gt;
 )
}
</code></pre></div></div>
<h3 data-sourcepos="96:1-96:9">
<a></a>Props</h3>
href 
文字列でURLを指定します。 
オブジェクトを入れて指定することもできます。
<div data-lang="jsx" data-sourcepos="102:1-114:3"><div><pre><code>&lt;Link href="/dashboard"&gt;Dashboard&lt;/Link&gt;

// /about?name=test
&lt;Link
 href={{
 pathname: '/about',
 query: { name: 'test' },
 }}
&gt;
 About
&lt;/Link&gt;
</code></pre></div></div>
replace 
デフォルトの設定はfalseになっています。 
true の場合、ブラウザーの履歴に新しい URL を追加するのではなく、現在の履歴状態を置き換えます。
<div data-lang="jsx" data-sourcepos="120:1-124:3"><div><pre><code>&lt;Link href="/dashboard" replace&gt;
	Dashboard
&lt;/Link&gt;
</code></pre></div></div>
scroll 
デフォルトの設定はtrueになっています。 
trueの場合はページ遷移時にページのトップが表示されます。Linkを押した時点でのスクロール位置が継承されます。
<div data-lang="jsx" data-sourcepos="130:1-134:3"><div><pre><code>&lt;Link href="/dashboard" scroll={false}&gt;
	Dashboard
&lt;/Link&gt;
</code></pre></div></div>
prefetch 
デフォルトの設定はtrueになっています。 
prefetchに関しては先ほどのセクションで説明しましたので割愛します。
<div data-lang="jsx" data-sourcepos="140:1-144:3"><div><pre><code>&lt;Link href="/dashboard" prefetch={false}&gt;
	Dashboard
&lt;/Link&gt;
</code></pre></div></div>
<h2 data-sourcepos="146:1-146:12">
<a></a>useRouter</h2>
<h3 data-sourcepos="148:1-148:13">
<a></a>使用法</h3>
基本 
useRouterはclient component内でのみ使用することが可能です。 
以下のようにnext/navigationよりインポートし、pushメソッド等を使用して遷移の操作を行うことができます。
<div data-lang="jsx" data-sourcepos="154:1-168:3"><div><pre><code>'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
 const router = useRouter()
 
 return (
 &lt;button type="button" onClick={() =&gt; router.push('/dashboard')}&gt;
 Dashboard
 &lt;/button&gt;
 )
}
</code></pre></div></div>
<h3 data-sourcepos="170:1-170:16">
<a></a>メソッド</h3>
push 
画面遷移時に使用します。
<div data-lang="jsx" data-sourcepos="175:1-177:3"><div><pre><code>router.push(href: string, { scroll: boolean })
</code></pre></div></div>
replace 
ブラウザに訪問履歴を残さずに遷移したい場合に使用します。
<div data-lang="jsx" data-sourcepos="182:1-184:3"><div><pre><code>router.replace(href: string, { scroll: boolean })
</code></pre></div></div>
refresh 
今いるページをrefreshし、再度サーバーに対してのリクエストを行うためのメソッドです。
<div data-lang="jsx" data-sourcepos="189:1-191:3"><div><pre><code>router.refresh()
</code></pre></div></div>
prefetch 
最初のセクションで説明したメソッドです。 
useRouterで遷移する先に対するprefetchを行うために使用します。
<div data-lang="jsx" data-sourcepos="197:1-199:3"><div><pre><code>router.prefetch(href: string)
</code></pre></div></div>
back 
ブラウザ履歴内の前のページに遷移する際に使用します。
<div data-lang="jsx" data-sourcepos="204:1-206:3"><div><pre><code>router.back()
</code></pre></div></div>
forward 
ブラウザ履歴内の次のページに遷移する際に使用します。
<div data-lang="jsx" data-sourcepos="211:1-213:3"><div><pre><code>router.forward()
</code></pre></div></div>
<h2 data-sourcepos="215:1-215:28">
<a></a>LinkとuseRouterまとめ</h2>
<ul data-sourcepos="217:1-218:0">
<li data-sourcepos="217:1-218:0">特段の事由がない限りLinkを使用する (以下公式より)</li>
</ul>
<div data-lang="jsx" data-sourcepos="219:1-221:3"><div><pre><code>Recommendation: Use the &lt;Link&gt; component for navigation unless you have a specific requirement for using useRouter.
</code></pre></div></div>
<ul data-sourcepos="223:1-225:0">
<li data-sourcepos="223:1-223:227">aタグのようなリンクを作成したい場合はLlinkコンポーネントを使用し、内部的な動作（フォームの送信）やbuttonクリック時のコールバックなどにはuseRouterを使用する。</li>
<li data-sourcepos="224:1-225:0">useRouterはclient componentでのみ使用可能。</li>
</ul>
<h2 data-sourcepos="226:1-226:12">
<a></a>最後に</h2>
Laravelのbladeばっかり触ったいた僕からすると、勉強中でもnextのサクサク感に感動することが多いです。これからも頑張ります。 
もし間違っていることやもっと書くべきことがあれば教えていただきたいです！
<h2 data-sourcepos="231:1-231:9">
<a></a>参考</h2>
<iframe frameborder="0" scrolling="no" height="29">
</iframe>

<iframe frameborder="0" scrolling="no" height="29">
</iframe>

<iframe frameborder="0" scrolling="no" height="29">
</iframe>

ページのロードを防ぐために、事前に遷移先ページを取得すること

ユーザーのブラウザ履歴を管理するため

ページが表示された後にデータを取得するため

viewportにLinkが表示された際に自動的に実行される

ユーザーがボタンをクリックしたときにのみ実行される

ページの初回表示時にのみ実行される

手動でprefetchを設定しないと実行されない

最初のloading.jsファイルまでの共有レイアウトのみがプリフェッチされる

全てのdynamic pageが自動的にprefetchされる

prefetchは行われず、全てのページが手動で取得される

dynamic pageは常にキャッシュされる

現在のページを再読み込みするために使用する

ブラウザ履歴を削除するために使用する

サーバーにリクエストを送信するために使用する

特段の事由がない限りLinkを使用するべきである

常にuseRouterを使用するべきである

Linkコンポーネントはclient componentでのみ使用可能である

Linkを使用する際は必ずprefetchを無効にするべきである