diff --git a/README.md b/README.md index 026deba..b027a40 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,198 @@ -# nextjs-vertical-microfrontends -nextjs vertical microfrontends with multi zones +# NextJS Vertical Microfrontends + +A demonstration project showcasing vertical microfrontends architecture using NextJS Multi-Zones. + +## Overview + +This project demonstrates how to implement **vertical microfrontends** using NextJS's powerful Multi-Zones feature. Vertical microfrontends enable teams to build and deploy different parts of an application independently, where each microfrontend represents a complete vertical slice of business functionality. + +### What are Vertical Microfrontends? + +Unlike horizontal microfrontends that split the UI into shared components (header, footer, sidebar), vertical microfrontends divide the application by business domains or features. Each microfrontend owns: + +- **Complete user journeys** (from UI to backend integration) +- **Business logic and data management** +- **Independent deployment pipeline** +- **Team ownership and responsibility** + +Examples of vertical slices: +- User authentication and profile management +- Product catalog and search +- Shopping cart and checkout +- Order management and tracking + +## Tech Stack + +- **[NextJS](https://nextjs.org/)** - React framework with built-in Multi-Zones support +- **[NextJS Multi-Zones](https://nextjs.org/docs/advanced-features/multi-zones)** - Deploy multiple NextJS apps under a single domain +- **React** - UI library for building user interfaces +- **TypeScript** - Type-safe JavaScript development +- **Node.js** - Runtime environment + +## Architecture + +### Multi-Zone Architecture + +``` +┌─────────────────────┐ +│ Reverse Proxy │ ← Routes traffic to appropriate zones +│ (nginx/CDN) │ +└─────────┬───────────┘ + │ + ┌─────┼─────┐ + │ │ │ + ▼ ▼ ▼ +┌─────┐ ┌───┐ ┌─────┐ +│Zone │ │...│ │Zone │ +│ A │ │ │ │ N │ +└─────┘ └───┘ └─────┘ +``` + +### Zone Structure + +Each zone is a complete NextJS application that handles: + +- **Routing**: Owns specific URL paths (e.g., `/auth/*`, `/products/*`) +- **State Management**: Independent application state +- **API Integration**: Direct communication with backend services +- **Deployment**: Separate build and deployment pipeline + +### Communication Patterns + +- **URL-based navigation** between zones +- **Shared state** through URL parameters or localStorage +- **Event-driven communication** for cross-zone interactions +- **Shared design system** for consistent UI/UX + +## Project Structure + +``` +nextjs-vertical-microfrontends/ +├── packages/ +│ ├── shell/ # Main application shell (Zone orchestrator) +│ ├── auth-zone/ # Authentication microfrontend +│ ├── products-zone/ # Product catalog microfrontend +│ ├── cart-zone/ # Shopping cart microfrontend +│ └── shared/ +│ ├── components/ # Shared UI components +│ ├── types/ # Shared TypeScript types +│ └── utils/ # Shared utilities +├── infrastructure/ +│ ├── nginx/ # Reverse proxy configuration +│ └── docker/ # Container definitions +└── docs/ # Additional documentation +``` + +## Local Development + +### Prerequisites + +- Node.js 18+ and npm/yarn +- Docker (optional, for reverse proxy setup) + +### Setup Instructions + +1. **Clone the repository** + ```bash + git clone https://github.com/bitgrip/nextjs-vertical-microfrontends.git + cd nextjs-vertical-microfrontends + ``` + +2. **Install dependencies** + ```bash + npm install + # or + yarn install + ``` + +3. **Start development servers** + ```bash + # Start all zones concurrently + npm run dev + + # Or start individual zones + npm run dev:shell # Main shell (port 3000) + npm run dev:auth # Auth zone (port 3001) + npm run dev:products # Products zone (port 3002) + npm run dev:cart # Cart zone (port 3003) + ``` + +4. **Configure local reverse proxy** (optional) + ```bash + # Using Docker + docker-compose up -d nginx + + # Access application at http://localhost + ``` + +### Development Workflow + +- Each zone can be developed independently +- Hot reloading works within each zone +- Cross-zone navigation works in development mode +- Shared components are automatically linked + +## Deployment + +### Production Build + +```bash +# Build all zones +npm run build + +# Build specific zone +npm run build:auth +``` + +### Deployment Strategy + +1. **Independent Deployments**: Each zone can be deployed separately +2. **Blue-Green Deployments**: Zero-downtime deployments per zone +3. **Progressive Rollouts**: Gradual traffic shifting between zone versions +4. **Rollback Capability**: Quick rollback to previous zone versions + +## Benefits + +- ✅ **Team Autonomy**: Independent development and deployment +- ✅ **Technology Flexibility**: Different zones can use different versions/tools +- ✅ **Scalability**: Scale zones independently based on traffic +- ✅ **Fault Isolation**: Issues in one zone don't affect others +- ✅ **Faster Development**: Parallel development by multiple teams + +## Challenges & Considerations + +- 🔄 **Consistency**: Maintaining UI/UX consistency across zones +- 🔗 **Communication**: Complex inter-zone communication patterns +- 📊 **Monitoring**: Distributed logging and error tracking +- 🔐 **Authentication**: Shared authentication state management +- 📦 **Bundle Size**: Potential code duplication across zones + +## Contributing + +1. Fork the repository +2. Create a feature branch (`git checkout -b feature/amazing-feature`) +3. Commit your changes (`git commit -m 'Add amazing feature'`) +4. Push to the branch (`git push origin feature/amazing-feature`) +5. Open a Pull Request + +## Roadmap + +- [ ] Implement basic shell application +- [ ] Create authentication zone +- [ ] Develop product catalog zone +- [ ] Build shopping cart zone +- [ ] Add shared component library +- [ ] Implement cross-zone state management +- [ ] Add comprehensive testing suite +- [ ] Create deployment automation +- [ ] Add monitoring and observability + +## License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. + +## Resources + +- [NextJS Multi-Zones Documentation](https://nextjs.org/docs/advanced-features/multi-zones) +- [Microfrontends.org](https://microfrontends.org/) +- [BITGRIP GmbH](https://bitgrip.ch/)