next enterprise

Next.js Enterprise Boilerplate

Welcome to the Next.js Enterprise Boilerplate, an open-source template for enterprise projects! It's loaded with features that'll help you build a high-performance, maintainable, and enjoyable app. We've done all the heavy lifting for you, so sit back, relax, and get ready to conquer the world with your incredible app! ?

Note

Blazity is a group of Next.js/Headless experts. Contact us at [email protected] if you’d like to talk about your project or just to have a chat with us

Features

With this template, you get all the awesomeness you need:

• ?️ Next.js - Fast by default, with config optimized for performance (with App Directory)
• ? Tailwind CSS - A utility-first CSS framework for rapid UI development
• ESlint and Prettier - For clean, consistent, and error-free code
• Extremely strict TypeScript - With ts-reset library for ultimate type safety
• GitHub Actions - Pre-configured actions for smooth workflows, including Bundle Size and performance stats
• ? Perfect Lighthouse score - Because performance matters
• Bundle analyzer plugin - Keep an eye on your bundle size
• Jest and React Testing Library - For rock-solid unit and integration tests
• Playwright - Write end-to-end tests like a pro
• Storybook - Create, test, and showcase your components
• Smoke Testing and Acceptance Tests - For confidence in your deployments
• Conventional commits git hook - Keep your commit history neat and tidy
• Observability - Open Telemetry integration for seamless monitoring
• Absolute imports - No more spaghetti imports
• Health checks - Kubernetes-compatible for robust deployments
• Radix UI - Headless UI components for endless customization
• CVA - Create a consistent, reusable, and atomic design system
• Renovate BOT - Auto-updating dependencies, so you can focus on coding
• Patch-package - Fix external dependencies without losing your mind
• Components coupling and cohesion graph - A tool for managing component relationships
• Automated ChatGPT Code Reviews - Stay on the cutting edge with AI-powered code reviews!
• Semantic Release - for automatic changelog
• T3 Env - Manage your environment variables with ease

Table of Contents

• Next.js Enterprise Boilerplate
  • Features
  • Table of Contents
  • Getting Started
  • Deployment
  • Scripts Overview
  • Coupling Graph
  • Testing
    • Running Tests
    • Acceptance Tests
    • Smoke Testing
  • Styling and Design System
    • CVA - A New Approach to Variants
  • State Management
    • Zustand
    • Jotai
    • Recoil
  • ChatGPT Code Review
  • Environment Variables handling
  • Contribution
  • Support
  • License
  • Contributors

Getting Started

To get started with this boilerplate, follow these steps:

1. Fork & clone repository:

## Don't forget to  star and fork it first :)
git clone https://github.com/<your_username)/next-enterprise.git

2. Install the dependencies:

yarn install --frozen-lockfile

3. Run the development server:

yarn dev

4. Open http://localhost:3000 with your browser to see the result.

5. This project uses a git hook to enforce conventional commits. To install the git hook, run the following command in the root directory of the project:

brew install pre-commit
pre-commit install -t commit-msg

Deployment

Easily deploy your Next.js app with Vercel by clicking the button below:

? Scripts Overview

The following scripts are available in the package.json:

• dev: Starts the development server with colorized output
• build: Builds the app for production
• start: Starts the production server
• lint: Lints the code using ESLint
• lint:fix: Automatically fixes linting errors
• prettier: Checks the code for proper formatting
• prettier:fix: Automatically fixes formatting issues
• analyze: Analyzes the bundle sizes for Client, Server and Edge environments
• storybook: Starts the Storybook server
• build-storybook: Builds the Storybook for deployment
• test: Runs unit and integration tests
• e2e:headless: Runs end-to-end tests in headless mode
• e2e:ui: Runs end-to-end tests with UI
• format: Formats the code with Prettier
• postinstall: Applies patches to external dependencies
• preinstall: Ensures the project is installed with Yarn
• coupling-graph: Generates a coupling and cohesion graph for the components

? Coupling Graph

The coupling-graph script is a useful tool that helps visualize the coupling and connections between your project's internal modules. It's built using the Madge library. To generate the graph, simply run the following command:

yarn coupling-graph

This will create a graph.svg file, which contains a graphical representation of the connections between your components. You can open the file with any SVG-compatible viewer.

Add your contributions