Nextjs Prisma boilerplate

Overview

Full stack boilerplate with Next.js and Prisma.

Goals

Make a solid foundation for a modern full stack Next.js server side rendered app. Get practical experience configuring everything from scratch, especially code structure, testing and automation.

Tech stack

Next.js, Prisma, Next-auth, PostgreSQL, Typescript, TailwindCSS
React Query, React Hook Form, Zod
Jest, Testing Library React, Cypress, msw
Docker, Github Actions, Traefik

Features

Comprehensive full stack Next.js app boilerplate project
Frontend and backend unit and integration tests
End to end tests with Cypress
Development, production and testing environments with Docker
Deployment with Github Actions and Traefik

Implementation details

It is a boilerplate project that aims to establish good practices from the beginning. Frontend code is organized into the following layers pages -> layouts -> views -> components suitable for unit and integration testing. Similarly backend code is organized into controllers -> middleware -> services layers for easy testing. Styling code uses BEM and Tailwind. Theming and dark mode are implemented as Tailwind plugin. React Query is used for data fetching along with Suspense and ErrorBoundary.

Frontend tests are done with Jest, Testing Library, Mock Service Worker, backend tests use Supertest client, E2E tests are done with Cypress. All tests are configured to run locally on the host, in Docker and in Github Actions.

App is built as a Docker image inside Github Actions and deployed to VPS behind the Traefik reverse proxy.

You can find more implementation details in the Documentation section on Github.

Lessons learned

A thorough research is essential for building successful projects.
Be careful with using the latest versions of frameworks and libraries while they are still not battle tested and documented properly.