{"id":13459808,"url":"https://github.com/Blazity/next-enterprise","last_synced_at":"2025-03-24T18:31:17.386Z","repository":{"id":158139469,"uuid":"630874227","full_name":"Blazity/next-enterprise","owner":"Blazity","description":"💼 An enterprise-grade Next.js boilerplate for high-performance, maintainable apps. Packed with features like Tailwind CSS, TypeScript, ESLint, Prettier, testing tools, and more to accelerate your development.","archived":false,"fork":false,"pushed_at":"2025-02-21T15:17:34.000Z","size":4156,"stargazers_count":6637,"open_issues_count":9,"forks_count":1877,"subscribers_count":29,"default_branch":"main","last_synced_at":"2025-03-18T19:27:23.211Z","etag":null,"topics":["boilerplate","chatgpt","cva","eslint","jamstack","javascript-ai","next","next-js","next-theme","nextjs","nextjs13","radix-ui","react","react-enterprise-boilerplate","seo","starter-kit","starter-template","tailwindcss","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://next-enterprise.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blazity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-21T10:57:41.000Z","updated_at":"2025-03-18T16:49:07.000Z","dependencies_parsed_at":"2024-05-30T16:54:55.283Z","dependency_job_id":"8240b5f1-77c7-4648-9c3c-b412d399d538","html_url":"https://github.com/Blazity/next-enterprise","commit_stats":{"total_commits":259,"total_committers":13,"mean_commits":"19.923076923076923","dds":"0.33976833976833976","last_synced_commit":"3fb493f4002fe76b66c76a0b85d778f80e12eb13"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnext-enterprise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnext-enterprise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnext-enterprise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fnext-enterprise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blazity","download_url":"https://codeload.github.com/Blazity/next-enterprise/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245328173,"owners_count":20597378,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","chatgpt","cva","eslint","jamstack","javascript-ai","next","next-js","next-theme","nextjs","nextjs13","radix-ui","react","react-enterprise-boilerplate","seo","starter-kit","starter-template","tailwindcss","typescript","vercel"],"created_at":"2024-07-31T10:00:29.511Z","updated_at":"2025-03-24T18:31:17.374Z","avatar_url":"https://github.com/Blazity.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Free Boilerplates","Boilerplates","前端开发框架及项目","Developer Tools","chatgpt","SDK, Libraries, Frameworks","🌐 Web Development - Frontend","Next.js boilerplate","SaaS","**Awesome Codebases** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["其他_文本生成、文本对话","JavaScript/Typescript library, sdk or frameworks"],"readme":"\n### Next.js Enterprise Boilerplate \n\n\u003c/br\u003e\n\n  [![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]\n\nWelcome 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! 🌍\n\n\u003e [!NOTE]\n\u003e **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\n\n### Integrated features\n\nWith this template you will get all the awesomeness you need:\n\n- 🏎️ **[Next.js 15](https://nextjs.org/)** - Fast by default, with config optimized for performance (with **App Directory**)\n- 💅 **[Tailwind CSS](https://tailwindcss.com/)** - A utility-first CSS framework for rapid UI development\n- ✨ **[ESlint](https://eslint.org/)** and **[Prettier](https://prettier.io/)** - For clean, consistent, and error-free code\n- 🛠️ **[Extremely strict TypeScript](https://www.typescriptlang.org/)** - With [`ts-reset`](https://github.com/total-typescript/ts-reset) library for ultimate type safety\n- 🚀 **[GitHub Actions](https://github.com/features/actions)** - Pre-configured actions for smooth workflows, including Bundle Size and performance stats\n- 💯 **Perfect Lighthouse score** - Because performance matters\n- **[Bundle analyzer plugin](https://www.npmjs.com/package/@next/bundle-analyzer)** - Keep an eye on your bundle size\n- **[Jest](https://jestjs.io/)** and **[React Testing Library](https://testing-library.com/react)** - For rock-solid unit and integration tests\n- **[Playwright](https://playwright.dev/)** - Write end-to-end tests like a pro\n- **[Storybook](https://storybook.js.org/)** - Create, test, and showcase your components\n- **Smoke Testing** and **Acceptance Tests** - For confidence in your deployments\n- **[Conventional commits git hook](https://www.conventionalcommits.org/)** - Keep your commit history neat and tidy\n- **[Observability](https://opentelemetry.io/)** - Open Telemetry integration for seamless monitoring\n- **[Absolute imports](https://nextjs.org/docs/advanced-features/module-path-aliases)** - No more spaghetti imports\n- **[Health checks](https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/)** - Kubernetes-compatible for robust deployments\n- **[Radix UI](https://www.radix-ui.com/)** - Headless UI components for endless customization\n- **[CVA](http://cva.style/)** - Create a consistent, reusable, and atomic design system\n- **[Renovate BOT](https://www.whitesourcesoftware.com/free-developer-tools/renovate)** - Auto-updating dependencies, so you can focus on coding\n- **[Patch-package](https://www.npmjs.com/package/patch-package)** - Fix external dependencies without losing your mind\n- **Components coupling and cohesion graph** - A tool for managing component relationships\n- **[Semantic Release](https://github.com/semantic-release/semantic-release)** - for automatic changelog\n- **[T3 Env](https://env.t3.gg/)** - Manage your environment variables with ease\n\n### More features\n\n**nefi** (next-enterprise feature integrations) is an AI agent that will help configuring the boilerplate to your needs using natural language. It can remove/install dependencies, modify files, manage git and integrate various solutions into your project. \n\nSimply set up the boilerplate, follow guide [in the getting started section](#getting-started) and type `npx nefi` in your terminal!\n\nHere's an example video of [nefi](https://nefi.ai/) integrating [Clerk](https://clerk.com/) auth solutions with one command, no API keys and no manual configuration needed!\n\n\nhttps://github.com/user-attachments/assets/5c13a110-7389-4859-909f-60a7f623e47d\n\n\nLeave a ⭐ for [nefi on GitHub](https://github.com/blazity/nefi) and check out the [nefi.ai docs](https://nefi.ai/)!\n\n## Table of Contents\n\n- [Next.js Enterprise Boilerplate](#nextjs-enterprise-boilerplate)\n  - [Features](#features)\n  - [Table of Contents](#table-of-contents)\n  - [Getting Started](#-getting-started)\n  - [Deployment](#-deployment)\n  - [Scripts Overview](#-scripts-overview)\n  - [Coupling Graph](#-coupling-graph)\n  - [Testing](#-testing)\n    - [Running Tests](#running-tests)\n    - [Acceptance Tests](#acceptance-tests)\n    - [Smoke Testing](#smoke-testing)\n  - [Styling and Design System](#-styling-and-design-system)\n    - [CVA - A New Approach to Variants](#cva---a-new-approach-to-variants)\n  - [State Management](#-state-management)\n    - [Zustand](#zustand)\n    - [Jotai](#jotai)\n    - [Recoil](#recoil)\n  - [Environment Variables handling](#-environment-variables-handling)\n  - [Contribution](#-contribution)\n  - [Support](#support)\n  - [License](#-license)\n  - [Contributors](#contributors)\n\n## 🎯 Getting Started\n\nTo get started with this boilerplate, follow these steps:\n\n1. Fork \u0026 clone repository:\n\n```bash\n## Don't forget to ⭐ star and fork it first :)\ngit clone https://github.com/\u003cyour_username\u003e/next-enterprise.git\n```\n\n2. Install the dependencies:\n\n```bash\npnpm install --frozen-lockfile\n```\n\n3. Run the development server:\n\n```bash\npnpm run dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n5. 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:\n\n```sh\nbrew install pre-commit\npre-commit install -t commit-msg\n```\n\n## 🚀 Deployment\n\nEasily deploy your Next.js app with [Vercel](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=github\u0026utm_campaign=next-enterprise) by clicking the button below:\n\n[![Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise)\n\n## 📃 Scripts Overview\n\nThe following scripts are available in the `package.json`:\n\n- `dev`: Starts the development server with colorized output\n- `build`: Builds the app for production\n- `start`: Starts the production server\n- `lint`: Lints the code using ESLint\n- `lint:fix`: Automatically fixes linting errors\n- `prettier`: Checks the code for proper formatting\n- `prettier:fix`: Automatically fixes formatting issues\n- `analyze`: Analyzes the bundle sizes for Client, Server and Edge environments\n- `storybook`: Starts the Storybook server\n- `build-storybook`: Builds the Storybook for deployment\n- `test`: Runs unit and integration tests\n- `e2e:headless`: Runs end-to-end tests in headless mode\n- `e2e:ui`: Runs end-to-end tests with UI\n- `format`: Formats the code with Prettier\n- `postinstall`: Applies patches to external dependencies\n- `coupling-graph`: **Generates a coupling and cohesion graph for the components**\n\n## 🔗 Coupling Graph\n\nThe `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:\n\n```bash\npnpm run coupling-graph\n```\n\nThis 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.\n\n![graph](https://user-images.githubusercontent.com/28964599/233662744-3ba89713-8466-49cd-9be7-e6fb38191f58.png)\n\n## 🧪 Testing\n\nThis boilerplate comes with various testing setups to ensure your application's reliability and robustness.\n\n### Running Tests\n\n- **Unit and integration tests**: Run Jest tests using `pnpm run test`\n- **End-to-end tests (headless mode)**: Run Playwright tests in headless mode with `pnpm run e2e:headless`\n- **End-to-end tests (UI mode)**: Run Playwright tests with UI using `pnpm run e2e:ui`\n\n\u003cimg width=\"1392\" alt=\"image\" src=\"https://user-images.githubusercontent.com/28964599/233666655-93b7d08b-2fd8-406a-b43c-44d4d96cf387.png\"\u003e\n\n### Acceptance Tests\n\nTo write acceptance tests, we leverage Storybook's [`play` function](https://storybook.js.org/docs/react/writing-stories/play-function#writing-stories-with-the-play-function). This allows you to interact with your components and test various user flows within Storybook.\n\n```ts\n/*\n * See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas\n * to learn more about using the canvasElement to query the DOM\n */\nexport const FilledForm: Story = {\n  play: async ({ canvasElement }) =\u003e {\n    const canvas = within(canvasElement)\n\n    const emailInput = canvas.getByLabelText(\"email\", {\n      selector: \"input\",\n    })\n\n    await userEvent.type(emailInput, \"example-email@email.com\", {\n      delay: 100,\n    })\n\n    const passwordInput = canvas.getByLabelText(\"password\", {\n      selector: \"input\",\n    })\n\n    await userEvent.type(passwordInput, \"ExamplePassword\", {\n      delay: 100,\n    })\n    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel\n    const submitButton = canvas.getByRole(\"button\")\n\n    await userEvent.click(submitButton)\n  },\n}\n```\n\n### Smoke Testing\n\nIn this boilerplate, we use Storybook's out-of-the-box support for smoke testing to verify that components render correctly without any errors. Just run `pnpm run test-storybook` to perform smoke testing. Remember to write stories in JSX or TSX format only. Smoke testing and a lot of other functionalities dont work well with MDX stories.\n\n## 🎨 Styling and Design System\n\nThis boilerplate uses Tailwind CSS for styling and CVA for creating a powerful, easy-to-use design system. If you want to learn more about the setup, check out this fantastic video by Vercel:\n\n[![Styling and Design System](https://img.youtube.com/vi/T-Zv73yZ_QI/0.jpg)](https://www.youtube.com/watch?v=T-Zv73yZ_QI\u0026ab_channel=Vercel)\n\n### CVA - A New Approach to Variants\n\nWhile CSS-in-TS libraries such as [Stitches](https://stitches.dev/) and [Vanilla Extract](https://vanilla-extract.style/) are great for building type-safe UI components, they might not be the perfect fit for everyone. You may prefer more control over your stylesheets, need to use a framework like Tailwind CSS, or simply enjoy writing your own CSS.\n\nCreating variants using traditional CSS can be a tedious task, requiring you to manually match classes to props and add types. CVA is here to take that pain away, allowing you to focus on the enjoyable aspects of UI development. By providing an easy and type-safe way to create variants, CVA simplifies the process and helps you create powerful design systems without compromising on the flexibility and control of CSS.\n\n## 💾 State Management\n\nWhile this boilerplate doesn't include a specific state management library, we believe it's essential for you to choose the one that best suits your project's needs. Here are some libraries we recommend for state management:\n\n### Zustand\n\n[Zustand](https://github.com/pmndrs/zustand) is a small, fast, and scalable state management library. It's designed to be simple and intuitive, making it a great choice for small to medium-sized projects. It's also optimized for bundle size, ensuring minimal impact on your app's performance.\n\n### Jotai\n\n[Jotai](https://github.com/pmndrs/jotai) is an atom-based state management library for React that focuses on providing a minimal and straightforward API. Its atom-based approach allows you to manage your state in a granular way while still being highly optimized for bundle size.\n\n### Recoil\n\n[Recoil](https://recoiljs.org/) is a state management library developed by Facebook, specifically designed for React applications. By utilizing atoms and selectors, Recoil allows you to efficiently manage state and derived state. Its key benefit is the ability to update components only when the state they're subscribed to changes, reducing unnecessary re-renders and keeping your application fast and efficient. Recoil also offers great developer experience with built-in debugging tools.\n\nChoose the library that best fits your requirements and project structure to ensure an efficient state management solution for your application.\n\n## 💻 Environment Variables handling\n\n[T3 Env](https://env.t3.gg/) is a library that provides environmental variables checking at build time, type validation and transforming. It ensures that your application is using the correct environment variables and their values are of the expected type. You’ll never again struggle with runtime errors caused by incorrect environment variable usage.\n\nConfig file is located at `env.mjs`. Simply set your client and server variables and import `env` from any file in your project.\n\n```ts\nexport const env = createEnv({\n  server: {\n    // Server variables\n    SECRET_KEY: z.string(),\n  },\n  client: {\n    // Client variables\n    API_URL: z.string().url(),\n  },\n  runtimeEnv: {\n    // Assign runtime variables\n    SECRET_KEY: process.env.SECRET_KEY,\n    API_URL: process.env.NEXT_PUBLIC_API_URL,\n  },\n})\n```\n\nIf the required environment variables are not set, you'll get an error message:\n\n```sh\n  ❌ Invalid environment variables: { SECRET_KEY: [ 'Required' ] }\n```\n\n## 🤝 Contribution\n\nContributions are always welcome! To contribute, please follow these steps:\n\n1. Fork the repository.\n2. Create a new branch with a descriptive name.\n3. Make your changes, and commit them using the [Conventional Commits](https://www.conventionalcommits.org/) format.\n4. Push your changes to the forked repository.\n5. Create a pull request, and we'll review your changes.\n\n## Support\n\nIf you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: [https://blazity.com/discord](https://blazity.com/discord). It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.\n\n\u003cbr /\u003e\n\u003ca href=\"https://discord.gg/fyWtyNKmfX\" style=\"width: 100%; display: flex; justify-content: center;\"\u003e\n  \u003cimg src=\"https://discordapp.com/api/guilds/1111676875782234175/widget.png?style=banner2\" alt=\"Blazity Discord Banner\"/\u003e\n\u003c/a\u003e\n\u003cbr /\u003e\n\n\n## 📜 License\n\nThis project is licensed under the MIT License. For more information, see the [LICENSE](./LICENSE) file.\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://bstefanski.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/28964599?v=4?s=100\" width=\"100px;\" alt=\"Bart Stefanski\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBart Stefanski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Blazity/next-enterprise/commits?author=bmstefanski\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/jjablonski-it\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/51968772?v=4?s=100\" width=\"100px;\" alt=\"Jakub Jabłoński\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJakub Jabłoński\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-jjablonski-it\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://neg4n.dev/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/57688858?v=4?s=100\" width=\"100px;\" alt=\"Igor Klepacki\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIgor Klepacki\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Blazity/next-enterprise/commits?author=neg4n\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n  \u003ctfoot\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" size=\"13px\" colspan=\"7\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/all-contributors/all-contributors-cli/1b8533af435da9854653492b1327a23a4dbd0a10/assets/logo-small.svg\"\u003e\n          \u003ca href=\"https://all-contributors.js.org/docs/en/bot/usage\"\u003eAdd your contributions\u003c/a\u003e\n        \u003c/img\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tfoot\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n\u003c!-- Badges and links --\u003e\n\n[check-workflow-badge]: https://img.shields.io/github/actions/workflow/status/blazity/next-enterprise/check.yml?label=check\n[github-license-badge]: https://img.shields.io/github/license/blazity/next-enterprise?link=https%3A%2F%2Fgithub.com%2FBlazity%2Fnext-enterprise%2Fblob%2Fmain%2FLICENSE\n[github-contributors-badge]: https://img.shields.io/github/contributors/blazity/next-enterprise?link=https%3A%2F%2Fgithub.com%2FBlazity%2Fnext-enterprise%2Fgraphs%2Fcontributors\n[discord-badge]: https://img.shields.io/discord/1111676875782234175?color=7b8dcd\u0026link=https%3A%2F%2Fblazity.com%2Fdiscord\n[made-by-blazity-badge]: https://img.shields.io/badge/made_by-Blazity-blue?color=FF782B\u0026link=https://blazity.com/\n\n[check-workflow-badge-link]: https://github.com/Blazity/next-enterprise/actions/workflows/check.yml\n[github-license-badge-link]: https://github.com/Blazity/next-enterprise/blob/main/LICENSE\n[github-contributors-badge-link]: https://github.com/Blazity/next-enterprise/graphs/contributors\n[discord-badge-link]: https://blazity.com/discord\n[made-by-blazity-badge-link]: https://blazity.com/?utm_source=nextenterprise\u0026utm_medium=github\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlazity%2Fnext-enterprise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBlazity%2Fnext-enterprise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBlazity%2Fnext-enterprise/lists"}