<p>タイトルの通りです。Next.jsとTailwindCSSを使用してダークモードを実装してみたので、その備忘録になります。<br>ライブラリはテーマの切替・管理に<a href="https://github.com/pacocoursey/next-themes" target="_blank" rel="noopener noreferrer nofollow">next-themes</a>を使用しました。</p><p>まずはライブラリをインストール</p><pre><code class="language-zsh">npm install next-themes</code></pre><p>次に<code>_app.tsx</code>にnext-themesの<code>provider</code>を設置する。</p><p><code>attribute</code>を<code>class</code>にするとルート要素（<code>html</code>）に<code>dark</code>クラスが付与される。（デフォルトは<code>data-theme</code>属性）</p><p>OSの環境設定に基づいてライトとダークを切り替えるようにする場合は<code>enableSystem</code>を<code>true</code>にする。</p><div data-filename="_app.tsx"><pre><code class="language-typescript">import &apos;@/styles/globals.scss&apos;;
import type { AppProps } from &apos;next/app&apos;;
import { ThemeProvider } from &apos;next-themes&apos;;

const MyApp = ({ Component, pageProps }: AppProps) =&gt; {
  return (
    &lt;ThemeProvider attribute=&apos;class&apos; enableSystem={true}&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/ThemeProvider&gt;
  );
};

export default MyApp;</code></pre></div><p>次に<code>tailwind.config.js</code>にダークモードを利用するように設定する。指定は<code>media</code>と<code>class</code>があるが、今回は<code>class</code>で切替を行うので<code>class</code>を指定。<br><code>media</code>を指定した場合はOSの環境設定に基づいて設定される。</p><div data-filename="tailwind.config.js"><pre><code class="language-javascript">module.exports = {
  darkMode: &apos;class&apos;,
  ...</code></pre></div><p>ひとまずこれでダークモードの適用は完了で、TailwindCSSで指定してあげる場合は接頭辞に<code>dark:</code>をつける。</p><div data-filename="_document.tsx"><pre><code class="language-typescript">import { Html, Head, Main, NextScript } from &apos;next/document&apos;;

const Document = () =&gt; {
  return (
    &lt;Html&gt;
      &lt;Head /&gt;
      &lt;body className=&apos;dark:bg-primary-950 dark:text-body-white&apos;&gt; // ダークモード用の記述
        &lt;Main /&gt;
        &lt;NextScript /&gt;
      &lt;/body&gt;
    &lt;/Html&gt;
  );
};

export default Document;</code></pre></div><p>次にダークモード用の切替ボタンを作成する。こちらもライブラリを<code>import</code>して現在の<code>theme</code>がどちらなのかを判定してボタンを切り替える。</p><div data-filename="ChangeThemeButton.tsx"><pre><code class="language-typescript">import { useEffect, useState } from &apos;react&apos;;
import { useTheme } from &apos;next-themes&apos;;
import { BsSunFill, BsMoonStarsFill } from &apos;react-icons/bs&apos;;

export const ChangeThemeButton: React.FC = () =&gt; {
  const { theme, setTheme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState&lt;boolean&gt;(false);

  useEffect(() =&gt; {
    setMounted(true);
  }, []);

  useEffect(() =&gt; {
    if (mounted &amp;&amp; theme === &apos;system&apos;) {
      setTheme(`${resolvedTheme}`);
    }
  }, [mounted]);

  return (
    &lt;button
      className=&apos;rounded-full p-2 transition duration-300 hover:scale-110 hover:bg-secondary-50 dark:hover:bg-secondary-900&apos;
      type=&apos;button&apos;
      aria-label={mounted ? (theme === &apos;dark&apos; ? &apos;ダークモード&apos; : &apos;ライトモード&apos;) : &apos;テーマ切り替え&apos;}
      onClick={() =&gt; setTheme(theme === &apos;dark&apos; ? &apos;light&apos; : &apos;dark&apos;)}
    &gt;
      {mounted &amp;&amp; (
        &lt;&gt;{theme === &apos;dark&apos; ? &lt;BsSunFill size={&apos;18px&apos;} /&gt; : &lt;BsMoonStarsFill size={&apos;1.2rem&apos;} /&gt;}&lt;/&gt;
      )}
    &lt;/button&gt;
  );
};

export default ChangeThemeButton;
</code></pre></div><p>初回は<code>theme</code>の<code>value</code>が<code>system</code>になるので、そこを初回+<code>theme</code>が<code>system</code>の場合に<code>resolveTheme</code>を使用して<code>dark</code>か<code>light</code>モードかを判別して、<code>setTheme</code>に格納してます。</p><p>あとは<code>theme</code>の値に合わせて切替を行うみたいな感じです。以上！</p><hr><h2 id="he45680f0bc">参考記事</h2><p><a href="https://github.com/pacocoursey/next-themes" target="_blank" rel="noopener noreferrer nofollow">https://github.com/pacocoursey/next-themes</a></p><p><a href="https://zenn.dev/taka_shino/articles/a6c176da799c91" target="_blank" rel="noopener noreferrer nofollow">https://zenn.dev/taka_shino/articles/a6c176da799c91</a></p><p><a href="https://yokinist.me/dark-mode" target="_blank" rel="noopener noreferrer nofollow">https://yokinist.me/dark-mode</a></p>

Next.jsとTailwindCSSを使用してダークモードを実装したのでその備忘録。next-themesライブラリを使用してダークモードの切替ボタンの作成までメモ。

Next.jsとTailwindCSSでダークモードを実装する

<p>Next.jsのOGPタグやmetaタグの記述などはどうするのか色々調べたところ、<a href="https://github.com/garmeeh/next-seo" target="_blank" rel="noopener noreferrer nofollow">next-seo</a>というライブラリを導入するのがよさそう。</p><p>導入は簡単で、まずはインストール</p><pre><code>npm install next-seo</code></pre><p>あとは特定のページでインポートして記述するだけ</p><div data-filename="Page.tsx"><pre><code class="language-typescript">import { NextSeo } from &apos;next-seo&apos;;

const Page = () =&gt; (
  &lt;&gt;
    &lt;NextSeo
      title=&quot;タイトル&quot;
      description=&quot;デスクリプション&quot;
    /&gt;
  &lt;/&gt;
);

export default Page;</code></pre></div><p>ただこれだと、指定ページのみに各種<code>meta</code>タグが入るので、デフォルトで基本のOGPや<code>meta</code>タグが入るようにする。</p><p>まずはデフォルト値を保存する設定ファイルを作成する。サイトタイトルやURLなどは環境変数に設定している値から<code>config</code>オブジェクトに代入し、そこから<code>props</code>へ代入している。</p><div data-filename="seoConfig.ts"><pre><code class="language-typescript">import { DefaultSeoProps } from &apos;next-seo&apos;;
import { SITE_NAME, TWITTER_USER_ACCOUNT, BASE_URL } from &apos;@/config&apos;;

const config = {
  siteName: SITE_NAME,
  twitterAccount: TWITTER_USER_ACCOUNT,
  url: BASE_URL,
};

const SEO: DefaultSeoProps = {
  titleTemplate: `%s - ${config.siteName}`,
  defaultTitle: config.siteName,
  themeColor: &apos;#000&apos;,
  openGraph: {
    url: config.url,
    type: &apos;article&apos;,
    siteName: config.siteName,
    title: &apos;&apos;,
    description: &apos;&apos;,
    images: [
      {
        url: `${config.url}/ogp.png`,
      },
    ],
    locale: &apos;ja_JP&apos;,
  },
  twitter: {
    handle: config.twitterAccount,
    cardType: &apos;summary_large_image&apos;,
  },
};

export default SEO;</code></pre></div><p>次に設定ファイルを_app.tsxで読み込み、<code>&lt;Component /&gt;</code>と同じ階層に<code>&lt;DefaultSeo /&gt;</code>コンポーネントを入れる。<br>この時、<code>&lt;DefaultSeo /&gt;</code>に設定ファイルを<code>props</code>で渡してあげる必要がある。</p><div data-filename="_app.tsx"><pre><code class="language-typescript">import &apos;@/styles/globals.scss&apos;;
import type { AppProps } from &apos;next/app&apos;;
import { ThemeProvider } from &apos;next-themes&apos;;
import { DefaultSeo } from &apos;next-seo&apos;;
import SEO from &apos;@/types/seoConfig&apos;;

const MyApp = ({ Component, pageProps }: AppProps) =&gt; {
  return (
    &lt;&gt;
      &lt;DefaultSeo {...SEO} /&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/&gt;
  );
};

export default MyApp;
</code></pre></div><p>これで設定ファイルに記述した内容で全ページに<code>head</code>タグが出力される。<br>それぞれの投稿の内容に合わせてタイトルやディスクリプションを設定したい場合には以下のようにする。</p><div data-filename="[id].tsx"><pre><code class="language-typescript">import { NextPage } from &apos;next&apos;;
import { NextSeo } from &apos;next-seo&apos;;

type PostPageProps = {
  post: Post;
};

const PostPage: NextPage&lt;PostPageProps&gt; = ({ post }) =&gt; {
  return (
    &lt;&gt;
      &lt;NextSeo
        title={post.title}
        description={post.description}
        openGraph={{
          title: `${post.title}`,
          description: `${post.description}`,
        }}
      /&gt;
      &lt;article className=&apos;mt-10&apos;&gt;...&lt;/article&gt;
    &lt;/&gt;
  );
};</code></pre></div><p>これで投稿ページはそれぞれのタイトルやディスクリプションで出力し、その他OGPなどについては設定ファイルで記述した内容に沿って出力される。</p><hr><h2 id="he45680f0bc">参考記事</h2><p><a href="https://github.com/garmeeh/next-seo" target="_blank" rel="noopener noreferrer nofollow">https://github.com/garmeeh/next-seo</a></p><p><a href="https://blog.stin.ink/articles/add-next-seo-to-blog" target="_blank" rel="noopener noreferrer nofollow">https://blog.stin.ink/articles/add-next-seo-to-blog</a></p>

Next.jsでSEO対策を行う際の方法について調べたところ、next-seoライブラリというものがあったので導入、カスタマイズをしてみました。

Next.jsに関連する記事一覧

Next.jsとTailwindCSSでダークモードを実装する

Next.jsでnext-seoを導入してSEO対策を行う