Zenn
🦁

Next.jsでページ遷移後にトーストを表示する方法

2025/02/07に公開
Next.js
tech

はじめに

Next.jsでページ遷移後にトースト（通知）を表示したい場合、状態管理を使う方法もありますが、クライアント側で一時的にデータを保持するためにCookieを活用するのも便利です。

例えば、詳細ページで削除や編集を実行し、一覧ページに戻った際にトーストを表示したい場合、遷移時に情報を引き継ぐ必要があります。今回は Cookieを利用したトースト表示 の方法を紹介します。

実装の流れ

  1. 削除や編集時にトーストのメッセージをCookieに保存
  2. 一覧ページでCookieを取得し、トーストを表示
  3. トースト表示後にCookieを削除

実装

1. Cookieの操作用関数を作成

まず、サーバーアクションを活用してCookieを設定・取得・削除する関数を用意します。

📌 /actions/cookies.ts

"use server";

import { cookies } from "next/headers";

// Cookieを設定する
export const setCookieByKey = async (key: string, value: string) => {
  (await cookies()).get(key);
};

// Cookieを取得する
export const getCookieByKey = async (key: string) => {
  const cookie = (await cookies()).get(key);
  if (!cookie) {
    return null;
  }
  return cookie.value;
};

// Cookieを削除する
export const deleteCookieByKey = async (key: string) => {
  (await cookies()).delete(key);
};

2. 削除や編集時にトーストメッセージをCookieに保存

例えば、詳細ページで削除処理を行った後に一覧ページにリダイレクトする際、トースト用のメッセージをCookieに保存します。

📌 /app/detail/page.tsx

"use client";

import { useRouter } from "next/navigation";
import { setCookieByKey } from "@/actions/cookies";

const DetailPage = () => {
  const router = useRouter();

  const handleDelete = async () => {
    // 削除処理（API呼び出しなど）
    await setCookieByKey("toast", "削除しました"); // トーストメッセージをCookieに保存
    router.push("/list"); // 一覧ページへ遷移
  };

  return (
    <div>
      <h1>詳細ページ</h1>
      <button onClick={handleDelete}>削除</button>
    </div>
  );
};

export { DetailPage };

3. 一覧ページでトーストを表示

一覧ページでトーストを表示するためのコンポーネント RedirectToast を作成します。

📌 /components/redirect-toast.tsx

"use client";

import { useEffect } from "react";
import { toast } from "sonner";
import { deleteCookieByKey, getCookieByKey } from "@/actions/cookies";

const RedirectToast = () => {
  useEffect(() => {
    const showCookieToast = async () => {
      const message = await getCookieByKey("toast");
      if (message) {
        toast.success(message);
        await deleteCookieByKey("toast");
      }
    };
    showCookieToast();
  }, []);

  return null;
};

export { RedirectToast };

4. 一覧ページでトーストを表示するコンポーネントを組み込む

一覧ページで RedirectToast を読み込めば、リダイレクト後にトーストが表示されます。

📌 /app/list/page.tsx

import { RedirectToast } from "@/components/redirect-toast";

const ListPage = () => {
  return (
    <div>
      <h1>一覧ページ</h1>
      <RedirectToast />
      {/* 他のコンテンツ */}
    </div>
  );
};

export { ListPage };

まとめ

  • Cookieを使うことでページをまたいでトーストの表示が可能
  • setCookieByKey でトーストのメッセージを保存
  • RedirectToast で取得して表示し、deleteCookieByKey で削除
  • useEffect を活用し、クライアント側でトーストを表示

この方法を使えば、 一覧ページに戻った際にスムーズにトーストを表示 できます。サーバーアクションを利用することで簡潔なコードで実装できるのもメリットですね！

Discussion