# Migration to Next.js with Launch UI Template

## Why

The current Angular 20 application requires a complete UI overhaul and framework migration to leverage modern landing page components optimized for conversion. Launch UI provides production-ready, conversion-optimized components built specifically for SaaS products and developer tools, which aligns perfectly with the portfolio hosting platform's needs. Additionally, migrating to Next.js enables server-side rendering, improved SEO, and better performance for the public-facing landing pages.

The current stack (Angular + custom Tailwind components) requires significant manual UI development effort, while Launch UI offers battle-tested components (Hero, CTA, FAQ, Stats, Social Proof, Testimonials) that can be integrated immediately.

## What Changes

**BREAKING CHANGES:**
- **BREAKING**: Complete framework migration from Angular 20 to Next.js 15
- **BREAKING**: Replacement of all existing Angular components with Next.js + Launch UI equivalents
- **BREAKING**: Migration from Angular Router to Next.js App Router
- **BREAKING**: Conversion of Angular services to Next.js API routes and React hooks
- **BREAKING**: Replacement of RxJS-based state management with React state patterns (Context API, hooks)

**Non-Breaking Enhancements:**
- Integration of Launch UI component library (shadcn/ui + Tailwind CSS 4.0)
- Adoption of TypeScript 5.0 (from TypeScript 5.8)
- Implementation of Launch UI components: Navbar, Hero, Items, Logos, FAQ, Stats, CTA, Footer
- Server-side rendering for public pages (Landing, Login, Register)
- Enhanced UI/UX with pre-built, conversion-optimized components
- Improved SEO capabilities through Next.js metadata API
- Maintained API compatibility with existing backend (no backend changes required)

## Impact

### Affected Specs
- **frontend** - Complete rewrite from Angular to Next.js architecture
- **ui-components** - New capability for Launch UI component integration
- **authentication** - Migration from Angular services to Next.js API routes + React hooks
- **routing** - Conversion from Angular Router to Next.js App Router
- **state-management** - Transition from RxJS to React patterns

### Affected Code
- **Complete Rewrite Required:**
  - `/src/app/` - All Angular components → Next.js pages/components
  - `/src/main.ts` - Angular bootstrap → Next.js app entry
  - `/src/app/app.routes.ts` - Angular routes → Next.js app directory structure
  - `/src/app/services/` - Angular services → Next.js API routes + React hooks
  - `/src/app/auth-interceptor.ts` - Angular interceptor → Next.js middleware

- **New Files:**
  - `/app/` - Next.js App Router pages
  - `/components/` - Launch UI components + custom components
  - `/lib/` - Utility functions and API client
  - `/middleware.ts` - Authentication middleware
  - `next.config.js` - Next.js configuration

- **Modified Files:**
  - `package.json` - Complete dependency replacement
  - `tsconfig.json` - Next.js TypeScript configuration
  - `tailwind.config.ts` - Tailwind CSS 4.0 configuration
  - `.env.local` - Environment variables for Next.js

- **Removed Files:**
  - `angular.json` - No longer needed
  - All `/src/` Angular-specific files
  - `karma.conf.js` - Replaced with Jest/Vitest

### Migration Risks
- **High Complexity**: Complete framework replacement requiring full regression testing
- **Learning Curve**: Team must learn Next.js patterns, React hooks, and Launch UI conventions
- **Data Migration**: Ensure seamless transition without losing user sessions or data
- **API Compatibility**: Must maintain backward compatibility with existing backend API
- **Performance**: Validate that SSR improves performance without introducing latency

### User Impact
- **Zero Downtime Target**: Deploy as parallel version, then cutover
- **Session Preservation**: Users may need to re-authenticate during migration
- **Improved UX**: Better UI/UX with professional Launch UI components
- **Faster Load Times**: SSR should improve initial page load performance