Next.js App RouterでSupabaseのデータが画面に反映されない問題と解決策

新規記事を作成し、Supabaseへのデータ登録は完了しているが、サイト上に反映されない。

原因

Next.js App Routerのキャッシュ機構によるもの。 app/page.tsx や app/admin/page.tsx が動的関数を使用していないため、静的ルート（Static Route）として最適化され、取得結果がキャッシュされている。

解決策

解決策1: revalidatePath の使用（推奨）

Server Actions（lib/actions.ts）内のデータ更新処理（作成・更新・削除）完了直後に、キャッシュを破棄する。

revalidatePath の仕様:

• 指定パスへの次回アクセス時、キャッシュを削除しサーバー側でデータを再取得・再構築する。
• Server ActionsやRoute Handlersなど、サーバーサイドの処理内でのみ実行可能。

実装手順 (action.ts):

1. インポート: import { revalidatePath } from "next/cache"
2. 書き込み/編集/削除の処理結果を変数 (result) に格納する。
3. キャッシュクリア: revalidatePath('/') および revalidatePath('/admin') を実行する。
4. result を返す。

解決策2: ページ全体のキャッシュ無効化

対象のページファイル（app/page.tsx、app/admin/page.tsx）に以下を追記する。

• export const dynamic = 'force-dynamic';
• または export const revalidate = 0;