Agent-First Next.js React
PoC Boilerplate

An architecture designed to accelerate PoC development with reusability, scalability, and clarity for both human developers and AI agents.

Next.js v15
TypeScript
Prisma ORM
CSS Modules
Biome
Docker
hyma-poc-boilerplate
import React from 'react';
import { NextApp } from 'next/app';

export default function App({ Component, pageProps }) {
  return <Component {... pageProps} />;
}

Key Features

Designed for quick setup with best practices and necessary tooling built in.

Component Isolation

Per-component folders for modularity and maintainability in /src/components/ui/

API Flexibility

API routes with middleware via next-connect in /src/app/api/

Prisma ORM

Type-safe database access with SQLite default and PostgreSQL support

Biome Linting

Faster, less bloated linting and formatting replacing ESLint/Prettier

Security Headers

Built-in security with X-Content-Type-Options, X-Frame-Options, X-XSS-Protection

Docker Ready

Multi-stage Dockerfile with non-root user and docker-compose setup

Testing Framework

Vitest for unit tests, Playwright for E2E tests with example setup

AI-Agent Friendly

Predefined folders and memory bank system for AI context tracking

Project Structure

Application (src/app)

api/
API routes and middleware
api-demo/
API demo page
components-demo/
Components showcase
env-test/
Environment variables demo
redux-demo/
Redux state demo
layout.tsx
Root layout with providers

Core (src/)

components/
UI components, layouts
hooks/
Custom React hooks
lib/
Utility functions, API clients
services/
Business logic layer
stores/
Redux/Rematch state
styles/
Global CSS styles
tests/
Playwright E2E tests

Configuration & Tooling

docker/
Dockerfile and compose
prisma/
Database schema & migrations
memory-bank/
AI agent context system
docs/
Docusaurus documentation
.husky/
Git hooks for linting
biome.json
Linting configuration
next.config.js
Next.js config

Continue Development

01

Explore Demo Pages

Check out the demo pages to understand key concepts like component structure, API routes, and state management.

02

Review Documentation

Browse the Docusaurus documentation to understand architecture decisions and usage guidelines.

03

Create Components

Add new components following the isolation pattern in /src/components/ui/[ComponentName]/.

04

Set Up Database

SQLite is configured by default. Use Prisma commands to create models and run migrations.

05

Implement API Routes

Add new API endpoints in /src/app/api/ following the route handler pattern.

06

Write Tests

Add unit tests with Vitest and E2E tests with Playwright to ensure quality.