Next.jsアプリでトースト通知を導入したいけど、alert()はダサいし、モーダル出すほどでもない…

そんなときに便利なのが、今回紹介する【react-hot-toast】です。

たった1行で「保存しました」「削除しました」などの通知が表示できて、しかもフォントや色も簡単にカスタマイズ可能！

📌 使用ツール

Next.js（App Router）
Tailwind CSS
react-hot-toast

📌 導入手順

① ライブラリのインストール

npm install react-hot-toast

② app/layout.tsx に `<Toaster />` を追加

import { Toaster } from "react-hot-toast";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <Toaster
          position="top-center"
          toastOptions={{
            style: {
              fontFamily: "var(--font-geist-sans)",
              background: "#",
              color: "#",
              fontSize: "14px",
              padding: "12px 16px",
              borderRadius: "8px",
              boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
            },
            success: {
              iconTheme: {
                primary: "#",
                secondary: "#",
              },
            },
            error: {
              iconTheme: {
                primary: "#",
                secondary: "#",
              },
            },
          }}
        />
      </body>
    </html>
  );
}

※ フォントは next/font/google で読み込んだCSS変数を活用しています。

③ コンポーネント内で使う

import { toast } from "react-hot-toast";

// 通常の通知
toast.success("保存しました！");
toast.error("エラーが発生しました");

// 削除ボタンでの使用例
const handleDelete = async () => {
  const isConfirmed = confirm("本当に削除しますか？");
  if (!isConfirmed) return;

  toast.loading("削除中...");

  const { error } = await supabase
    .from("money-savings")
    .delete()
    .eq("id", id)
    .eq("user_id", user.id);

  toast.dismiss();

  if (error) {
    toast.error("削除に失敗しました");
  } else {
    toast.success("削除しました！");
    router.replace("/money-mindful/records/");
  }
};

📌 まとめ

• react-hot-toast は超簡単＆軽量なトースト通知ライブラリ
• layout.tsx に <Toaster /> を1回追加すれば、全ページで toast() が使える
• CSS変数を使えばフォントや色もアプリ全体と統一できる

alert() や window.confirm() に頼らず、
もっと自然で使いやすい通知UIを取り入れてみましょう。

シンプルなのにしっかり伝わる、そんなトースト通知が欲しい人には react-hot-toast、かなりおすすめです！