メインコンテンツまでスキップ

use server

use serverディレクティブは、サーバーサイドで実行する関数またはファイルを指定します。ファイルの先頭に配置することで、ファイル内のすべての関数がサーバーサイドであることを示したり、関数の先頭にインラインで配置してその関数をServer Functionとしてマークしたりすることができます。これはReactの機能です。

ファイルの先頭での use server の使用​

以下の例は、ファイルの先頭にuse serverディレクティブを持つファイルを示しています。このファイル内のすべての関数はサーバーで実行されます。

app/actions.ts
'use server'
import { db } from '@/lib/db' // あなたのデータベースクライアント

export async function createUser(data: { name: string; email: string }) {
  const user = await db.user.create({ data })
  return user
}

クライアントコンポーネントでのサーバー関数の使用​

サーバー関数をクライアントコンポーネントで使用するには、ファイルの先頭にuse serverディレクティブを使用して専用のファイルでサーバー関数を作成する必要があります。これらのサーバー関数はクライアントとサーバーコンポーネントにインポートして実行できます。

actions.tsにfetchUsersというサーバー関数があると仮定します：

app/actions.ts
'use server'
import { db } from '@/lib/db' // あなたのデータベースクライアント

export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

その後、クライアントコンポーネントでfetchUsersサーバー関数をインポートし、クライアントサイドで実行できます。

app/components/my-button.tsx
'use client'
import { fetchUsers } from '../actions'

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Fetch Users</button>
}

インラインでの use server の使用​

次の例では、use serverが関数の先頭でインラインで使用され、Server Functionとしてマークされています：

app/page.tsx
import { db } from '@/lib/db' // あなたのデータベースクライアント

export default function UserList() {
  async function fetchUsers() {
    'use server'
    const users = await db.user.findMany()
    return users
  }

  return <button onClick={() => fetchUsers()}>Fetch Users</button>
}

セキュリティに関する考慮事項​

use serverディレクティブを使用する際には、すべてのサーバー側ロジックが安全であり、機密データが保護されていることを確認することが重要です。

認証と認可​

機密性の高いサーバーサイドの操作を行う前に、必ずユーザーを認証および認可してください。

app/actions.ts
'use server'

import { db } from '@/lib/db' // あなたのデータベースクライアント
import { authenticate } from '@/lib/auth' // あなたの認証ライブラリ

export async function createUser(
  data: { name: string; email: string },
  token: string
) {
  const user = authenticate(token)
  if (!user) {
    throw new Error('Unauthorized')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

参照​

use serverに関する詳細はReact ドキュメントを参照してください。