应用程序开发模版：企业项目模板，提供强大的功能，支持高性能、可维护和愉快的Web应用程序开发，适用于简化工作流程的开发人员

<img align="right" width="360px" height="410px" src="./.github/assets/project-logo-vertical.png"> # Next.js Enterprise Boilerplate </br> [![GitHub Actions Workflow Status][check-workflow-badge]][check-workflow-badge-link] [![GitHub License][github-license-badge]][github-license-badge-link] [![GitHub contributors][github-contributors-badge]][github-contributors-badge-link] [![Discord][discord-badge]][discord-badge-link] [![Blazity][made-by-blazity-badge]][made-by-blazity-badge-link] 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 [contact@blazity.com](https://blazity.com) 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](https://nextjs.org/)** - Fast by default, with config optimized for performance (with **App Directory**) - 💅 **[Tailwind CSS](https://tailwindcss.com/)** - A utility-first CSS framework for rapid UI development - ✨ **[ESlint](https://eslint.org/)** and **[Prettier](https://prettier.io/)** - For clean, consistent, and error-free code - 🛠️ **[Extremely strict TypeScript](https://www.typescriptlang.org/)** - With [`ts-reset`](https://github.com/total-typescript/ts-reset) library for ultimate type safety - 🚀 **[GitHub Actions](https://github.com/features/actions)** - Pre-configured actions for smooth workflows, including Bundle Size and performance stats - 💯 **Perfect Lighthouse score** - Because performance matters - **[Bundle analyzer plugin](https://www.npmjs.com/package/@next/bundle-analyzer)** - Keep an eye on your bundle size - **[Jest](https://jestjs.io/)** and **[React Testing Library](https://testing-library.com/react)** - For rock-solid unit and integration tests - **[Playwright](https://playwright.dev/)** - Write end-to-end tests like a pro - **[Storybook](https://storybook.js.org/)** - Create, test, and showcase your components - **Smoke Testing** and **Acceptance Tests** - For confidence in your deployments - **[Conventional commits git hook](https://www.conventionalcommits.org/)** - Keep your commit history neat and tidy - **[Observability](https://opentelemetry.io/)** - Open Telemetry integration for seamless monitoring - **[Absolute imports](https://nextjs.org/docs/advanced-features/module-path-aliases)** - No more spaghetti imports - **[Health checks](https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/)** - Kubernetes-compatible for robust deployments - **[Radix UI](https://www.radix-ui.com/)** - Headless UI components for endless customization - **[CVA](http://cva.style/)** - Create a consistent, reusable, and atomic design system - **[Renovate BOT](https://www.whitesourcesoftware.com/free-developer-tools/renovate)** - Auto-updating dependencies, so you can focus on coding - **[Patch-package](https://www.npmjs.com/package/patch-package)** - Fix external dependencies without losing your mind - **Components coupling and cohesion graph** - A tool for managing component relationships - **[Automated ChatGPT Code Reviews](https://openai.com/chatgpt)** - **Stay on the cutting edge with AI-powered code reviews!** - **[Semantic Release](https://github.com/semantic-release/semantic-release)** - for automatic changelog - **[T3 Env](https://env.t3.gg/)** - Manage your environment variables with ease ## Table of Contents - [Next.js Enterprise Boilerplate](#nextjs-enterprise-boilerplate) - [Features](#features) - [Table of Contents](#table-of-contents) - [Getting Started](#-getting-started) - [Deployment](#-deployment) - [Scripts Overview](#-scripts-overview) - [Coupling Graph](#-coupling-graph) - [Testing](#-testing) - [Running Tests](#running-tests) - [Acceptance Tests](#acceptance-tests) - [Smoke Testing](#smoke-testing) - [Styling and Design System](#-styling-and-design-system) - [CVA - A New Approach to Variants](#cva---a-new-approach-to-variants) - [State Management](#-state-management) - [Zustand](#zustand) - [Jotai](#jotai) - [Recoil](#recoil) - [ChatGPT Code Review](#-chatgpt-code-review) - [Environment Variables handling](#-environment-variables-handling) - [Contribution](#-contribution) - [Support](#support) - [License](#-license) - [Contributors](#contributors) ## 🎯 Getting Started To get started with this boilerplate, follow these steps: 1. Fork & clone repository: ```bash ## Don't forget to ⭐ star and fork it first :) git clone https://github.com/<your_username)/next-enterprise.git ``` 2. Install the dependencies: ```bash yarn install --frozen-lockfile ``` 3. Run the development server: ```bash yarn dev ``` 4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 5. This project uses a git hook to enforce [conventional commits](https://github.com/qoomon/git-conventional-commits). To install the git hook, run the following command in the root directory of the project: ```sh brew install pre-commit pre-commit install -t commit-msg ``` ## 🚀 Deployment Easily deploy your Next.js app with [Vercel](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=github&utm_campaign=next-enterprise) by clicking the button below: [](https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise) ## 📃 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](https://github.com/pahen/madge) library. To generate the graph, simply run the following command: ```bash 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.  ## 🧪 Testing This boilerplate comes with various testing setups to ensure your application's reliability and robustness. ### Running Tests - **Unit and integration tests**: Run Jest tests using `yarn test` - **End-to-end tests (headless mode)**: Run Playwright tests in headless mode with `yarn e2e:headless` - **End-to-end tests (UI mode)**: Run Playwright tests with UI using `yarn e2e:ui` <img width="1392" alt="image" src="https://user-images.githubusercontent.com/28964599/233666655-93b7d08b-2fd8-406a-b43c-44d4d96cf387.png"> ### Acceptance Tests To write acceptance tests, we leverage Storybook's [`play` function](https://storyboo