Building a Full-Stack App with Next.js 15 and Prisma

Introduction

Next.js 15 with the App Router provides an excellent foundation for building full-stack applications. Combined with Prisma ORM, you get type-safe database access and seamless integration.

Setting Up Your Project

Start by creating a new Next.js project:

npx create-next-app@latest my-app
cd my-app
npm install prisma @prisma/client
npx prisma init

Defining Your Schema

Create your database schema in prisma/schema.prisma:

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  posts     Post[]
  createdAt DateTime @default(now())
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
  createdAt DateTime @default(now())
}

Creating API Routes

Use Next.js Route Handlers for your API:

// app/api/posts/route.js
import { prisma } from '@/lib/prisma';

export async function GET() {
  const posts = await prisma.post.findMany({
    include: { author: true }
  });
  return Response.json(posts);
}

Server Components

Fetch data directly in Server Components:

// app/posts/page.js
import { prisma } from '@/lib/prisma';

export default async function PostsPage() {
  const posts = await prisma.post.findMany();
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </div>
  );
}

Conclusion

Next.js 15 and Prisma provide a powerful, type-safe stack for building modern web applications. The App Router's Server Components eliminate much of the boilerplate traditionally required.