NextJs-FullStack-App-Blog-APP — Fullstack Next.js CRUD Application

A fullstack blog application built with Next.js 16, React 19, Prisma ORM, PostgreSQL, and NextAuth.js. Users can register, sign in, create, update, and delete their own posts — all with server-side rendering, Server Actions, and JWT authentication.

Live tutorial: hpweb.dev/learning/nextjs

Live Deployed App fullstack-nextjs-react-prisma-postg

Tutorial Steps: 31-Part Series

Technologies

Category	Stack
Framework	Next.js 16 (App Router), React 19
Language	TypeScript
Database	PostgreSQL (Prisma Postgres)
ORM	Prisma (with Prisma Accelerate)
Query Insights	Prisma Query Insights (built into Prisma Postgres)
Authentication	NextAuth.js v5 (Auth.js), Credentials Provider, bcrypt, JWT
Styling	Tailwind CSS
Deployment	Vercel
Dev Server	Turbopack

Getting Started

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env
# Fill in DATABASE_URL, AUTH_SECRET, etc.

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev

# Seed the database
npx prisma db seed

# Start the development server
pnpm dev

Open http://localhost:3000 in your browser.

Tutorial Steps & Branches

This project was built step-by-step following the Next.js 16 Tutorial Series. Each step has its own Git branch:

Step	Topic	Tutorial	Branch
1	Your First Next.js Page	Read	step1
2	File-Based Routing	Read	step2
3	Layouts & Navigation	Read	step3
4	Introduction to Prisma ORM	Read	step4
5	Modeling Your Data	Read	step5
6	Seeding Test Data	Read	step6
7	Connecting to the Database	Read	step7
8	Rendering Posts from the Database	Read	step8
9	Advanced Prisma Queries	Read	—
10	Dynamic Routes	Read	step10
11	Building an API	Read	step11
12	Client Components & Pagination	Read	step12
13	Adding Authentication	Read	step13
14	Login & Register	Read	step14
15	Session & Protected UI	Read	step15
16	Creating Posts	Read	step16
17	Deleting Posts	Read	step17
18	Deploy to Vercel	Read	step18
19	Updating Posts	Read	step19
20	Refactoring Pagination	Read	step20
21	The use() Hook in Practice	Read	step21
22	Middleware to Proxy Migration	Read	step22
23	Error Handling	Read	step23
24	Loading UI & Skeletons	Read	step24
25	Dynamic Metadata & SEO	Read	step25
26	Search & Filtering	Read	step26
27	useActionState for Forms	Read	step27
28	Input Validation with Zod	Read	step28
29	Image Optimization	Read	step29
30	Profiling Queries with Prisma Query Insights	Read	—
31	Next.js 16 File Conventions	Read	—

Commands Reference

All terminal commands used throughout the tutorial series.

Command	Purpose	Tutorial Step(s)
pnpm create next-app@latest	Scaffold a new Next.js project	Step 1
pnpm dev	Start dev server with Turbopack	Step 1
pnpm add @prisma/client @prisma/adapter-pg	Install Prisma client and adapter	Step 4
pnpm add -D prisma tsx	Install Prisma CLI and tsx runner	Step 4
npx prisma init	Initialize Prisma in the project	Step 4
npx prisma init --db	Initialize Prisma and create a Prisma Postgres database	Step 4
npx prisma generate	Generate the Prisma Client	Step 4, Step 6
npx prisma studio	Open database GUI in browser	Step 4, Step 5, Step 6
npx prisma migrate dev --name <name>	Create and apply a migration	Step 5, Step 6
npx prisma db pull	Pull schema from live database	Step 5, Step 6
pnpm add bcryptjs	Install bcrypt for password hashing	Step 6
npx prisma db seed	Seed database with test data	Step 6, Step 8
npx prisma migrate reset	Reset, re-migrate, and re-seed	Step 6
pnpm add next-auth@beta	Install NextAuth.js	Step 13
openssl rand -base64 32	Generate a secure AUTH_SECRET	Step 13, Step 18
npx prisma migrate deploy	Apply pending migrations (production)	Step 6, Step 18

Environment Variables

Copy .env.example to .env and fill in the values:

DATABASE_URL=         # Prisma Postgres direct connection URL
ACCELERATE_URL=       # Prisma Accelerate URL (runtime queries)
AUTH_SECRET=          # NextAuth secret (openssl rand -base64 32)
NEXTAUTH_URL=         # App URL (http://localhost:3000 for dev)

Useful Commands

npx prisma studio          # Open Prisma Studio (database GUI)
npx prisma migrate dev     # Run pending migrations
npx prisma db seed         # Seed the database
npx prisma generate        # Regenerate Prisma Client
pnpm dev                   # Start dev server with Turbopack

License

MIT