Next.js 15 Best Practices

Production-ready Server Actions with Zod validation, authentication, rate limiting, and security best practices. Training resource for team development.

Create Agent Task
Try the form below to create a new agent task. This demonstrates the complete Server Action workflow with real-time validation and error handling.
Create Agent Task
Create a new task for your AI agent with detailed configuration and parameters.
Security Features
Zod Schema Validation
Active
Rate Limiting (10/min)
Active
Authentication Required
Mock
Audit Logging
Active
Cache Revalidation
Active
Type Safety
TypeScript
Recent Tasks (0)
Tasks created through the Server Action (mock database)

No tasks yet. Create your first task using the form!

Implementation Details
Server Action:src/lib/actions/agent-task-actions.ts
Form Component:src/components/forms/CreateAgentTaskForm.tsx
Hook Used:useActionState (React 19)
Validation:Zod schemas with real-time feedback

Next.js 15 Features Used:

  • 'use server' directive for Server Actions
  • useActionState for form state management
  • Server Components for data fetching
  • Cache revalidation with revalidatePath/Tag
  • Async request APIs (headers, cookies)
  • TypeScript strict mode compatibility
Usage Example
How to integrate the Server Action and form component in your app
// In your page component
import { CreateAgentTaskForm } from '@/components/forms/CreateAgentTaskForm'
import { getAgentTasks } from '@/lib/actions/agent-task-actions'

export default async function MyPage() {
  const tasks = await getAgentTasks()

  return (
    <div>
      <CreateAgentTaskForm
        agentId="my-agent-id"
        onSuccess={(taskId) => {
          // Handle success (redirect, toast, etc.)
          console.log('Task created:', taskId)
        }}
        onCancel={() => {
          // Handle cancel action
        }}
      />

      {/* Display existing tasks */}
      {tasks.map(task => (
        <TaskCard key={task.id} task={task} />
      ))}
    </div>
  )
}