Menu

use server

use server ディレクティブは、関数またはファイルをサーバー側で実行されるように指定します。ファイルの最上部で使用して、ファイル内のすべての関数がサーバー側であることを示すか、関数の最上部でインラインに使用して、その関数を Server Function としてマークできます。これは React の機能です。

ファイルの最上部で use server を使用する

次の例は、最上部に use server ディレクティブがあるファイルを示しています。ファイル内のすべての関数がサーバー上で実行されます。

app/actions.ts
TypeScript
'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
}

クライアントコンポーネントで Server Functions を使用する

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

actions.ts に fetchUsers Server Function があると仮定します。

app/actions.ts
TypeScript
'use server'
import { db } from '@/lib/db' // データベースクライアント
 
export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

その後、fetchUsers Server Function をクライアントコンポーネントにインポートして、クライアント側で実行できます。

app/components/my-button.tsx
TypeScript
'use client'
import { fetchUsers } from '../actions'
 
export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Fetch Users</button>
}

use server をインラインで使用する

次の例では、use server は関数の最上部でインラインに使用され、その関数を Server Function としてマークしています。

app/posts/[id]/page.tsx
TypeScript
import { EditPost } from './edit-post'
import { revalidatePath } from 'next/cache'
 
export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await getPost(params.id)
 
  async function updatePost(formData: FormData) {
    'use server'
    await savePost(params.id, formData)
    revalidatePath(`/posts/${params.id}`)
  }
 
  return <EditPost updatePostAction={updatePost} post={post} />
}

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

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

認証と認可

機密のサーバー側操作を実行する前に、必ずユーザーを認証および認可してください。

app/actions.ts
TypeScript
'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
}

リファレンス

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