Project tutorial
Build a Next.js Blog
Build Meridian Notes with the Next.js App Router, TypeScript, Tailwind CSS, Prisma, PostgreSQL, Auth.js credentials, owned posts, search, password reset, and Vercel.
How this project works
Meridian Notes is an original teaching blog built as twelve complete snapshots. Clone the companion repository once, then run any numbered folder without rebuilding all earlier lessons.
The path starts with App Router pages and shared layouts, introduces Tailwind UI and PostgreSQL through Prisma, then builds feed, registration, credentials login, sessions, profiles, owned post CRUD, pagination, search, and secure password reset.
Snapshots 4–12 include deterministic seed accounts: [email protected] and [email protected], both using password123. Each data-backed snapshot has its own database so experiments do not leak into another lesson.
The final snapshot documents a Vercel deployment backed by Neon PostgreSQL, environment-only secrets, production migrations, and durable media considerations.
Start with part 1 Open GitHub repo
Parts in order
Work through the parts in sequence. Each lesson explains the ideas in plain language, then points you to a complete runnable snapshot on GitHub for that stage.
- Part 1: Getting StartedCreate a typed App Router project on port 3000.
- Part 2: RoutingAdd pages and navigation with file-system routes.
- Part 3: Layout and UIBuild a shared responsive interface with Tailwind CSS.
- Part 4: Data LayerModel users and posts with Prisma and PostgreSQL.
- Part 5: Feed and DetailRender a database feed and dynamic note detail routes.
- Part 6: RegistrationValidate registration and store a password hash.
- Part 7: Login and SessionsAuthenticate credentials with Auth.js and the Prisma adapter.
- Part 8: Profiles and MediaEdit profiles and validate avatar uploads.
- Part 9: Posts CRUD and OwnershipCreate, edit, and delete only the signed-in author's posts.
- Part 10: Pagination and SearchPaginate the feed and search note titles.
- Part 11: Password ResetIssue expiring one-use password reset tokens.
- Part 12: DeployDeploy Meridian Notes to Vercel with Neon PostgreSQL.