App Routerのページ送り後に#all-articlesへスクロールする方法

"Next.jsのApp Routerでブログ一覧をページ送りすると先頭に戻ってしまう問題を、ToolArcの15件ずつページ送り実装を例に解説します。アンカーIDとscroll={false}で一覧セクションへ戻す方法、SEO用のrel=next/prevを崩さない考え方も整理します。"

Next.js の App Router でブログ一覧にページ送りを実装したものの、2ページ目に進むたびに画面の一番上（ヘッダー付近）に戻ってしまい、毎回スクロールし直す必要がある——そんな状態に困っていませんか。

ToolArcでは、テキスト中心のブログ一覧を15件ずつページ送りする構成にしています。ただ、2ページ目以降へ移動したときに画面の先頭へ戻ってしまうと、読者はまた一覧セクションまでスクロールし直す必要があります。

この問題は「何件ずつ表示しているか」よりも、ページ送り後に一覧の位置へ戻れるかが本質です。筆者も同じ状況に遭遇しましたが、ページリンクにアンカーを付け、先頭ジャンプを抑える設定を組み合わせることで改善しやすいと分かりました。

今日の結論

ページ送り後に先頭へ戻ってしまうのは、ページ遷移時のデフォルトのスクロール挙動が原因です

ToolArcではテキスト中心の一覧に15件/ページを採用していますが、表示件数にかかわらず「ページ送り後に一覧位置へ戻れないこと」が問題です

一覧セクションに id="all-articles" を付け、ページリンクに #all-articles を付与すると改善しやすくなります

App Router の Link で scroll={false} を使うと、先頭ジャンプとアンカー競合を避けやすくなります

SEO用の <link rel="next/prev"> はハッシュなしのまま維持します

先頭に戻ってしまう原因

App Router では、ページ遷移時に既定でスクロール位置が先頭に戻る挙動になっていると考えられます。

一覧の上に説明文や導線がある場合、ページ送りのたびに画面先頭へ戻ると、読者は毎回一覧セクションまでスクロールし直すことになります。

ToolArcでは15件ずつのページ送りを採用していますが、10件でも20件でも、問題の本質は同じです。ページ送り後に「次の記事一覧が始まる位置」へ自然に戻れないと、一覧を読み進める体験が途切れてしまいます。

ToolArcでは15件ずつのページ送りを採用している

ToolArcのブログ一覧では、テキスト中心の一覧であることを前提に、1ページあたり15件を表示する設計にしています。

15件という数字自体が絶対の正解ではありません。サムネイル付きカード型なら10〜12件、テキスト中心なら15件前後など、一覧の見た目によって適切な件数は変わります。

この件数設計については、ブログ一覧を15件ずつページ送りにする目安（Next.js）で詳しく整理しています。

解決策：アンカーIDとscroll={false}の組み合わせ

この挙動を改善する方向性として、一覧の見出し部分にアンカーを設定し、ページ遷移後にそのアンカー位置へスクロールさせる方法があります。同時に Link の scroll={false} を使うことで、Next.js 側の先頭ジャンプとアンカーへのスクロールが競合しないようにします。

実装の手順

一覧セクションの見出しに id="all-articles" を付ける
ページ送り用のリンクに #all-articles を付与する
App Router の Link コンポーネントで scroll={false} を指定する
必要に応じて、小さな Client コンポーネントでスクロール処理を補助する
SEO用の <link rel="next/prev"> はハッシュなしのままにしておく

筆者が確認した範囲では上記の組み合わせで改善が見込めますが、利用している Next.js のバージョンによって Link や scroll オプションの挙動が異なる可能性があります。実装時は手元のコードと公式ドキュメントで動作を確認しながら進めることをおすすめします。

SEO用のrel=next/prevはハッシュなしを維持する理由

rel="next" / rel="prev" は検索エンジンにページ間の関係を伝えるためのものです。ここにアンカー（#all-articles）を含めてしまうと、ページ自体の識別がずれる可能性があるため、ハッシュを付けずに維持するのが安全だと考えられます。スクロール用のアンカーは、画面遷移後の見た目を整えるためだけに使う、という役割分担を意識すると整理しやすくなります。

チェックリスト

確認項目	状態の目安
一覧見出しに `id="all-articles"` があるか	未設定なら先頭ジャンプの改善が効きにくい
ページリンクに `#all-articles` を付与しているか	付与漏れがあるとアンカーへ飛ばない
`Link` に `scroll={false}` を指定しているか	未指定だと先頭ジャンプと競合しやすい
`rel="next/prev"` にハッシュが付いていないか	ハッシュ付きだとSEO面でずれる可能性がある

まとめ

App Router でページ送り後に先頭へ戻ってしまう場合は、id="all-articles" とページリンクへの #all-articles 付与、scroll={false} の組み合わせで改善しやすくなります。一方で SEO用の rel="next/prev" はハッシュなしのまま維持するのがポイントです。

一覧の表示件数をどう決めるかは、ブログ一覧を15件ずつページ送りにする目安（Next.js）も参考にしてください。Next.jsで個人サイトを公開・改善する流れは、Hub記事「サイト公開シリーズ」にもまとめています。

公開順で前の記事: Cursor Proの「Total usage limit reached」対処法

公開順で次の記事: 同一画像を記事内で再利用するときはaltテキストを変える

本記事は2026-06-23時点の実装検討に基づく内容です。Next.jsのバージョンによって Link や scroll の仕様が異なる場合があるため、実装前に公式ドキュメントと手元のコードでの動作確認をおすすめします。