Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

サーバーアクションとミューテーション

サーバーアクションは、サーバー上で実行される非同期関数です。これはサーバーコンポーネントとクライアントコンポーネントの両方で呼び出すことができ、Next.jsアプリケーションでフォーム送信とデータミューテーションを処理します。

🎥 視聴する: サーバーアクションを使ったミューテーションについて詳しく学ぶ → YouTube (10分)

規約

サーバーアクションはReactの"use server"ディレクティブを使って定義できます。async関数の先頭にこのディレクティブを配置して関数をサーバーアクションとしてマークするか、別のファイルの先頭に配置してそのファイルのすべてのエクスポートをサーバーアクションとしてマークできます。

サーバーコンポーネント

サーバーコンポーネントは関数レベルまたはモジュールレベルの"use server"ディレクティブを使用できます。サーバーアクションをインラインで定義するには、関数本体の先頭に"use server"を追加します:

app/page.tsx
TypeScript
export default function Page() {
  // Server Action
  async function create() {
    'use server'
    // Mutate data
  }
 
  return '...'
}

クライアントコンポーネント

クライアントコンポーネントでサーバーアクションを呼び出すには、新しいファイルを作成してその先頭に"use server"ディレクティブを追加します。このファイル内でエクスポートされるすべての関数は、クライアントコンポーネントとサーバーコンポーネントの両方で再利用できるサーバーアクションとしてマークされます:

app/actions.ts
TypeScript
'use server'
 
export async function create() {}
app/button.tsx
TypeScript
'use client'
 
import { create } from './actions'
 
export function Button() {
  return <button onClick={() => create()}>Create</button>
}

アクションをpropsとして渡す

サーバーアクションをクライアントコンポーネントにpropsとして渡すこともできます:

<ClientComponent updateItemAction={updateItem} />
app/client-component.tsx
TypeScript
'use client'
 
export default function ClientComponent({
  updateItemAction,
}: {
  updateItemAction: (formData: FormData) => void
}) {
  return <form action={updateItemAction}>{/* ... */}</form>
}

通常、Next.jsのTypeScriptプラグインはclient-component.tsx内のupdateItemActionにフラグを立てます。これは関数が一般的にクライアント-サーバー間の境界をシリアライズできないためです。 しかし、actionという名前のpropsやActionで終わる名前のpropsはサーバーアクションを受け取ると想定されます。 これはヒューリスティックなものであり、TypeScriptプラグインは実際にサーバーアクションなのか通常の関数なのかを知ることができません。 ランタイムの型チェックにより、誤って関数をクライアントコンポーネントに渡すことを防ぎます。

動作

  • サーバーアクションは<form>要素action属性を使って呼び出すことができます:
    • サーバーコンポーネントはデフォルトでプログレッシブエンハンスメントをサポートしているため、JavaScriptがまだ読み込まれていない場合やJavaScriptが無効になっている場合でもフォームは送信されます。
    • クライアントコンポーネントでは、サーバーアクションを呼び出すフォームはJavaScriptがまだ読み込まれていない場合、クライアントハイドレーションを優先して送信をキューに入れます。
    • ハイドレーション後、フォーム送信時にブラウザは更新されません。
  • サーバーアクションは<form>に限定されず、イベントハンドラー、useEffect、サードパーティライブラリ、および<button>などの他のフォーム要素からも呼び出すことができます。
  • サーバーアクションはNext.jsのキャッシングと再検証アーキテクチャと統合されています。アクションが呼び出されると、Next.jsは更新されたUIと新しいデータを1回のサーバーラウンドトリップで返すことができます。
  • 内部的に、アクションはPOSTメソッドを使用し、このHTTPメソッドのみがアクションを呼び出すことができます。
  • サーバーアクションの引数と戻り値はReactによってシリアライズ可能でなければなりません。シリアライズ可能な引数と値のリストについては、Reactのドキュメントを参照してください。
  • サーバーアクションは関数です。つまり、アプリケーションのどこでも再利用できます。
  • サーバーアクションは、使用されるページまたはレイアウトからランタイムを継承します。
  • サーバーアクションは、使用されるページまたはレイアウトからルートセグメント設定を継承します。これにはmaxDurationなどのフィールドが含まれます。

フォーム

Reactは、HTMLの<form>要素を拡張して、actionプロパティでサーバーアクションを呼び出せるようにしています。

フォームで呼び出されると、アクションは自動的にFormDataオブジェクトを受け取ります。フィールドを管理するためにReact useStateを使用する必要はなく、代わりにネイティブのFormDataメソッドを使用してデータを抽出できます:

app/invoices/page.tsx
TypeScript
export default function Page() {
  async function createInvoice(formData: FormData) {
    'use server'
 
    const rawFormData = {
      customerId: formData.get('customerId'),
      amount: formData.get('amount'),
      status: formData.get('status'),
    }
 
    // mutate data
    // revalidate cache
  }
 
  return <form action={createInvoice}>...</form>
}

補足:

追加の引数を渡す

JavaScriptのbindメソッドを使用して、サーバーアクションに追加の引数を渡すことができます。

app/client-component.tsx
TypeScript
'use client'
 
import { updateUser } from './actions'
 
export function UserProfile({ userId }: { userId: string }) {
  const updateUserWithId = updateUser.bind(null, userId)
 
  return (
    <form action={updateUserWithId}>
      <input type="text" name="name" />
      <button type="submit">Update User Name</button>
    </form>
  )
}

サーバーアクションはフォームデータに加えてuserId引数を受け取ります:

app/actions.ts
TypeScript
'use server'
 
export async function updateUser(userId: string, formData: FormData) {}

補足:

  • もう一つの方法は、引数を隠しフィールドとしてフォームに渡すことです(例:<input type="hidden" name="userId" value={userId} />)。ただし、この値はレンダリングされたHTMLの一部となり、エンコードされません。
  • .bindはサーバーコンポーネントとクライアントコンポーネントの両方で動作します。また、プログレッシブエンハンスメントもサポートしています。

ネストしたフォーム要素

<form>内にネストされた<button><input type="submit"><input type="image">などの要素でもサーバーアクションを呼び出すことができます。これらの要素はformActionプロパティまたはイベントハンドラーを受け付けます。

これは、フォーム内で複数のサーバーアクションを呼び出したい場合に便利です。例えば、投稿を公開することに加えて、下書きを保存するための特定の<button>要素を作成できます。詳細については、React <form> ドキュメントを参照してください。

プログラムによるフォーム送信

requestSubmit()メソッドを使用して、プログラムでフォーム送信をトリガーできます。例えば、ユーザーが + Enterキーボードショートカットを使用してフォームを送信する場合、onKeyDownイベントをリッスンできます:

app/entry.tsx
TypeScript
'use client'
 
export function Entry() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (
      (e.ctrlKey || e.metaKey) &&
      (e.key === 'Enter' || e.key === 'NumpadEnter')
    ) {
      e.preventDefault()
      e.currentTarget.form?.requestSubmit()
    }
  }
 
  return (
    <div>
      <textarea name="entry" rows={20} required onKeyDown={handleKeyDown} />
    </div>
  )
}

これにより最も近い<form>祖先の送信がトリガーされ、サーバーアクションが呼び出されます。

サーバー側のフォームバリデーション

基本的なクライアント側のフォームバリデーションには、requiredtype="email"などのHTML属性を使用できます。

より高度なサーバー側バリデーションには、zodのようなライブラリを使用して、データを変更する前にフォームフィールドを検証できます:

app/actions.ts
TypeScript
'use server'
 
import { z } from 'zod'
 
const schema = z.object({
  email: z.string({
    invalid_type_error: 'Invalid Email',
  }),
})
 
export default async function createUser(formData: FormData) {
  const validatedFields = schema.safeParse({
    email: formData.get('email'),
  })
 
  // Return early if the form data is invalid
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    }
  }
 
  // Mutate data
}

フィールドがサーバー上で検証されたら、アクションでシリアライズ可能なオブジェクトを返し、React useActionStateフックを使用してユーザーにメッセージを表示できます。

  • アクションをuseActionStateに渡すと、アクションの関数シグネチャが変わり、最初の引数として新しいprevStateまたはinitialStateパラメータを受け取るようになります。
  • useActionStateはReactフックであるため、クライアントコンポーネントで使用する必要があります。
app/actions.ts
TypeScript
'use server'
 
import { redirect } from 'next/navigation'
 
export async function createUser(prevState: any, formData: FormData) {
  const res = await fetch('https://...')
  const json = await res.json()
 
  if (!res.ok) {
    return { message: 'Please enter a valid email' }
  }
 
  redirect('/dashboard')
}

そして、アクションをuseActionStateフックに渡し、返されたstateを使用してエラーメッセージを表示できます。

app/ui/signup.tsx
TypeScript
'use client'
 
import { useActionState } from 'react'
import { createUser } from '@/app/actions'
 
const initialState = {
  message: '',
}
 
export function Signup() {
  const [state, formAction, pending] = useActionState(createUser, initialState)
 
  return (
    <form action={formAction}>
      <label htmlFor="email">Email</label>
      <input type="text" id="email" name="email" required />
      {/* ... */}
      <p aria-live="polite">{state?.message}</p>
      <button disabled={pending}>Sign up</button>
    </form>
  )
}

保留状態

useActionStateフックは、アクションの実行中に読み込みインジケーターを表示するために使用できるpendingブール値を公開しています。

または、useFormStatusフックを使用して、アクションの実行中に読み込みインジケーターを表示することもできます。このフックを使用する場合は、読み込みインジケーターを表示するための別のコンポーネントを作成する必要があります。例えば、アクションが保留中の場合にボタンを無効にするには:

app/ui/button.tsx
TypeScript
'use client'
 
import { useFormStatus } from 'react-dom'
 
export function SubmitButton() {
  const { pending } = useFormStatus()
 
  return (
    <button disabled={pending} type="submit">
      Sign Up
    </button>
  )
}

その後、SubmitButtonコンポーネントをフォーム内にネストできます:

app/ui/signup.tsx
TypeScript
import { SubmitButton } from './button'
import { createUser } from '@/app/actions'
 
export function Signup() {
  return (
    <form action={createUser}>
      {/* Other form elements */}
      <SubmitButton />
    </form>
  )
}

補足: React 19では、useFormStatusは返されるオブジェクトにdata、method、actionなどの追加のキーが含まれています。React 19を使用していない場合は、pendingキーのみが利用可能です。

楽観的更新

ReactのuseOptimisticフックを使用して、サーバーアクションの実行が完了するのを待つのではなく、UIを楽観的に更新できます:

app/page.tsx
TypeScript
'use client'
 
import { useOptimistic } from 'react'
import { send } from './actions'
 
type Message = {
  message: string
}
 
export function Thread({ messages }: { messages: Message[] }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic<
    Message[],
    string
  >(messages, (state, newMessage) => [...state, { message: newMessage }])
 
  const formAction = async (formData: FormData) => {
    const message = formData.get('message') as string
    addOptimisticMessage(message)
    await send(message)
  }
 
  return (
    <div>
      {optimisticMessages.map((m, i) => (
        <div key={i}>{m.message}</div>
      ))}
      <form action={formAction}>
        <input type="text" name="message" />
        <button type="submit">Send</button>
      </form>
    </div>
  )
}

イベントハンドラー

サーバーアクションは<form>要素内で使用されることが一般的ですが、onClickなどのイベントハンドラーでも呼び出すことができます。例えば、「いいね」の数を増やすには:

app/like-button.tsx
TypeScript
'use client'
 
import { incrementLike } from './actions'
import { useState } from 'react'
 
export default function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [likes, setLikes] = useState(initialLikes)
 
  return (
    <>
      <p>Total Likes: {likes}</p>
      <button
        onClick={async () => {
          const updatedLikes = await incrementLike()
          setLikes(updatedLikes)
        }}
      >
        Like
      </button>
    </>
  )
}

フォーム要素にイベントハンドラーを追加することもできます。例えば、onChangeでフォームフィールドを保存するには:

app/ui/edit-post.tsx
'use client'
 
import { publishPost, saveDraft } from './actions'
 
export default function EditPost() {
  return (
    <form action={publishPost}>
      <textarea
        name="content"
        onChange={async (e) => {
          await saveDraft(e.target.value)
        }}
      />
      <button type="submit">Publish</button>
    </form>
  )
}

このような短時間に多数のイベントが発生する可能性がある場合は、不要なサーバーアクションの呼び出しを防ぐためにデバウンスを使用することをお勧めします。

useEffect

ReactのuseEffectフックを使用して、コンポーネントのマウント時または依存関係の変更時にサーバーアクションを呼び出すことができます。これは、グローバルイベントに依存する変更や自動的にトリガーする必要がある変更に便利です。例えば、アプリケーションのショートカットのためのonKeyDown、無限スクロールのための交差オブザーバーフック、またはコンポーネントのマウント時に閲覧数を更新するなどです:

app/view-count.tsx
TypeScript
'use client'
 
import { incrementViews } from './actions'
import { useState, useEffect } from 'react'
 
export default function ViewCount({ initialViews }: { initialViews: number }) {
  const [views, setViews] = useState(initialViews)
 
  useEffect(() => {
    const updateViews = async () => {
      const updatedViews = await incrementViews()
      setViews(updatedViews)
    }
 
    updateViews()
  }, [])
 
  return <p>Total Views: {views}</p>
}

useEffect動作と注意点を考慮することを忘れないでください。

エラー処理

エラーがスローされると、クライアント上の最も近いerror.jsまたは<Suspense>境界によってキャッチされます。詳細については、エラー処理を参照してください。

補足:

データの再検証

サーバーアクション内でrevalidatePath APIを使用して、Next.jsキャッシュを再検証できます:

app/actions.ts
TypeScript
'use server'
 
import { revalidatePath } from 'next/cache'
 
export async function createPost() {
  try {
    // ...
  } catch (error) {
    // ...
  }
 
  revalidatePath('/posts')
}

または、revalidateTagを使用してキャッシュタグで特定のデータフェッチを無効化することもできます:

app/actions.ts
TypeScript
'use server'
 
import { revalidateTag } from 'next/cache'
 
export async function createPost() {
  try {
    // ...
  } catch (error) {
    // ...
  }
 
  revalidateTag('posts')
}

リダイレクト

サーバーアクションの完了後にユーザーを別のルートにリダイレクトしたい場合は、redirect APIを使用できます。redirecttry/catchブロックの外で呼び出す必要があります:

app/actions.ts
TypeScript
'use server'
 
import { redirect } from 'next/navigation'
import { revalidateTag } from 'next/cache'
 
export async function createPost(id: string) {
  try {
    // ...
  } catch (error) {
    // ...
  }
 
  revalidateTag('posts') // キャッシュされた投稿を更新
  redirect(`/post/${id}`) // 新しい投稿ページに移動
}

クッキー

cookies APIを使用して、サーバーアクション内でクッキーをgetsetdeleteできます:

app/actions.ts
TypeScript
'use server'
 
import { cookies } from 'next/headers'
 
export async function exampleAction() {
  const cookieStore = await cookies()
 
  // クッキーを取得
  cookieStore.get('name')?.value
 
  // クッキーを設定
  cookieStore.set('name', 'Delba')
 
  // クッキーを削除
  cookieStore.delete('name')
}

サーバーアクションからクッキーを削除する追加の例については、ドキュメントを参照してください。

セキュリティ

デフォルトでは、サーバーアクションが作成されてエクスポートされると、パブリックなHTTPエンドポイントが作成され、同じセキュリティ上の前提と認証チェックで扱う必要があります。これは、サーバーアクションやユーティリティ関数がコード内の他の場所でインポートされていなくても、公開的にアクセス可能であることを意味します。

セキュリティを向上させるため、Next.jsには以下の組み込み機能があります:

  • 安全なアクションID: Next.jsは、クライアントがサーバーアクションを参照して呼び出すことができるように、暗号化された非決定論的なIDを作成します。これらのIDはセキュリティを強化するために、ビルド間で定期的に再計算されます。
  • デッドコード除去: 未使用のサーバーアクション(IDで参照される)はクライアントバンドルから削除され、サードパーティによる公開アクセスを防ぎます。

補足:

IDはコンパイル時に作成され、最大14日間キャッシュされます。新しいビルドが開始されるか、ビルドキャッシュが無効化されると、IDは再生成されます。 このセキュリティ向上により、認証レイヤーが欠けている場合のリスクが軽減されます。ただし、サーバーアクションをパブリックなHTTPエンドポイントのように扱うべきです。

// app/actions.js
'use server'
 
// このアクションはアプリケーションで**使用されている**ため、Next.jsは
// クライアントがサーバーアクションを参照して呼び出せるように
// 安全なIDを作成します。
export async function updateUserAction(formData) {}
 
// このアクションはアプリケーションで**使用されていない**ため、Next.jsは
// `next build`中に自動的にこのコードを削除し、
// パブリックエンドポイントを作成しません。
export async function deleteUserAction(formData) {}

認証と認可

ユーザーがアクションを実行する権限を持っていることを確認する必要があります。例えば:

app/actions.ts
'use server'
 
import { auth } from './lib'
 
export function addItem() {
  const { user } = auth()
  if (!user) {
    throw new Error('このアクションを実行するにはサインインが必要です')
  }
 
  // ...
}

クロージャーと暗号化

コンポーネント内でサーバーアクションを定義すると、アクションが外部関数のスコープにアクセスできるクロージャーが作成されます。例えば、publishアクションはpublishVersion変数にアクセスできます:

app/page.tsx
TypeScript
export default async function Page() {
  const publishVersion = await getLatestVersion();
 
  async function publish() {
    "use server";
    if (publishVersion !== await getLatestVersion()) {
      throw new Error('パブリッシュボタンを押してから、バージョンが変更されました');
    }
    ...
  }
 
  return (
    <form>
      <button formAction={publish}>Publish</button>
    </form>
  );
}

クロージャーは、レンダリング時にデータ(例:publishVersion)の_スナップショット_をキャプチャする必要がある場合に便利で、後でアクションが呼び出されたときに使用できます。

ただし、これを実現するには、キャプチャされた変数がクライアントに送信され、アクションが呼び出されたときにサーバーに戻される必要があります。機密データがクライアントに公開されるのを防ぐため、Next.jsはクローズドオーバーされた変数を自動的に暗号化します。各アクションに対して、Next.jsアプリケーションがビルドされるたびに新しい秘密鍵が生成されます。これは、アクションが特定のビルドに対してのみ呼び出されることを意味します。

補足: 機密値がクライアントに公開されるのを防ぐために、暗号化だけに頼ることはお勧めしません。代わりに、React taint APIを使用して、特定のデータがクライアントに送信されるのを積極的に防ぐべきです。

暗号化キーの上書き(上級者向け)

Next.jsアプリケーションを複数のサーバーでセルフホスティングする場合、各サーバーインスタンスが異なる暗号化キーを持つ可能性があり、不整合が生じる可能性があります。

これを軽減するには、process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY環境変数を使用して暗号化キーを上書きできます。この変数を指定すると、暗号化キーがビルド間で永続的になり、すべてのサーバーインスタンスが同じキーを使用することが保証されます。この変数は必ずAES-GCM暗号化されている必要があります。

これは、複数のデプロイメント間で一貫した暗号化の動作が重要なアプリケーションにおける上級者向けのユースケースです。キーのローテーションや署名などの標準的なセキュリティプラクティスを検討する必要があります。

補足: VercelにデプロイされたNext.jsアプリケーションは、これを自動的に処理します。

許可されるオリジン(上級者向け)

サーバーアクションは<form>要素内で呼び出すことができるため、CSRF攻撃の可能性があります。

内部的に、サーバーアクションはPOSTメソッドを使用し、このHTTPメソッドのみがアクションを呼び出すことができます。これにより、特にSameSiteクッキーがデフォルトである最新のブラウザでは、ほとんどのCSRF脆弱性が防止されます。

追加の保護として、Next.jsのサーバーアクションはOriginヘッダーHostヘッダー(またはX-Forwarded-Host)と比較します。これらが一致しない場合、リクエストは中止されます。つまり、サーバーアクションはそれをホストするページと同じホスト上でのみ呼び出すことができます。

リバースプロキシや多層バックエンドアーキテクチャ(サーバーAPIが本番ドメインと異なる場合)を使用する大規模なアプリケーションでは、serverActions.allowedOriginsオプションを使用して安全なオリジンのリストを指定することをお勧めします。このオプションは文字列の配列を受け付けます。

next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
  experimental: {
    serverActions: {
      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
    },
  },
}

セキュリティとサーバーアクションについての詳細をご覧ください。

追加リソース

詳細については、以下のReactドキュメントを参照してください: