use server ディレクティブ

use server ディレクティブは、関数やファイルをサーバーサイドで実行するように指定します。ファイルの先頭に記述するとそのファイル内のすべての関数がサーバーサイドで実行され、関数の先頭にインラインで記述するとその関数をサーバー関数 (Server Function)としてマークします。これはReactの機能です。

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

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

'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 サーバー関数があると仮定します:

'use server'
import { db } from '@/lib/db' // データベースクライアント

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

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

'use client'
import { fetchUsers } from '../actions'

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>ユーザーを取得</button>
}

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

以下の例では、use server を関数の先頭にインラインで記述し、サーバー関数 (Server Function)としてマークしています:

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 ディレクティブを使用する際は、すべてのサーバーサイドロジックが安全であり、機密データが保護されていることを確認することが重要です。

認証と認可

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

'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ドキュメントを参照してください。

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

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

インラインでの use server 使用

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

認証と認可

参考

On this page

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

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