enterprise-nextjs-template v4.1.15
enterprise-nextjs-template
An opinionated Next.js 14 project generator that enforces best practices, testing, and modern development workflows. This template sets up a scalable, enterprise-ready Next.js application with built-in testing, TypeScript, Tailwind CSS, shadcn/ui, and comprehensive tooling.
Features
๐ Project Structure
- App Router-based Next.js 14 setup
- Organized directory structure for scalability
- Separation of concerns with dedicated directories
- Type-safe components and utilities
๐จ Styling and UI
- Tailwind CSS for utility-first styling
- shadcn/ui components pre-configured
- Dark mode support out of the box
- Toast notifications setup
๐งช Testing
- Jest + React Testing Library configuration
- Unit test templates
- Integration test setup
- E2E testing ready
- 80% code coverage requirement
- Automatic test file generation
๐ Code Quality
- TypeScript for type safety
- ESLint with custom rule set
- Prettier for consistent formatting
- Husky for Git hooks
- Commitlint for conventional commits
- Commitizen for interactive commits
- lint-staged for efficient checks
๐ Development Tools
- VS Code configuration
- Format on save
- Type checking
- Accessibility checks
- Hot reload
- Debug configuration
Installation
npm install -g enterprise-nextjs-template
# or
yarn global add enterprise-nextjs-template
Usage
Creating a New Project
# Using npx (recommended)
npx enterprise-nextjs-template new my-app
# Or if installed globally
enterprise-nextjs-template new my-app
Generating Components
npx enterprise-nextjs-template generate component Button
# Creates:
# - src/components/common/Button/Button.tsx
# - src/components/common/Button/Button.test.tsx
Generating Pages
npx enterprise-nextjs-template generate page dashboard
# Creates:
# - src/app/dashboard/page.tsx
# - src/app/dashboard/page.test.tsx
Project Structure
src/
โโโ app/ # Next.js app directory
โโโ components/ # React components
โ โโโ ui/ # shadcn/ui components
โ โโโ common/ # Shared components
โ โโโ forms/ # Form-related components
โ โโโ layouts/ # Layout components
โโโ lib/ # Utility functions and hooks
โ โโโ hooks/ # Custom React hooks
โ โโโ utils/ # Helper functions
โ โโโ api/ # API-related functions
โ โโโ constants/ # Constants and configuration
โ โโโ types/ # TypeScript types/interfaces
โ โโโ validation/ # Schema validation
โโโ styles/ # Global styles
โโโ tests/ # Test files
โโโ unit/ # Unit tests
โโโ integration/ # Integration tests
โโโ e2e/ # End-to-end tests
Scripts
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run test # Run tests
npm run lint # Check linting
npm run lint:fix # Fix linting issues
npm run format # Format code with Prettier
npm run type-check # Run TypeScript checks
npm run commit # Create a conventional commit
Git Hooks
Pre-commit
- Runs linting on staged files
- Formats code with Prettier
- Runs TypeScript checks
- Ensures tests pass
Commit Message
- Enforces conventional commit format
- Checks commit message length
- Validates commit type
Conventional Commits
This template enforces Conventional Commits specification with the following types:
feat
: New featurefix
: Bug fixdocs
: Documentation changesstyle
: Code style changesrefactor
: Code refactoringtest
: Adding or updating testschore
: Maintenance tasks
VS Code Integration
Recommended Extensions
- ESLint
- Prettier
- Tailwind CSS IntelliSense
- Jest
- GitLens
Workspace Settings
- Format on save enabled
- ESLint auto-fix on save
- Tailwind CSS IntelliSense
- Jest runner configuration
Testing
Unit Tests
npm run test # Run all tests
npm run test:watch # Run tests in watch mode
npm run test:coverage # Generate coverage report
Coverage Requirements
- Branches: 80%
- Functions: 80%
- Lines: 80%
- Statements: 80%
Configuration Files
.eslintrc.js
- ESLint configuration.prettierrc
- Prettier configurationjest.config.js
- Jest configuration.commitlintrc.js
- Commitlint rulestsconfig.json
- TypeScript configurationtailwind.config.js
- Tailwind CSS configuration
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes using
npm run commit
- Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- Next.js team for the incredible framework
- shadcn for the amazing UI components
- Testing Library team for the testing utilities
- All other open-source contributors
Support
For support, issues, or feature requests, please create an issue in the GitHub repository.
Additional Resources
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago