Step 1: Project Initialization

First, initialize a new Next.js application using TypeScript and Tailwind CSS:

npx create-next-app@latest my-app --typescript --tailwind --eslint

Step 2: Database Schema Setup with Prisma

Install Prisma and initialize the schema configuration:

npm install @prisma/client
npm install prisma --save-dev
npx prisma init

Define your schema.prisma:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

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

model Post {
  id        String   @id @default(cuid())
  title     String
  content   String
  createdAt DateTime @default(now())
}

Step 3: Implement Server Actions

Create app/actions.ts to handle database mutations directly without exposing custom REST endpoints:

'use server';

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

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  await prisma.post.create({
    data: { title, content },
  });

  revalidatePath('/posts');
}