Fullstack Blog with Next.js + Prisma

The Fullstack Blog with Next.js + Prisma is a TypeScript starter by Prisma that combines Next.js, Prisma Client, NextAuth.js, and PostgreSQL to demonstrate how to build and deploy an authenticated content application.

What is the Fullstack Blog with Next.js + Prisma?

This starter project implements a fullstack blog in TypeScript with React on the frontend, Next.js API routes as the backend, Prisma Client for database access, and NextAuth.js for GitHub OAuth authentication. It runs on Next.js and uses PostgreSQL as its default database, with an optional Railway integration for one-click deployment to Vercel. The repository includes example pages such as a public feed rendered with static site generation and a drafts page rendered with server-side rendering, showing both rendering strategies.

The project is maintained by Prisma and lives in the prisma/prisma-nextjs-blog repository. Its data model defines five tables — User, Post, Account, Session, and VerificationToken — which are created and seeded through Prisma Migrate.

Key Features

• TypeScript fullstack — the entire application, from React components to Next.js API routes and Prisma queries, is written in TypeScript.
• Hybrid rendering — getStaticProps builds the public feed at build time, while getServerSideProps renders the authenticated drafts page dynamically.
• NextAuth.js GitHub provider — authentication is configured with GitHub OAuth using GITHUB_ID and GITHUB_SECRET environment variables; the callback URL is set to the Next.js /api/auth route.
• Prisma Migrate workflow — the schema defines User, Post, Account, Session, and VerificationToken models; running npx prisma migrate dev creates and seeds the database.
• Multi-database support — the datasource block can be switched from PostgreSQL to MySQL, SQL Server, or MongoDB (Preview) by editing the Prisma schema.
• Seed data — prisma/seed.ts populates a newly created database with sample users and posts so the UI works immediately.
• One-click Vercel deployment — two deploy buttons support Railway integration for a managed PostgreSQL database or a manual DATABASE_URL environment setup.

Who should use this template?

• Developers learning fullstack TypeScript — study how Next.js API routes, Prisma Client, and NextAuth.js connect by reading the example feed and drafts implementations.
• Product teams prototyping content apps — use the seeded users, posts, and published/draft workflow as a foundation for a blog, CMS, or publication platform.
• Prisma users exploring database workflows — use the included schema, migration commands, and seed script as a reference for building Prisma-backed apps.

What can you do with this template?

• Add a profile feature — extend the schema with a Profile model, run npx prisma migrate dev, and use PrismaClient instance methods like prisma.user.update with nested profile writes.
• Deploy to production — click the "Deploy with Vercel" button and select either Railway (for a managed PostgreSQL instance) or set DATABASE_URL yourself; remember that GitHub OAuth requires a new app for each callback URL.
• Switch databases — change the provider in the Prisma datasource block to mysql, sqlserver, or mongodb, and adjust the connection URL accordingly; MongoDB requires enabling the mongodb preview feature.

How does the template work?

After cloning the repository and installing dependencies with npm install, you start PostgreSQL locally via npm run db:up or connect an existing instance. Running npx prisma migrate dev applies the schema and triggers the seed file. Then you configure a GitHub OAuth application and paste the client ID and secret into .env. Finally, npm run dev starts the app at http://localhost:3000.

Pros and cons

• Pros — realistic example of SSR and SSG in one app; clear migration and seeding steps; supports four database providers.
• Cons — the GitHub OAuth callback URL field accepts a single URL only, so a production deployment needs a separate GitHub OAuth app from the local development one.

FAQ

Which database does the template use by default?

PostgreSQL is the default provider, and the local development flow spins up a PostgreSQL container via docker-compose.yml with npm run db:up. Alternatively, you can point the datasource to MySQL, SQL Server, or MongoDB.

How do I add a new feature to the app?

The recommended path is to add a model to the Prisma schema, run npx prisma migrate dev to generate a migration, update your Next.js API routes or server-side code, then build React UI components that fetch those endpoints.

Does the template support other authentication providers?

The repository only walks through the GitHub provider from NextAuth.js. You would need to modify the [...nextauth].ts file and environment variables yourself to add other OAuth providers.