How to support dark mode in Next.js App Router with almost no "use client"🌞🌜

Next.js v13のApp Routerを使用しつつ、"use client"をほぼ使用せずにダークモードを実装する方法を説明する記事です。

Next.js v13のApp Routerにおいてダークモードを実装する方法を検索すると、アプリケーション全体を"use client"でwrapする方法を紹介する記事が多々出てきます。

しかし、アプリケーション全体を"use client"でwrapすると、ハイドレーションエラーや設定したカラーモードとは異なるカラーモードが一瞬表示されてしまう現象など、いくつかの不具合が発生する可能性があります。

当記事で紹介する方法の場合、前述の問題を発生させることなく、アプリケーションのどこからでもライトモードとダークモードを切り替えることができます。