Created by Hamed Panjeh

Welcome to NextJs-FullStack-App-Blog-APP

A fullstack blog application built with Next.js 16, React 19, Prisma ORM, PostgreSQL, and NextAuth.js — with TypeScript, Tailwind CSS, Server Actions, and JWT authentication.

Want to build this app from scratch? Follow the 31-step tutorial series

Create an account or sign in to create and manage blog posts and do experiment with a NextJs fullstack app!

Posts

Users

Blog Posts

Create, read, update, and delete blog posts stored in a PostgreSQL database via Prisma ORM.

Authentication

Server Actions

Create and delete posts using Server Actions — no API routes needed for mutations.

Route Protection

Middleware protects authenticated routes. Only post owners can delete their own posts.

Technology Stack

Next.js 16 — App Router, Server Components
React 19 — Server & Client Components
TypeScript — static type safety

Prisma ORM — type-safe database access
PostgreSQL — relational database
Prisma Accelerate — connection pooling

NextAuth.js v5 — authentication
Tailwind CSS — utility-first styling
Vercel — deployment

Tools

Turbopack (dev server)
Prisma Studio
Postico (Postgres GUI)
VS Code Prisma Extension
PrismaBuilder.io
Query Insights
prisma.io

Next.js Features Covered

App Router — file-based routing
Server Components — default rendering
Client Components — "use client" directive
Layouts — shared UI with layout.tsx
Dynamic Routes — [id] segments
Route Handlers — API endpoints
Server Actions — form mutations

Proxy (Middleware) — route protection
Streaming & Suspense — progressive rendering
loading.tsx — skeleton loading states
error.tsx — error boundaries
not-found.tsx — custom 404 pages
generateMetadata — dynamic SEO
Open Graph tags — social sharing

searchParams — URL-based state
next/image — image optimization
next/link — client-side navigation
next/navigation — redirect, notFound, useRouter, usePathname
next/font — font optimization
Title template — consistent page titles
remotePatterns — external image config

React 19 Features Covered

Server Components — async components with direct data access
Client Components — interactive UI with hooks
use() hook — read promises during render
useActionState — form state with server actions
useFormStatus — pending state for forms
<Suspense> — loading boundaries & streaming

useState — client-side state management
useEffect — side effects & data fetching
useSession — client-side session access
useRouter — programmatic navigation
useSearchParams — reading URL search params
useRef — mutable refs (debounce timers)
form action — server action as form handler

Next.js Imports Used in This App

Every import from Next.js packages actually used across the codebase.

Import	From	Used in
NextConfig	next	next.config.ts
Metadata	next	layout.tsx, posts/page.tsx, posts/[id]/page.tsx, posts/[id]/edit/page.tsx, posts/new/page.tsx
Geist	next/font/google	layout.tsx
Geist_Mono	next/font/google	layout.tsx
Link	next/link	page.tsx, Header.tsx, not-found.tsx, login/page.tsx, register/page.tsx, posts/PostList.tsx, posts/[id]/page.tsx
notFound	next/navigation	posts/[id]/page.tsx, posts/[id]/edit/page.tsx
redirect	next/navigation	actions.ts, posts/[id]/edit/page.tsx, posts/new/page.tsx
useRouter	next/navigation	login/page.tsx, register/page.tsx, posts/SearchBar.tsx
usePathname	next/navigation	Header.tsx
useSearchParams	next/navigation	posts/SearchBar.tsx
NextResponse	next/server	api/auth/register/route.ts, api/posts/route.ts

How This App Was Built

This application was created following a 31-step tutorial series. Each step builds on the previous one — from an empty Next.js project to a fully deployed CRUD application with authentication.

View the source code on GitHub — each step has its own branch.

Step	Topic	Links
01	Your First Next.js Page	Tutorial Branch
02	File-Based Routing	Tutorial Branch
03	Layouts & Navigation	Tutorial Branch
04	Introduction to Prisma ORM	Tutorial Branch
05	Modeling Your Data	Tutorial Branch
06	Seeding Test Data	Tutorial Branch
07	Connecting to the Database	Tutorial Branch
08	Rendering Posts from the Database	Tutorial Branch
09	Advanced Prisma Queries	Tutorial
10	Dynamic Routes	Tutorial Branch
11	Building an API	Tutorial Branch
12	Client Components & Pagination	Tutorial Branch
13	Adding Authentication	Tutorial Branch
14	Login & Register	Tutorial Branch
15	Session & Protected UI	Tutorial Branch
16	Creating Posts	Tutorial Branch
17	Deleting Posts	Tutorial Branch
18	Deploy to Vercel	Tutorial Branch
19	Updating Posts	Tutorial Branch
20	Refactoring Pagination	Tutorial Branch
21	The use() Hook in Practice	Tutorial Branch
22	Middleware to Proxy Migration	Tutorial Branch
23	Error Handling	Tutorial Branch
24	Loading UI & Skeletons	Tutorial Branch
25	Dynamic Metadata & SEO	Tutorial Branch
26	Search & Filtering	Tutorial Branch
27	useActionState for Forms	Tutorial Branch
28	Input Validation with Zod	Tutorial Branch
29	Image Optimization	Tutorial Branch
30	Profiling Queries with Prisma Query Insights	Tutorial
31	Next.js 16 File Conventions	Tutorial

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