Build a Full-Stack App with Next.js 14 and Server Actions: Hands-On Tutorial

Build a Full-Stack App with Next.js 14 and Server Actions

Next.js 14 introduced stable Server Actions, letting you write server-side logic directly inside React components — no API routes required. In this tutorial, we'll build a task management app from scratch.

Prerequisites

• Node.js 18+
• Basic React and TypeScript knowledge

1. Project Setup

npx create-next-app@latest task-app --typescript --tailwind --app
cd task-app
npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite

2. Define the Database Schema

Edit prisma/schema.prisma:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model Task {
  id        Int      @id @default(autoincrement())
  title     String
  completed Boolean  @default(false)
  createdAt DateTime @default(now())
}

Then generate and migrate:

npx prisma migrate dev --name init

3. Create the Prisma Client

Create lib/prisma.ts:

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

4. Build Server Actions

Create app/actions.ts:

'use server'

import { prisma } from '@/lib/prisma'
import { revalidatePath } from 'next/cache'

export async function addTask(formData: FormData) {
  const title = formData.get('title') as string
  if (!title?.trim()) return

  await prisma.task.create({ data: { title: title.trim() } })
  revalidatePath('/')
}

export async function toggleTask(id: number) {
  const task = await prisma.task.findUnique({ where: { id } })
  if (!task) return

  await prisma.task.update({
    where: { id },
    data: { completed: !task.completed },
  })
  revalidatePath('/')
}

export async function deleteTask(id: number) {
  await prisma.task.delete({ where: { id } })
  revalidatePath('/')
}

5. Build the UI

Replace app/page.tsx:

import { prisma } from '@/lib/prisma'
import { addTask, toggleTask, deleteTask } from './actions'

export default async function Home() {
  const tasks = await prisma.task.findMany({
    orderBy: { createdAt: 'desc' },
  })

  return (
    <main className="max-w-xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">Task Manager</h1>

      {/ Add Task Form /}
      <form action={addTask} className="flex gap-2 mb-8">
        <input
          name="title"
          placeholder="Add a new task..."
          className="flex-1 border rounded px-3 py-2"
          required
        />
        <button
          type="submit"
          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        >
          Add
        </button>
      </form>

      {/ Task List /}
      <ul className="space-y-2">
        {tasks.map((task) => (
          <li key={task.id} className="flex items-center gap-3 p-3 border rounded">
            <form action={toggleTask.bind(null, task.id)}>
              <button type="submit">
                <span className={task.completed ? 'line-through text-gray-400' : ''}>
                  {task.completed ? '☑' : '☐'} {task.title}
                </span>
              </button>
            </form>
            <form action={deleteTask.bind(null, task.id)} className="ml-auto">
              <button type="submit" className="text-red-500 hover:text-red-700">
                ✕
              </button>
            </form>
          </li>
        ))}
      </ul>

      <p className="mt-6 text-sm text-gray-500">
        {tasks.length} task(s) · {tasks.filter(t => t.completed).length} completed
      </p>
    </main>
  )
}

6. Run the App

npm run dev

Open http://localhost:3000 — you now have a working full-stack app with:

• ✅ Server-side rendering
• ✅ Database persistence (SQLite via Prisma)
• ✅ Server Actions (no API routes)
• ✅ Automatic revalidation

Key Takeaways

| Feature | Traditional API | Server Actions |

|---------|----------------|----------------|

| Boilerplate | fetch() + API route | Direct function call |

| Type Safety | Manual typing | End-to-end TypeScript |

| Revalidation | Manual cache busting | revalidatePath() built-in |

| Bundle Size | Client-side fetch code | Zero client JS for mutations |

Server Actions simplify full-stack React development dramatically. For production, add input validation (e.g., Zod), error handling, and authentication.

Next Steps

• Add Zod for form validation
• Integrate NextAuth.js for authentication
• Deploy to Vercel with a PostgreSQL database

---

Published by Techsfree IT Consulting — Building better web experiences.