diff --git a/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
index ff3df3be1061c..1d747ce1b6a26 100644
--- a/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ b/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
@@ -85,17 +85,34 @@ export function Button() {
You can also pass a Server Action to a Client Component as a prop:
```jsx
-
+
```
-```jsx filename="app/client-component.jsx"
+```tsx filename="app/client-component.tsx" switcher
'use client'
-export default function ClientComponent({ updateItem }) {
- return
+export default function ClientComponent({
+ updateItemAction,
+}: {
+ updateItemAction: (formData: FormData) => void
+}) {
+ return
}
```
+```jsx filename="app/client-component.jsx" switcher
+'use client'
+
+export default function ClientComponent({ updateItemAction }) {
+ return
+}
+```
+
+Usually, the Next.js TypeScript plugin would flag `updateItemAction` in `client-component.tsx` since it is a function which generally can't be serialized across client-server boundaries.
+However, props named `action` or ending with `Action` are assumed to receive Server Actions.
+This is only a heuristic since the TypeScript plugin doesn't actually know if it receives a Server Action or an ordinary function.
+Runtime type-checking will still ensure you don't accidentally pass a function to a Client Component.
+
## Behavior
- Server actions can be invoked using the `action` attribute in a [`