Next.jsでダークモードを実装する方法

Next.jsでダークモードを実装する方法を、具体的なコードを交えながら説明します。ダークモードの実装は、ユーザーエクスペリエンスの向上に役立ちます。ここでは、ユーザーがボタンをクリックしてダークモードとライトモードを切り替えられるシンプルな方法を紹介します。

1. 初期設定

まず、Next.jsのプロジェクトを作成します。以下のコマンドで新しいNext.jsプロジェクトを作成しましょう。

npx create-next-app@latest my-dark-mode-app
cd my-dark-mode-app
npm run dev

2. グローバルCSSの設定

次に、styles/globals.css ファイルに基本的なスタイルを追加します。このファイルには、ダークモードとライトモードの切り替え用のCSSクラスを定義します。

/* styles/globals.css */
:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
  --background-color: #000000;
  --text-color: #ffffff;
}

解説:

:root でCSS変数を定義し、背景色とテキスト色を変数として管理します。
body 要素で background-color と color を var(--background-color) および var(--text-color) に設定し、ダークモードとライトモードの切り替えがスムーズに行われるように transition を追加しています。
.dark-mode クラスを使って、ダークモード時の色設定を上書きしています。

3. ダークモードの切り替えロジック

ダークモードとライトモードを切り替えるためのボタンとその動作を実装します。

// components/ThemeToggleButton.js
import { useState, useEffect } from 'react';

export default function ThemeToggleButton() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    if (localStorage.getItem('theme') === 'dark') {
      setTheme('dark');
      document.body.classList.add('dark-mode');
    }
  }, []);

  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
      document.body.classList.add('dark-mode');
      localStorage.setItem('theme', 'dark');
    } else {
      setTheme('light');
      document.body.classList.remove('dark-mode');
      localStorage.setItem('theme', 'light');
    }
  };

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
    </button>
  );
}

解説:

useState フックを使って、現在のテーマを管理します。初期値は ‘light’ です。
useEffect フックで、ページがロードされたときに localStorage から保存されたテーマをチェックし、それに応じてテーマを設定します。
toggleTheme 関数で、テーマを切り替えるロジックを実装しています。テーマが ‘light’ の場合は ‘dark’ に変更し、その逆も行います。また、localStorage にテーマを保存することで、ページをリロードしてもテーマの設定が保持されるようにしています。

4. アプリに組み込む

pages/_app.js ファイルで、このボタンをアプリ全体に適用します。

// pages/_app.js
import '../styles/globals.css';
import ThemeToggleButton from '../components/ThemeToggleButton';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ThemeToggleButton />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

解説: