Invalid "use server" Value

What it means in plain English

Next.js raises Invalid "use server" Value when a "use server" file exports a value that is not an async function. That includes a configuration object, any other value, or a function that is missing the async keyword. Next.js says these exports have to be async because "use server" marks them as Server Actions, which the client invokes through a network request.

Likely causes

• The file exports a constant, a config object, or a type-only value alongside the action.
• The action function was written with function and no async.
• export * re-exports a non-async value from another module into the "use server" file.

How to fix it, step by step

1. Open the file whose first line is 'use server'.
2. Check every export, including export *. Next.js says each one has to be an async function. This is the incorrect shape it shows, and the correct one:

'use server'

// Incorrect: only async functions are allowed.
export const value = 1

// Incorrect: missed the async keyword.
export function getServerData() {
  return '...'
}

// Correct: an async function is exported.
export async function getServerData() {
  return '...'
}

3. Move constants and non-async helpers out of the "use server" file. Leave the async action in that file.
4. A client hook in a Server Component is a different page. See Next.js: a client hook was used in a Server Component.

How to check it worked

• The build finishes, and the Invalid "use server" Value message is gone.
• The client calls the async action and gets its return value.

Sources

• https://nextjs.org/docs/messages/invalid-use-server-value (opens in a new tab)