Nextjs Prisma Boilerplate

Full stack boilerplate with Next.js, Prisma, Tailwind, TypeScript, Docker, Postgres, documentation, frontend and backend unit and integration tests with Jest, Cypress end-to-end tests, Github Actions CI/CD workflows, and production deployment with Traefik and Docker.

Generate Convert Improve

Install / Use

npx skills add nemanjam/nextjs-prisma-boilerplate

Installs into whichever agent you are using.

About this skill

Quality Score

0/100

README

Next.js Prisma Boilerplate

GitHub

This is full stack boilerplate built around latest Next.js stack. It is composed of the best practices described in official docs combined with my decisions derived from my own experience and knowledge that I have gathered from working with other people.

Don't spend next 3 months making architectural decisions, choosing libraries, setting up dev and prod environments and CI/CD pipelines, writing boilerplate code, instead install this boilerplate in 15 minutes and start working on your features today.

Demo

Live production demo:

If the app is vandalized just use Reseed link on the right side of the footer to reseed the database.

https://nextjs-prisma-boilerplate.arm1.nemanjamitic.com

Gitpod development playground:

You need Gitpod account, and maybe Postgres database url if my demo database is vandalized. You can create one on elephantsql.com, see Gitpod Environment section for details.

Gitpod Workspace Snapshot

Screenshots

Desktop:

https://user-images.githubusercontent.com/9990165/177367837-a2692e5d-b694-454e-806d-21e806465836.mp4

Mobile:

Usage

build your own projects on top of this (blog, social network, e-commerce, SaaS...), suitable for any small to medium size web app that can run in a single Linux box, not every start up has billion users from first day
if you want to go serverless route you can still reuse a lot of code and implementation decisions from this project, few notes: 1. you need to remove custom http server and let Next.js app run natively, 2. you can't run production app in a single Docker container, 3. you must use different Multer storage type for uploads
reuse any specific design decision, feature or configuration (i.e. VS Code devcontainer can be reused for any Node.js project, theming plugin, email/password login with next-auth, etc...)
use it for learning or as a collection of working examples for reference

Features

Tech stack:

React 18.2.0, Next.js 12.2.0, Node.js 16.13.1, Prisma 4, Postgres 14.3, TypeScript 4.7.4, React Query 4-beta, Axios, React Hook Form 8-alpha, React Dropzone, Zod, msw, TailwindCSS 3, Jest 28, Testing Library React, Cypress 9.6.1.

Frontend:

authentication with next-auth and Facebook, Google and Credentials providers
uses all Next.js features - routing, SSR, SEO, Image component, error pages, .env* files...
scalable and decoupled component structure pages -> layouts -> views -> components
fully responsive design with TailwindCSS, SCSS and BEM (not a single !important statement in entire code)
themes implemented as a custom Tailwind plugin
fully configured TypeScript, ESLint and Prettier
loading and error states handled with Suspense and ErrorBoundary
forms with React Hook Form, Zod validation schemas and React Dropzone
data fetching and server state with React Query and custom hooks

Backend:

uses Next.js API with custom server and static folder for serving files at runtime
Prisma ORM with Postgres database for managing data with Faker seed script
Prisma schema with User and Post models and API with CRUD operations
decoupled controller and service layers for clear reasoning and easy testing
next-connect API handlers with middleware for validation and protected routes
global error handling for both API and getServerSideProps with custom error class
request objects validated with Zod schemas (reused on client)
images upload with Multer

Testing:

Jest and testing-library/react for unit and integration tests
3 separate Jest projects configurations - client, server unit and server integration
unit tests for React components, hooks and React Query hooks, integration tests for views
API responses for client tests mocked with Mock Service Worker handlers
test wrappers with mocked QueryClient, router, session, auth user
jest-preview visual debugging, images mocked with Blob polyfill, separate .env.test* files
unit tests for API controllers with Supertest client and mocked services
API services unit tests with mocked Prisma client singleton instance
integration tests (controller + service) per API handler with Supertest client and test database
code coverage for all Jest tests, statements 43%, branches 47%, functions 39%, lines 43%
Cypress end-to-end tests with configured ESLint and Typescript
Cypress task to seed and teardown test database, commands to filter errors, seed and login
custom Docker image with Cypress installed on top of official base image
both Jest and Cypress are configured to run locally, in Docker and in Github Actions

Development:

3 available configured development environments: local, Docker (VS Code devcontainers) and Gitpod
included VS Code settings and extensions for syntax highlighting, intellisense, formatting, linting and running tests
configured development database with Postgres and Adminer Docker containers

Production:

two staging environments (local and Docker) for testing app built in production mode
one live production environment with Docker and Traefik reverse proxy in separate repository nemanjam/traefik-proxy for deployment on VPS

CI/CD:

3 Github Actions automated workflows for running tests, building and pushing app production Docker image to Dockerhub and deployment on VPS using ssh

Documentation:

docs folder with documented working notes, problems, solutions and included reference links for every technology used in this project
it is meant to be turned into human friendly blog articles (this is still work in progress)

Core principles:

take full advantage of Docker containers for development, testing and production
choose simple, practical and clean solutions
avoid decision fatigue by having a system, reusability and consistency
vendor free - don't couple app architecture with any cloud provider and keep everything under your control
document everything, especially important and difficult parts

Lighthouse score:

Without any special adjustments, there is room for further improvement.

Development environment

This project has 3 available development environments:

local
Docker (with and without devcontainers)
Gitpod

You can pick whatever environment you prefer.

Which one to choose? If you like conventional approach pick local, if you work in a team and want to have consistent environments with colleagues to easily reproduce bugs and quickly onboard new members pick Docker, and if you want to make sandbox do reproduce a bug and ask for help publicly pick Gitpod.

1. local environment

Clone repository and install dependencies.

# clone repository
git clone git@github.com:nemanjam/nextjs-prisma-boilerplate.git
cd nextjs-prisma-boilerplate

# install dependencies
yarn install

When you open project folder for the first time VS Code will ask you to install recommended extensions, you should accept them all, they are needed to highlight, autocomplete, lint and format code, run tests, manage containers.

Fill in required public environment variables in .env.development. Fastest way is to run the app with http server.

You need https locally only for Facebook OAuth login. For that you need mkcert to install certificates for localhost, instructions for that you can find in docs folder.

Leave PORT as 3001, it is hardcoded in multiple places, if you want to change it you must edit all of them (i.e. all `Dockerfil

Related Skills

node-connect

385.5k

Diagnose OpenClaw Android, iOS, or macOS node pairing, QR/setup code, route, auth, and connection failures.

imsg

385.5k

Use the imsg CLI from OpenClaw agents for iMessage/SMS DMs, groups, replies, reactions, polls, watching, and private-API actions.

prose

385.5k

OpenProse VM skill pack. Activate on any `prose` command, .prose files, or OpenProse mentions; orchestrates multi-agent workflows.

Writing Hookify Rules

140.7k

This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.

nemanjam

View profile

View on GitHub

GitHub Stars715

CategoryDevelopment

Updated24d ago

Forks93

nemanjam/nextjs-prisma-boilerplate

Languages

TypeScript

Security Score

100/100

Audited on Jul 15, 2026

No findings