Server Actions

// app/contact/page.tsx (Server Component)
export default function ContactPage() {
  async function sendMessage(formData: FormData) {
    'use server'                            // directive inside the function
    const message = formData.get('message') as string
    await db.messages.create({ data: { message } })
  }

  return (
    <form action={sendMessage}>
      <input name="message" />
      <button type="submit">Send</button>
    </form>
  )
}

// app/actions.ts  (or lib/actions.ts)
'use server'                              // directive at top of file

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  await db.posts.create({ data: { title } })
}

export async function deletePost(id: string) {
  await db.posts.delete({ where: { id } })
}

// Server Component — no JS needed on the client
import { createPost } from '@/app/actions'

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <button type="submit">Create</button>
    </form>
  )
}

'use client'

import { createPost } from '@/app/actions'

export function PostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  )
}

'use client'

import { deletePost } from '@/app/actions'

export function DeleteButton({ id }: { id: string }) {
  return (
    <button onClick={() => deletePost(id)}>
      Delete
    </button>
  )
}

'use client'

import { useActionState } from 'react'
import { createPost } from '@/app/actions'

const initialState = { message: '', error: '' }

export function CreatePostForm() {
  const [state, formAction, isPending] = useActionState(createPost, initialState)

  return (
    <form action={formAction}>
      <input name="title" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Creating…' : 'Create'}
      </button>
      {state.message && <p>{state.message}</p>}
      {state.error && <p className="text-red-500">{state.error}</p>}
    </form>
  )
}

// app/actions.ts
'use server'

type State = { message: string; error: string }

export async function createPost(prevState: State, formData: FormData): Promise<State> {
  const title = formData.get('title') as string
  if (!title) return { message: '', error: 'Title is required' }

  await db.posts.create({ data: { title } })
  return { message: 'Post created!', error: '' }
}

'use client'

import { useFormStatus } from 'react-dom'

export function SubmitButton() {
  const { pending } = useFormStatus()
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Saving…' : 'Save'}
    </button>
  )
}

// Use inside a <form> that has an action
<form action={createPost}>
  <input name="title" />
  <SubmitButton />   {/* must be a child of the form */}
</form>

'use client'

import { useTransition } from 'react'
import { updateUser } from '@/app/actions'

export function EditProfile({ user }: { user: User }) {
  const [isPending, startTransition] = useTransition()

  function handleSave() {
    startTransition(async () => {
      await updateUser({ id: user.id, name: 'New Name' })
    })
  }

  return (
    <button onClick={handleSave} disabled={isPending}>
      {isPending ? 'Saving…' : 'Save'}
    </button>
  )
}

// app/actions.ts
'use server'

export async function deletePost(id: string, formData: FormData) {
  await db.posts.delete({ where: { id } })
}

// component
import { deletePost } from '@/app/actions'

export function PostItem({ post }: { post: Post }) {
  const deleteWithId = deletePost.bind(null, post.id)
  return (
    <form action={deleteWithId}>
      <button type="submit">Delete</button>
    </form>
  )
}

'use server'

import { revalidatePath, revalidateTag } from 'next/cache'
import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
  const post = await db.posts.create({ data: { title: formData.get('title') as string } })

  revalidatePath('/posts')              // re-render /posts
  revalidateTag('posts')               // invalidate tagged fetches
  redirect(`/posts/${post.id}`)        // navigate after success
}

'use server'

export async function updateProfile(formData: FormData) {
  try {
    await db.users.update({ where: { id: formData.get('id') as string }, data: { name: formData.get('name') as string } })
    revalidatePath('/profile')
  } catch (err) {
    // Return error state (works with useActionState)
    return { error: 'Failed to update profile' }
  }
}

'use server'

import { cookies } from 'next/headers'

export async function login(formData: FormData) {
  const email = formData.get('email') as string
  const token = await createSessionToken(email)

  const cookieStore = await cookies()
  cookieStore.set('session', token, {
    httpOnly: true,
    secure: true,
    sameSite: 'lax',
    maxAge: 60 * 60 * 24 * 7,
  })
}

export async function logout() {
  const cookieStore = await cookies()
  cookieStore.delete('session')
  redirect('/login')
}

'use server'

import { z } from 'zod'
import { getCurrentUser } from '@/lib/auth'

const schema = z.object({ title: z.string().min(1).max(200) })

export async function createPost(formData: FormData) {
  const user = await getCurrentUser()
  if (!user) throw new Error('Unauthorized')

  const parsed = schema.safeParse({ title: formData.get('title') })
  if (!parsed.success) return { error: parsed.error.flatten() }

  await db.posts.create({ data: { title: parsed.data.title, userId: user.id } })
  revalidatePath('/posts')
}

'use client'

import { useOptimistic, useTransition } from 'react'
import { toggleLike } from '@/app/actions'

export function LikeButton({ post }: { post: Post }) {
  const [optimisticLiked, setOptimisticLiked] = useOptimistic(post.liked)
  const [, startTransition] = useTransition()

  function handleClick() {
    startTransition(async () => {
      setOptimisticLiked(prev => !prev)   // instant UI update
      await toggleLike(post.id)            // actual server call
    })
  }

  return (
    <button onClick={handleClick}>
      {optimisticLiked ? '♥ Liked' : '♡ Like'}
    </button>
  )
}