React Templates & Themes Logo React Templates & Themes
Nextjs Prisma Boilerplate screenshot

Nextjs Prisma Boilerplate

Author Avatar Theme by Nemanjam
Updated: 11 Aug 2024
687 Stars

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.

Github Live Preview

Categories

Express Nextjs Scss Tailwind Prisma Fullstack

Overview:

Next.js Prisma Boilerplate is a full stack boilerplate built around the latest Next.js stack. It incorporates the best practices described in the official documentation and the developer’s own experience. The goal of this boilerplate is to save time and effort by providing a pre-configured setup for architectural decisions, library choices, development and production environments, and CI/CD pipelines. By installing this boilerplate, developers can start working on their features immediately instead of spending months on setup.

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.
    • Utilizes all Next.js features such as routing, SSR, SEO, Image component, error pages, and .env* files.
    • Scalable and decoupled component structure: pages -> layouts -> views -> components.
    • Fully responsive design implemented with TailwindCSS, SCSS, and BEM (no usage of !important statements).
    • Themes implemented as a custom Tailwind plugin.
    • Fully configured TypeScript, ESLint, and Prettier.
    • Loading and error states handled with Suspense and ErrorBoundary.
    • Forms implemented with React Hook Form, Zod validation schemas, and React Dropzone.
    • Data fetching and server state management with React Query and custom hooks.
  • Backend:
    • Uses Next.js API with a custom server and a static folder for serving files at runtime.
    • Prisma ORM with Postgres database for managing data and a Faker seed script.
    • Prisma schema…

Installation:

  1. Clone the repository:
git clone [repository-url]
  1. Install dependencies:
cd [project-folder]
npm install

  1. Configure the environment variables:

    • Rename the .env.example file to .env.local and fill in the required values.

  2. Run the application:

npm run dev

Summary:

Next.js Prisma Boilerplate is a comprehensive full stack boilerplate built around the Next.js stack. It provides a pre-configured setup for a range of features including authentication, responsive design, form handling, data fetching, and more. With a solid tech stack and attention to best practices, this boilerplate aims to save developers time and effort in setting up their projects.