Actions vs route handlersActions vs route handlers

Sort the use cases

Drag each card into a bin, or click to cycle.

// app/posts/new/page.tsx
import { createPost } from './actions'

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button>Publish</button>
    </form>
  )
}

// app/api/webhooks/stripe/route.ts
export async function POST(request: Request) {
  const event = await request.json()
  await handleStripeEvent(event)
  return Response.json({ received: true })
}

Turn JavaScript off

Pick a JavaScript state, then publish on both sides.

// app/posts/new/actions.ts
'use server'
import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  const title = String(formData.get('title') ?? '')
  await db.post.create({ data: { title } })
  revalidatePath('/posts')
}

// submit-button.tsx
'use client'
import { useFormStatus } from 'react-dom'

export function SubmitButton() {
  const { pending } = useFormStatus()
  return <button disabled={pending}>{pending ? 'Publishing…' : 'Publish'}</button>
}

Put route.ts next to page.tsx

Add the route, then move it. Try a request.

app/
├── users/
│   └── page.tsx        # /users (page)
└── api/
    └── users/
        └── route.ts    # /api/users (API)

Why it matters, pros and cons