Build a Full-Stack App with Next.js, Prisma & PostgreSQL

sandbox technology
 

Build a Full-Stack App with Next.js, Prisma, and PostgreSQL in 2025

Creating a full-stack web application continues to be an exciting challenge for developers aiming for fast, scalable, and maintainable solutions. As of 2025, the modern JavaScript ecosystem offers powerful tools like Next.js, Prisma ORM, and PostgreSQL to streamline this process. This comprehensive guide walks you through building a full-stack app step-by-step, integrating these technologies seamlessly to create a modern, performant application.

Why Choose Next.js, Prisma, and PostgreSQL?

When developing full-stack applications, choosing the right tools is crucial. Let’s briefly explore why these technologies are ideal:

  • Next.js: A React framework that enables server-side rendering (SSR), static site generation (SSG), and easy routing, making it perfect for building SEO-friendly and fast web apps.
  • Prisma ORM: Modern ORM that simplifies database interactions with type safety, auto-generated queries, and support for multiple databases including PostgreSQL.
  • PostgreSQL: An advanced, open-source relational database, renowned for robustness, extensibility, and standards compliance, ideal for scalable web applications.

Prerequisites and Setup

Before diving into code, ensure your environment is ready:

  • Node.js v16+ installed (check with Node.js downloads)
  • PostgreSQL installed and running locally or on a server
  • A code editor like VS Code
  • Basic knowledge of React, Node.js, and SQL

Step 1: Setting Up the Next.js Project

Start by creating a new Next.js application. From your terminal, run:

npx create-next-app fullstack-nextjs-prisma-postgres --typescript

This command scaffolds a new Next.js project with TypeScript support for better type safety. Next, navigate into the project directory:

cd fullstack-nextjs-prisma-postgres

Step 2: Configure PostgreSQL Database

Ensure your PostgreSQL server is running. Create a new database for your app:

CREATE DATABASE fullstack_db;

You can do this via terminal or a database GUI like TablePlus. Next, create a user with privileges:

CREATE USER fullstack_user WITH PASSWORD 'your_password';
GRANT ALL PRIVILEGES ON DATABASE fullstack_db TO fullstack_user;

Now, your database is ready for connection.

Step 3: Install Prisma and Initialize It

Install Prisma CLI and client as development dependencies:

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

Initialize Prisma with:

npx prisma init

This creates a prisma directory with a schema.prisma file and a .env file for environment variables.

Step 4: Configure Prisma Schema and Database Connection

Edit the .env file to include your database connection URL:

DATABASE_URL="postgresql://fullstack_user:your_password@localhost:5432/fullstack_db?schema=public"

Next, define your data models in schema.prisma. For demonstration, let’s build a simple Post model:

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

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

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  createdAt DateTime @default(now())
}

Step 5: Migrate Database Schema

Generate and apply migrations to create the tables in PostgreSQL:

npx prisma migrate dev --name init

This command generates migration files and updates your database schema accordingly.

Step 6: Generate Prisma Client

During migration, Prisma generates the @prisma/client library. You can import this in your Next.js API routes or pages to perform database operations.

Step 7: Building API Routes in Next.js

Next.js allows creating backend API routes inside the pages/api directory. Let’s create an API to handle CRUD operations for posts.

Example: Fetching Posts

// pages/api/posts/index.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const posts = await prisma.post.findMany({
      orderBy: { createdAt: 'desc' }
    })
    res.status(200).json(posts)
  } else if (req.method === 'POST') {
    const { title, content } = req.body
    const newPost = await prisma.post.create({
      data: { title, content }
    })
    res.status(201).json(newPost)
  } else {
    res.setHeader('Allow', ['GET', 'POST'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

Example: Fetching, Updating, Deleting a Single Post

// pages/api/posts/[id].ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { id } = req.query
  if (typeof id !== 'string') {
    res.status(400).send('Invalid ID')
    return
  }

  if (req.method === 'GET') {
    const post = await prisma.post.findUnique({ where: { id: Number(id) } })
    if (post) {
      res.status(200).json(post)
    } else {
      res.status(404).json({ message: 'Post not found' })
    }
  } else if (req.method === 'PUT') {
    const { title, content } = req.body
    const post = await prisma.post.update({
      where: { id: Number(id) },
      data: { title, content },
    })
    res.status(200).json(post)
  } else if (req.method === 'DELETE') {
    await prisma.post.delete({ where: { id: Number(id) } })
    res.status(204).end()
  } else {
    res.setHeader('Allow', ['GET', 'PUT', 'DELETE'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

Step 8: Building the Front-End with React Components

Next.js uses React for frontend UI. We can build pages that interact with your API endpoints to create a full CRUD interface.

Creating a Posts List Page

<!-- pages/index.tsx -->
import { useEffect, useState } from 'react'
import Link from 'next/link'

type Post = {
  id: number
  title: string
  content?: string
  createdAt: string
}

export default function Home() {
  const [posts, setPosts] = useState<Post[]>([])

  useEffect(() => {
    fetch('/api/posts')
      .then(res => res.json())
      .then(data => setPosts(data))
  }, [])

  return (
    <div>
      <h1>My Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`}>
              <a>{post.title}</a>
            </Link>
          </li&gt>
        ))}
      </ul>
    </div>
  )
}

Adding a New Post

<!-- pages/new.tsx -->
import { useState } from 'react'
import { useRouter } from 'next/router'

export default function NewPost() {
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  const router = useRouter()

  const handleSubmit = async (e) => {
    e.preventDefault()
    await fetch('/api/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title, content }),
    })
    router.push('/')
  }

  return (
    <form onSubmit={handleSubmit}>
      <h1>Create a New Post</h1>
      <label>Title:</label>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
      />
      <br />
      <label>Content:</label>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      <br />
      <button type="submit">Add Post</button>
    </form>
  )
}

Step 9: Deployment and Best Practices

Once you’ve built your full-stack app, deploying it efficiently is essential. Consider these options:

  • Vercel: The platform behind Next.js, optimized for seamless deployment of Next.js apps.
  • Self-hosted environment: Use Docker or cloud providers with managed PostgreSQL instances like Supabase.

Best practices include:

  • Using environment variables securely (via .env.local files)
  • Implementing authentication for user-specific data
  • Handling errors gracefully in frontend and backend
  • Optimizing for SEO and performance with Next.js features

Conclusion

Building a full-stack application with Next.js, Prisma, and PostgreSQL in 2025 is straightforward thanks to the modern tools and frameworks available today. This combination offers a scalable, flexible, and developer-friendly stack capable of powering everything from simple blogs to complex SaaS platforms. With the steps outlined above, you’re well on your way to creating your own robust web application in 2025.

“Modern full-stack development is more accessible than ever, thanks to powerful tools like Next.js, Prisma, and PostgreSQL.”

Start exploring these technologies today, and transform your ideas into production-ready applications efficiently and effectively.