Next.js, TailwindCSSでscroll-behaviorを使い分ける【株式会社ライトコード】

はじめに

スムーズスクロール対応のため、html要素にscroll-behavior: smooth;のclass(以下、TailwindCSSのscroll-smooth)を付与したい時があります。ただ、scroll-behavior: auto;を使いたいページを要求されたらどうするか心配になるものです。

Next.js App router

Next.js App routerでは<html>タグをroot layoutで記述する必要がありますが、Route Groupsを使い複数のroot layoutをを用いることができます。

app

├── (scroll-auto)

│   └── layout.tsx

└── (scroll-smooth)

    └── layout.tsx

Next.js Pages router

Next.js Pages routerではCustom Documentで<html>のclassを付与できます。しかし、アプリで使えるCustom Documentは1つのみです。

迂回策: クライアントでhtmlのclassを修正するコンポーネントで対応する

クライアントでhtmlのclassを上書きすることでもよければ、以下のようなコンポーネントを対応ページに入れることで対応できます。cleanup関数にscroll-smoothを戻すことで、こちらのコンポーネントがあるページのみscroll-smoothの反映されず対応できます。

export const RemoveScrollSmooth = () => {

  useEffect(() => {

    document.documentElement.classList.remove("scroll-smooth");



    return () => {

      document.documentElement.classList.add("scroll-smooth");

    };

  }, []);



  return null

};

番外: htmlをラッピングし、useStateとContext APIで制御する

Next.js Pages routerでは使えないですが、App routerなどで複数のlayout対応するまでも無いのであり、直接DOM操作したく無いことであれば、htmlをラッピングし、中でscroll behaviorのclassを状態として管理することもできます。<RemoveScrollSmooth />と同様に、<ScrollAuto />をscroll-autoを適用したいページに入れると<ScrollAuto />が含まれている箇所のみクライアント側でclassを更新します。

…