Next.js 16 & React 19: Build a Fullstack App with Prisma, Postgres & NextAuth.js

A 31-step tutorial series for React developers who want to learn Next.js. We build a complete blog application — NextJs-FullStack-App-Blog-APP — with authentication, a real database, full CRUD operations, and deploy it to Vercel, one small step at a time.

Live Demo →Source Code

What You Will Build

Throughout this series you will build NextJs-FullStack-App-Blog-APP — a fullstack blog application where users can register, sign in, create, update, and delete their own posts. The project covers every layer of a modern web app: the React UI, the Next.js server, the Prisma ORM, a PostgreSQL database, and NextAuth.js authentication — all written in TypeScript and deployed on Vercel.

View the source code on GitHub — each step has its own branch (e.g. step1, step2, … step30). Step 31 is a theory reference with no branch.

Technologies & Tools

Framework & Language

  • Next.js 16 (App Router)
  • React 19 (Server & Client Components)
  • TypeScript

Database & ORM

  • Prisma ORM
  • PostgreSQL (Prisma Postgres)
  • Prisma Accelerate
  • Prisma Studio

Authentication

  • NextAuth.js v5 (Auth.js)
  • Credentials Provider
  • bcrypt password hashing
  • JWT sessions

Styling & UI

  • Tailwind CSS
  • Responsive design

Deployment

  • Vercel
  • Turbopack (dev server)

Developer Tools

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

Prerequisites

  • Node.js 18+ installed (nodejs.org)
  • A code editor (VS Code recommended)
  • A Vercel account (for Prisma Postgres and deployment)
  • Basic knowledge of React (components, props, state) — see our React 19 tutorial

Tutorial Roadmap — 31 Steps

  1. 01
    Your First Next.js Page — Project setup, App Router, Server Components[branch]
  2. 02
    File-Based Routing — Creating pages, understanding routes[branch]
  3. 03
    Layouts & Navigation — Shared UI, the Link component, Client Components[branch]
  4. 04
    Introduction to Prisma ORM — Setting up the database layer[branch]
  5. 05
    Modeling Your Data — Schema design, User & Post models, migrations[branch]
  6. 06
    Seeding Test Data — Populating the database with sample content[branch]
  7. 07
    Connecting to the Database — The Prisma Client singleton pattern[branch]
  8. 08
    Rendering Posts from the Database — Server Components and data fetching[branch]
  9. 09
    Advanced Prisma Queries — Deep dive into include, select, relations, and performance — compared with Laravel Eloquent
  10. 10
    Dynamic Routes — Building the post detail page with [id][branch]
  11. 11
    Building an API — Route Handlers and JSON responses[branch]
  12. 12
    Client Components & Pagination — Interactive UI, useEffect, and data fetching[branch]
  13. 13
    Adding Authentication — NextAuth.js setup and configuration[branch]
  14. 14
    Login & Register — Building authentication forms[branch]
  15. 15
    Session & Protected UI — Middleware, route protection, session management[branch]
  16. 16
    Creating Posts — Server Actions and form handling[branch]
  17. 17
    Deleting Posts — Completing the CRUD cycle[branch]
  18. 18
    Deploy to Vercel — Environment variables, Prisma migrations, and going live[branch]
  19. 19
    Updating Posts — Edit form, Server Actions, and prisma.post.update() — completing full CRUD[branch]
  20. 20
    Refactoring Pagination — Replace useEffect with Server Components, Suspense, and URL-based pagination[branch]
  21. 21
    The use() Hook in Practice — Stream data from Server to Client Components with use(), Suspense, and Prisma[branch]
  22. 22
    Middleware to Proxy Migration — Migrate from the deprecated middleware convention to the new proxy file convention[branch]
  23. 23
    Error Handling — Add error boundaries with error.tsx and custom 404 pages with not-found.tsx[branch]
  24. 24
    Loading UI & Skeletons — Show instant loading states with the loading.tsx file convention and skeleton screens[branch]
  25. 25
    Dynamic Metadata & SEO — Add page titles, descriptions, and Open Graph tags with the Metadata API[branch]
  26. 26
    Search & Filtering — Add search to the posts page using URL searchParams and server-side Prisma queries[branch]
  27. 27
    useActionState for Forms — Refactor forms with useActionState for pending states and inline server validation errors[branch]
  28. 28
    Input Validation with Zod — Add robust input validation to forms and server actions using the Zod library throughout the codebase.[branch]
  29. 29
    Image Optimization — Add author avatars with the next/image component and automatic image optimization[branch]
  30. 30
    Profiling Queries with Query Insights — Identify slow queries, N+1 problems, and missing indexes using the Query Insights dashboard built into Prisma Postgres
  31. 31
    Next.js 16 File Conventions — Complete reference to every special file name in the App Router — what each file does and which ones you actually need

Published Steps

The Prisma Client Singleton Pattern in Next.js

Step 7 — Create a shared Prisma Client instance that your Next.js app uses to query the database. Understand why a singleton is necessary in a Node.js server.

Rendering Database Data in Next.js Server Components

Step 8 — Replace the placeholder posts page with a real database query. Learn how to use prisma.post.findMany() with relations and render the results in a Server Component.

Building a REST API with Next.js Route Handlers

Step 11 — Create JSON API endpoints using Next.js Route Handlers. Learn how to build GET and POST routes inside the app/api directory and return data from the database.

Login & Register Forms in Next.js with NextAuth.js

Step 14 — Build the login and register pages as interactive Client Components. Use NextAuth signIn(), handle form submissions, display errors, and redirect after authentication.

Creating Posts with Next.js Server Actions

Step 16 — Build the "Create Post" form using Server Actions — a Next.js feature that lets you handle form submissions directly on the server without writing an API route.

Deploy to Vercel with Prisma Postgres

Step 18 — Deploy your fullstack Next.js app to Vercel. Configure environment variables, run Prisma migrations on production, and go live with your Prisma Postgres database.

Migrating from Middleware to Proxy in Next.js 16

Step 22 — Next.js 16 deprecated the middleware file convention. Learn what the new proxy convention is, why the rename happened, and how to migrate your NextAuth.js route protection from middleware.ts to proxy.ts.

Error Handling with error.tsx and not-found.tsx

Step 23 — Add error boundaries and custom 404 pages using Next.js file conventions. Handle unexpected errors gracefully and show meaningful not-found pages for missing posts.

Loading UI with loading.tsx and Skeleton Screens

Step 24 — Use the loading.tsx file convention to show instant loading states and skeleton UIs while pages load — the simplest way to add Suspense to your app.

Dynamic Metadata & SEO with generateMetadata

Step 25 — Add dynamic page titles, descriptions, and Open Graph tags using the Metadata API. Improve search engine visibility and social media sharing for every page.

Search & Filtering with URL Search Params

Step 26 — Add a search bar to the posts page using URL searchParams, server-side Prisma queries, and useSearchParams. Learn the URL-as-state pattern for shareable, bookmark-friendly search.

Form Handling with useActionState (React 19)

Step 27 — Refactor the create post form to use useActionState — the React 19 pattern for pending states, server validation errors, and progressive enhancement in forms.

Input Validation with Zod

Step 28 — Add type-safe input validation across the app using Zod — define schemas once, validate in server actions and API routes, and return structured errors to the UI.

Image Optimization with next/image

Step 29 — Add author avatars using the next/image component. Learn how Next.js automatically optimizes, resizes, and lazy-loads images for better performance.

Profiling Queries with Prisma Query Insights

Step 30 — Identify slow queries, N+1 problems, and missing indexes in your Next.js app using the built-in Query Insights dashboard in Prisma Postgres.