Setting Up Your Full-Stack Environment with Next.js, Prisma & PostgreSQL

[Nandini Pahuja]

Building a full-stack application can sound intimidating at first, but with the right setup, you’ll be ready to go in no time. In this guide, we’ll set up Next.js for the frontend, Prisma as the ORM, and PostgreSQL as our database — everything you need to start building a CRUD app.

Step 1: Install Node.js and Next.js

Before anything else, make sure Node.js is installed:

node -v
npm -v

If you don’t have Node.js, download it from nodejs.org
.

Next, create a new Next.js project:

npx create-next-app@latest next-prisma-crud
cd next-prisma-crud
npm run dev

Open http://localhost:3000 in your browser. If you see the Next.js welcome page, congratulations — your frontend environment is ready!

Step 2: Install PostgreSQL

You’ll need a PostgreSQL database for storing data. You can install it locally or use a cloud service like Railway or Supabase.

Local installation example (macOS):

brew install postgresql
brew services start postgresql
psql postgres

Create a new database:

CREATE DATABASE next_prisma_crud;

Take note of your username, password, host, and database name — you’ll need these to connect Prisma.

Step 3: Install and Configure Prisma

Inside your Next.js project, install Prisma and initialize it:

npm install prisma --save-dev
npx prisma init

This will create:

prisma/schema.prisma — where your data models live

.env — where your database connection URL goes

Update .env with your database URL:

DATABASE_URL="postgresql://usernameassword@localhost:5432/next_prisma_crud"

Step 4: Define Your First Prisma Model

Open prisma/schema.prisma and define a simple Task model:

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

This model represents a task with a title, completion status, and timestamp.

Step 5: Run Your First Migration

Push your schema to PostgreSQL and generate Prisma Client:

npx prisma migrate dev --name init
npx prisma generate

Prisma will create a Task table in your database and generate the client for querying it in code.

Step 6: Test Prisma Client

Create a small test script to verify the setup:

// prisma/test.js
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

async function main() {
  const tasks = await prisma.task.findMany();
  console.log(tasks);
}

main()
  .catch(e => console.error(e))
  .finally(() => prisma.$disconnect());

Run:

node prisma/test.js

You should see an empty array ([]), meaning the connection works perfectly!

Wrapping Up

By the end of this post, you now have:

A Next.js project running locally

PostgreSQL installed and connected

Prisma configured with a simple model

A verified database connection

Continue reading...

 

Join 𝕋𝕄𝕋 on Telegram
Channel PREVIEW: