【12-3】Next.js app routerのチュートリアルやってみる(React Server Actionsを使ったデータ削除処理)

はじめに

Next.js app routerのチュートリアルの第12-2章のアウトプットをします。

前の記事

【01】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/af58da3d20cbc790e767

【02】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/edf450b3ee135e83d1e8

【03】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/612221eac233aa9cbb74

【04】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/62f9beccbfe36eaf7f90

【05】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/8b71b1d1df7c9435a9c9

【06】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/58130c3cfbaf8a573de2

【07】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/2c2da0f8071e60454679

【08】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/45f45fcb9cc14506f79f

【09】Next.js app routerのチュートリアルやってみる(loading.tsxとSuspenseでストリーミング)

https://qiita.com/naoyuki2/items/717694288ec6017a3af2

【10】Next.js app routerのチュートリアルやってみる(部分的な事前レンダリング)

https://qiita.com/naoyuki2/items/8062f755b0679fe925b1

【11-1】Next.js app routerのチュートリアルやってみる(URLパラメーターを利用した検索機能)

https://qiita.com/naoyuki2/items/2be9503ac80fc4a1fa6a

【11-2】Next.js app routerのチュートリアルやってみる(URL パラメータを利用したページネーション)

https://qiita.com/naoyuki2/items/fd00dc2b376e7d87fb44

【12-1】Next.js app routerのチュートリアルやってみる(React Server Actionsを使ったデータ作成処理)

https://qiita.com/naoyuki2/items/04ffef203ae798f8c7bc

【12-2】Next.js app routerのチュートリアルやってみる(React Server Actionsを使ったデータ更新処理)

https://qiita.com/naoyuki2/items/41f16ef69a50171d9d86

第12-3章 データの変更

この章では以下を学びました。

• データの削除(Delete)

データの削除(Delete)

サーバー アクションを使用してデータを削除するには、<form>要素で削除ボタンをラップする。

そして、bindを使用し、引数にidを指定してaction属性に渡す。

bindについては前回の記事に少し書きました。

/app/ui/invoices/buttons.tsx

+import { deleteInvoice } from '@/app/lib/actions';
 
// ...
 
+export function DeleteInvoice({ id }: { id: string }) {
+ const deleteInvoiceWithId = deleteInvoice.bind(null, id);
 
  return (
+   <form action={deleteInvoiceWithId}>
      <button className="rounded-md border p-2 hover:bg-gray-100">
        <span className="sr-only">Delete</span>
        <TrashIcon className="w-4" />
      </button>
+   </form>
  );
}

actions.tsにdeleteInvoice関数を定義します。

/app/lib/actions.ts

export async function deleteInvoice(id: string) {
  await sql`DELETE FROM invoices WHERE id = ${id}`;
  revalidatePath('/dashboard/invoices');
}

この処理は/dashboard/invoicesパス内で呼び出されるため、リダイレクトは必要ありません。

revalidatePahtだけ呼んで、テーブルを再レンダリングしましょう。

おわりに

React Server Actions の使い方がなんとなく分かった。

フロントとバックの分離が難しそう。

次の記事