4.1.15 โ€ข Published 10 months ago

enterprise-nextjs-template v4.1.15

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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 feature
  • fix: Bug fix
  • docs: Documentation changes
  • style: Code style changes
  • refactor: Code refactoring
  • test: Adding or updating tests
  • chore: 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 configuration
  • jest.config.js - Jest configuration
  • .commitlintrc.js - Commitlint rules
  • tsconfig.json - TypeScript configuration
  • tailwind.config.js - Tailwind CSS configuration

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes using npm run commit
  4. Push to the branch (git push origin feature/amazing-feature)
  5. 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

4.1.8

10 months ago

4.1.9

10 months ago

4.1.10

10 months ago

4.1.11

10 months ago

4.1.12

10 months ago

4.1.13

10 months ago

4.1.14

10 months ago

4.1.15

10 months ago

4.1.7

10 months ago

4.1.6

10 months ago

4.1.5

10 months ago

4.1.4

10 months ago

4.1.3

10 months ago

4.1.2

10 months ago

4.1.1

10 months ago

4.1.0

10 months ago

4.0.0

10 months ago

3.0.0

10 months ago

2.0.0

10 months ago

1.0.0

10 months ago