This repository was archived by the owner on Sep 15, 2026. It is now read-only.
Repository navigation
fix(layout): Next.js 16 でページ遷移のスクロールを即座に戻す - #35
Merged
Merged
Conversation
Next.js 15 and earlier temporarily forced `scroll-behavior: auto` during SPA navigations so a route change always jumped to the top instantly, even when the app set `scroll-behavior: smooth` globally. Next.js 16 stops doing that override by default. `globals.css` sets `scroll-behavior: smooth` on `html`, so after the upgrade to Next 16 every route change animates a scroll to the top instead of moving there immediately. Opting back in with `data-scroll-behavior="smooth"` keeps in-page anchor links smooth while making navigation instant again, which is the pre-upgrade behaviour. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
Next.js 15 以前は、SPA ナビゲーション中だけ
scroll-behaviorを一時的にautoへ書き換えてから遷移していたため、アプリ側が
scroll-behavior: smoothを全体に当てていてもページ遷移は常に即座にトップへジャンプしていました。
Next.js 16 でこの上書きが既定で行われなくなりました。
このリポジトリは
src/app/globals.cssでhtml { scroll-behavior: smooth; }を指定しているため、#30 で Next 16 に上げた結果、ページ遷移のたびにトップまで滑らかスクロールする挙動に変わっていました。
変更
<html>にdata-scroll-behavior="smooth"を付けて、Next に従来どおりの上書きをさせます。確認
pnpm typecheck/pnpm lint/pnpm build通過（prettier も--check通過）pnpm startで実起動し、配信される HTML に<html lang="ja" data-scroll-behavior="smooth">が出ていることを確認参考: Next.js 16 upgrade guide — Scroll Behavior Override
🤖 Generated with Claude Code