Next.js と Headless UI で、タブを実装する

要約

Headless UI を使ってシンプルで機能的なタブコンポーネントを実装する方法について解説。Next.js 14 に対応したカスタマイズ例を提供しながら、@headlessui/react の `Tab` コンポーネントを使用したタブの実装方法を紹介します。

意見はこのエリアに表示されます

シンプルで Tailwind でスタイリングできるからです。自作した UI よりも不具合が少ないですし、開発効率が向上します。

また、 React と Vue に対応していて、例えば Dropdown（メニュー）、Popover（ツールチップ的な）、Dialog（モーダルウィンドウ、アラート）などのコンポーネントを簡単に実装できます。

アプリケーションに必要な UI は概ね揃っていて、開発者が好きなスタイルで UI を構築できるため、デザインの自由度が非常に高いのが特徴ですね。

まずは Headless UI をインストールします。

最初にシンプルにスタイルを適用せず、機能だけ実装したタブの例です。このコンポーネントは最小限のコードで動作します。

次に、タブにスタイルを加えてみましょう。以下のコードでは Tailwind CSS を使用して、選択されているタブに対して動的にスタイルを適用しています。

このように、selected プロパティを使って選択されているタブに応じてスタイルを切り替えることができます。Tailwind CSS を使用して簡単にスタイルをカスタマイズ可能です。

Next.js 15 で試したところ現時点でエラーが出ましたので、Next.js 14 以前で試すのが良いかもしれません。

Headless UI を使うことで、スタイルの制約から解放され、機能を自由にカスタマイズすることができます。タブコンポーネントをシンプルに実装しつつ、スタイルのカスタマイズも簡単なので、プロジェクトに応じて柔軟に使い分けられます。ぜひ自分のプロジェクトでも活用してみてくださいね！

Explore More