2020-11-27に投稿

Next.jsでBootstrapのSticky Footerを利用する

Nextjs Bootstrap

BootstrapにはSticky Footerのデモがあります。

https://v5.getbootstrap.jp/docs/5.0/examples/sticky-footer/

昔はCSSを使っていましたが、現在はBootstrapのユーティリティを利用してクラス指定だけで実現しています。そのため適切にクラスを指定していけばよいだけなのですが、Next.jsのようなフレームワークの場合は各HTMLタグがデフォルトでは編集できなかったり、配置が決まっていたりするためなかなか思うように行きません。

実際に対応した方法を書いておきます。

_document.jsを作成する

まずは全体のHTMLを編集するための _document.js というファイルを作ります。TypeScriptの場合は _document.tsx です。_app.js と同様、pagesの直下に配置します。

中身は公式で解説しているとおりです。

Advanced Features: Custom Document | Next.js

次にどんどんクラスを指定していきます。まずはhtmlとbodyタグに高さ100%のクラス h-100 を指定します。 _document.js 内です。

    return (
      <Html lang="ja" className="h-100">
        <Head />
        <body className="h-100">
          <Main />
          <NextScript />
        </body>
      </Html>
    )

次にフッター以外のメインコンテンツを下記のタグで囲みます。ここからは _document.js ではなく各ページもしくは共通レイアウトに設定します。

      <main className="flex-shrink-0">
        メインコンテンツ
      </main>

そしてその下にSticky Footerを配置します。

<footer className="footer mt-auto py-3 bg-light">
  <div className="container">
    <span className="text-muted">フッターのコンテンツをここに置きます。</span>
  </div>
</footer>

Next.js用の対応

これで一通りBootstrapのデモと同じ設定は完了です。しかし、Next.jsの場合は下記のように __next というidのdivが全体を囲んでしまっています。そのためデモと同様にbodyに d-flex flex-column を指定しても全てそのdivに反映されてしまい、メインコンテンツとフッターが正常に動作しません。そのためbodyは h-100 だけにしていました。

そのため、ここだけはCSSで指定してあげます。

#__next {
  display: flex;
  flex-direction: column;
  height: 100%;
}

自動挿入されている要素ですのでidなど、仕様が変わったら適宜調整が必要です。

ツイッターでシェア

みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです（在宅）。大体10年ちょい。記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

https://www.alphabrend.co.jp