Skip to content
API ReferenceDirectivesuse server

use server

The use server directive designates a function or file to be executed on the server side. It can be used at the top of a file to indicate that all functions in the file are server-side, or inline at the top of a function to mark the function as a Server Function. This is a React feature.

Using use server at the top of a file

The following example shows a file with a use server directive at the top. All functions in the file are executed on the server.

app/actions.ts
'use server' import { db } from '@/lib/db' // Your database client   export async function createUser(data: { name: string; email: string }) {  const user = await db.user.create({ data })  return user }

Using Server Functions in a Client Component

To use Server Functions in Client Components you need to create your Server Functions in a dedicated file using the use server directive at the top of the file. These Server Functions can then be imported into Client and Server Components and executed.

Assuming you have a fetchUsers Server Function in actions.ts:

app/actions.ts
'use server' import { db } from '@/lib/db' // Your database client   export async function fetchUsers() {  const users = await db.user.findMany()  return users }

Then you can import the fetchUsers Server Function into a Client Component and execute it on the client-side.

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

Using use server inline

In the following example, use server is used inline at the top of a function to mark it as a Server Function:

app/posts/[id]/page.tsx
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} /> }

Security considerations

When using the use server directive, it's important to ensure that all server-side logic is secure and that sensitive data remains protected.

Authentication and authorization

Always authenticate and authorize users before performing sensitive server-side operations.

app/actions.ts
'use server'   import { db } from '@/lib/db' // Your database client import { authenticate } from '@/lib/auth' // Your authentication library   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 }

Reference

See the React documentation for more information on use server.