Next.jsとshadcn/uiでダークモード切替機能を実装する方法

こんにちは！今回は、Next.js 14とshadcn/uiを使用して、ダークモードとライトモードを簡単に切り替える機能を実装する方法を解説します。この記事では、step by stepで実装手順を説明し、実際のコード例も提供します。

前提条件

Next.js 14がインストールされていること
shadcn/uiがセットアップされていること

まだshadcn/uiをセットアップしていない場合は、公式ドキュメントを参照してセットアップしてください。

実装手順

1. next-themesのインストール

まず、next-themesパッケージをインストールします。このパッケージは、Next.jsアプリケーションでのテーマ切り替えを簡単に実装できるようにします。

npm install next-themes

2. ThemeProviderの設定

app/providers.tsxファイルを作成し、以下のコードを追加します：

'use client'

import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

次に、app/layout.tsxファイルを編集して、ThemeProviderを追加します：

import { ThemeProvider } from "./providers"

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

3. テーマ切替コンポーネントの作成

components/theme-toggle.tsxファイルを作成し、以下のコードを追加します：

'use client'

import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

4. テーマ切替コンポーネントの使用

作成したThemeToggleコンポーネントを、アプリケーション内の適切な場所（例えば、ヘッダーやナビゲーションバー）に配置します。

例えば、app/page.tsxファイルに以下のように追加できます：

import { ThemeToggle } from "@/components/theme-toggle"

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1>Welcome to my Next.js App</h1>
      <ThemeToggle />
    </main>
  )
}

5. スタイルの調整

ダークモードとライトモードで異なるスタイルを適用したい場合は、Tailwind CSSのdark:バリアントを使用します。例えば：

<div className="bg-white dark:bg-gray-800 text-black dark:text-white">
  {/* コンテンツ */}
</div>

動作確認

これで、ダークモードとライトモードの切り替え機能が実装されました。アプリケーションを起動し、ThemeToggleコンポーネントをクリックしてテーマを切り替えてみてください。

まとめ

Next.js 14とshadcn/uiを使用してダークモードとライトモードの切り替え機能を実装する方法を解説しました。この実装により、ユーザーは好みのテーマを選択でき、アプリケーションの使いやすさが向上します。

さらに改善したい場合は、以下のようなアイデアを検討してみてください：

ユーザーの選択をローカルストレージに保存し、次回訪問時に適用する
システムのテーマ設定に自動的に追従する機能の追加
カスタムテーマの作成と適用

ダークモード機能の実装は、ユーザーエクスペリエンスを向上させる素晴らしい方法です。ぜひ、あなたのNext.jsアプリケーションにも取り入れてみてください！

目次

関連記事

Next.jsでモダンWeb開発を始めようStep1: なぜNext.jsを学ぶべきなのか？

Next.jsでPWAを作る初心者向けガイド