Next.js Enterprise Boilerplate

The Next.js Enterprise Boilerplate is an open-source template designed for enterprise projects. It offers a range of features to help you build a high-performance and maintainable web application. Here’s an overview of its features and how to get started:

Features:

• Next.js: A fast and optimized framework for server-rendered React applications.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• ESLint and Prettier: For code linting and formatting.
• TypeScript: With the ts-reset library for type safety.
• GitHub Actions: Pre-configured actions for smooth workflows.
• Lighthouse Score: Aiming for a perfect Lighthouse score.
• Bundle Analyzer Plugin: To keep an eye on your bundle size.
• Testing: Jest, React Testing Library, and Playwright for unit and end-to-end testing.
• Storybook: For creating, testing, and showcasing components.
• Smoke Testing: To verify components render correctly.
• Conventional Commits Git Hook: Enforces clean commit history.
• Observability: Open Telemetry integration for monitoring.
• Absolute Imports: Improved import organization.
• Health Checks: Kubernetes-compatible for robust deployments.
• Radix UI: Headless UI components for customization.
• CVA: Create a consistent and reusable design system.
• Renovate BOT: Auto-updating dependencies.
• Patch-package: Fix external dependencies without losing your mind.
• Components Coupling and Cohesion Graph: A tool for managing component relationships.
• Automated ChatGPT Code Reviews: AI-powered code reviews.
• Semantic Release: For automatic changelog generation.
• T3 Env: Manage environment variables with ease.

Getting Started: To start using this boilerplate, follow these steps:

1. Fork and clone the repository.
2. Install dependencies with yarn install --frozen-lockfile.
3. Run the development server with yarn dev.
4. Open http://localhost:3000 in your browser to see the result.

Additionally, this project uses a git hook to enforce conventional commits. To install the git hook, run these commands:

Deployment: You can easily deploy your Next.js app with Vercel by clicking the provided button in the documentation.

Scripts Overview: There are various scripts available in the package.json for tasks like development, building, linting, testing, and more.

Coupling Graph: The coupling-graph script generates a coupling and cohesion graph for the components in your project. It helps visualize the connections between internal modules.

Testing:

• 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.
• Smoke Testing: Use Storybook’s out-of-the-box support for smoke testing.

Styling and Design System: Tailwind CSS is used for styling, and CVA is employed for creating a powerful design system.

State Management: While the boilerplate doesn’t include a specific state management library, it provides recommendations for libraries like Zustand, Jotai, and Recoil.

ChatGPT Code Review: The boilerplate integrates ChatGPT Code Review for AI-powered code reviews. You can set up this feature with an OpenAI API key.

Environment Variables Handling: T3 Env is used for environmental variables checking at build time, type validation, and transforming. It ensures correct usage of environment variables and their values.

Contribution: Contributions are welcome! Follow the contribution guidelines in the documentation.

Support: Join the Discord community for help and discussions: Discord Community.

License: The project is licensed under the MIT License.

For more details, visit the GitHub repository.