The Future of Web Dev
The Future of Web Dev
Production-Ready Next.js Boilerplate for Enterprise Teams – next-enterprise
Build enterprise Next.js apps with next-enterprise. Includes ESLint, Playwright, Storybook, OpenTelemetry, and AWS Terraform modules.
next-enterprise is a Next.js boilerplate that sets up production-ready directory structures for enterprise applications.
The project comes pre-wired with GitHub Actions workflows for bundle size tracking and performance monitoring, Storybook for component development and documentation, and OpenTelemetry for distributed tracing.
Radix UI handles headless component primitives. Class Variance Authority manages variant-based styling logic. Kubernetes-compatible health checks, a Renovate bot for automated dependency updates, and Terraform-based infrastructure-as-code modules round out the setup.
Features
🚀 Next.js (App Router): Runs on Next.js with the App Router as the default architecture, pre-tuned for performance metrics.
🎨 Tailwind CSS: Applies the utility-first CSS framework, ready for component styling across the entire project.
⚙️ ESLint and Prettier: Enforces consistent code style and catches common errors at both lint and format stages.
📦 Corepack and pnpm: Manages package installation through pnpm with Corepack pinning the package manager version at the Node.js level.
🔷 Strict TypeScript: Runs TypeScript in its strictest mode, extended by the ts-reset library to tighten weaknesses in the standard library’s default type definitions.
🔄 GitHub Actions Workflows: Ships pre-built CI pipelines that track bundle size and performance metrics on each commit.
📊 Bundle Analyzer: Tracks bundle size during development through @next/bundle-analyzer, catching growth before it reaches production.
🧪 Testing Suite: Runs unit and component tests through Vitest and React Testing Library. End-to-end tests run through Playwright.
📖 Storybook: Spins up an isolated component development environment for building and documenting UI components separately from the application.
🚦 Smoke and Acceptance Testing: Adds higher-level test scenarios for verifying critical user flows and deployment readiness.
📝 Conventional Commits: Standardizes commit message format across the team. The structured history feeds directly into Semantic Release for automated changelog generation.
🔍 OpenTelemetry Observability: Connects the application to OpenTelemetry for distributed tracing and performance monitoring across services.
📂 Absolute Imports: Configures module path aliases so import statements reference the project root directly. This keeps paths predictable across the file structure.
❤️ Health Checks: Exposes Kubernetes-compatible liveness and readiness probe endpoints for container orchestration environments.
🎛️ Radix UI: Wires in headless, accessible component primitives. All visual styling happens through Tailwind, and the design layer stays fully under your control.
🎨 Class Variance Authority (CVA): Manages component variant logic through a typed API. Style variants stay consistent and predictable across the design system.
🤖 Renovate Bot: Scans dependencies on a schedule and submits automated pull requests for version updates and security patches.
🔧 Patch-package: Applies local patches to third-party npm packages that persist across installs. Teams can fix upstream bugs directly at the project level.
🔗 Component Relationship Graph: Visualizes component coupling and cohesion across the codebase. Teams use this to identify dependency issues before they spread.
📋 Semantic Release: Automates version bumping and changelog generation based on the project’s conventional commit history.
🌐 T3 Env: Validates and types environment variables at build time. The library throws on missing or misconfigured values before the application starts.
Use Cases
- Enterprise SaaS Platforms: The boilerplate structures large codebases with strict typing and automated testing.
- High Traffic Web Applications: AWS Terraform configurations deploy scalable infrastructure.
- Design System Development: Storybook and Radix UI isolate component development for team collaboration.
- Regulated Industry Software: Built in health checks and OpenTelemetry satisfy strict monitoring requirements.
How to Use It
1. Clone the project using Git:
git clone https://github.com/blazity/next-enterprise.gitOr use the GitHub CLI:
gh repo clone blazity/next-enterprise2. Enable Corepack. This step pins the pnpm version at the Node.js Corepack level. The corepack enable npm command is required even though the project uses pnpm. Matt Pocock’s TotalTypeScript article explains the full technical reasoning behind this requirement.
corepack enable && corepack enable npm3. Install Dependencies
pnpm install --frozen-lockfile4. Start the Development Server, and you can view the application at http://localhost:3000.
pnpm dev5. Click here to deploy it on Vercel, or connect the repository manually through the Vercel dashboard. Vercel auto-detects the Next.js framework and applies sensible deployment defaults.
6. next-enterprise includes Terraform infrastructure-as-code modules built specifically for Next.js deployments on AWS. The modules have been shaped by Blazity’s work with enterprise clients and are not generic templates. The AWS setup provisions the following resources:
| Resource | Purpose |
|---|---|
| VPC | Isolated network infrastructure |
| ECS (Elastic Container Service) | Container orchestration |
| ECR (Elastic Container Registry) | Container image storage |
| Application Load Balancer | Traffic distribution |
| S3 + CloudFront | Static asset delivery and edge caching |
| AWS WAF | Web application firewall protection |
| Redis Cluster | Application-level caching |
Related Resources
- Next.js: The React framework the boilerplate builds on, with App Router, server components, and edge runtime support.
- Tailwind CSS: The utility-first CSS framework pre-configured in the boilerplate.
- Radix UI: The headless component library included for accessible, unstyled UI primitives.
- Vitest: The test runner at the core of the boilerplate’s unit and component testing layer.
FAQs
Q: Does next-enterprise support the Next.js Pages Router?
A: No. The project targets the App Router exclusively.
Q: Why does setup require corepack enable npm if pnpm is the package manager?
A: Corepack manages the package manager version at the Node.js level. The corepack enable npm command activates the Corepack shim system
Q: Can I swap Radix UI for a different component library?
A: Yes. Radix UI is pre-installed but not deeply woven into the application logic. Remove the package and its imports, then drop in your preferred library.
Q: How does Semantic Release connect to Conventional Commits?
A: Semantic Release parses commit messages on each release run. Commits written in conventional format, feat:, fix:, chore: , determine the version bump type and populate the generated changelog automatically.
Q: Is there cloud provider support beyond AWS?
A: The current Terraform modules target AWS. The Blazity team has indicated that additional cloud provider support is planned in future releases.
