# KLZ Cables - Next.js Migration Project Structure

## Overview
This document outlines the complete project structure for the WordPress → Next.js static migration.

## Project Structure

```
klz-2026/
├── app/                          # Next.js App Router
│   ├── layout.tsx               # Root layout
│   ├── page.tsx                 # Home page
│   ├── globals.scss             # Global styles
│   ├── blog/
│   │   ├── page.tsx             # Blog index
│   │   └── [slug]/
│   │       └── page.tsx         # Blog post detail
│   ├── products/
│   │   ├── page.tsx             # Products index
│   │   └── [slug]/
│   │       └── page.tsx         # Product detail
│   ├── product-category/
│   │   └── [slug]/
│   │       └── page.tsx         # Category page
│   ├── contact/
│   │   └── page.tsx             # Contact page
│   ├── de/                      # German pages
│   │   ├── page.tsx
│   │   ├── blog/
│   │   │   └── page.tsx
│   │   ├── products/
│   │   │   └── page.tsx
│   │   └── contact/
│   │       └── page.tsx
│   └── api/
│       ├── contact/
│       │   └── route.ts         # Contact form API
│       └── analytics/
│           └── route.ts         # Analytics API
├── components/
│   ├── LocaleSwitcher.tsx      # Language switcher
│   ├── ContactForm.tsx         # Contact form component
│   ├── CookieConsent.tsx       # GDPR consent banner
│   ├── SEO.tsx                 # SEO component
│   └── Layout.tsx              # Common layout
├── lib/
│   ├── data.ts                 # Data access utilities
│   ├── i18n.ts                 # Internationalization
│   ├── html-compat.ts          # WPBakery compatibility
│   └── analytics.ts            # Analytics utilities
├── data/
│   ├── raw/                    # WordPress export (timestamped)
│   │   └── 2025-12-27T21-26-12-521Z/
│   │       ├── pages.en.json
│   │       ├── pages.de.json
│   │       ├── posts.en.json
│   │       ├── posts.de.json
│   │       ├── products.en.json
│   │       ├── products.de.json
│   │       ├── product-categories.en.json
│   │       ├── product-categories.de.json
│   │       ├── menus.en.json
│   │       ├── menus.de.json
│   │       ├── redirects.json
│   │       ├── media.json
│   │       ├── site-info.json
│   │       ├── translation-mapping.json
│   │       └── translation-mapping-improved.json
│   └── processed/              # Next.js ready data
│       ├── wordpress-data.json # Complete dataset
│       ├── pages.json
│       ├── posts.json
│       ├── products.json
│       ├── categories.json
│       ├── media.json
│       └── asset-map.json
├── public/
│   ├── media/                  # Downloaded WordPress media
│   ├── favicon.ico
│   └── robots.txt
├── scripts/
│   ├── wordpress-export.js     # WordPress data exporter
│   ├── process-data.js         # Data processor
│   ├── analyze-export.js       # Export analyzer
│   └── improve-translation-mapping.js # Translation mapper
├── styles/
│   └── _reset.scss             # CSS reset
├── .env                        # Environment variables
├── .env.example                # Example env file
├── next.config.ts              # Next.js config
├── tsconfig.json               # TypeScript config
├── package.json                # Dependencies
└── README.md                   # Project documentation
```

## Key Features Implemented

### 1. Data Export & Processing
- ✅ WordPress REST API integration
- ✅ WooCommerce product export
- ✅ Multi-language content (DE/EN)
- ✅ Media file downloading
- ✅ Translation mapping
- ✅ Redirect generation

### 2. Next.js Architecture
- ✅ App Router setup
- ✅ Static generation (SSG)
- ✅ i18n routing with `/de/` prefix
- ✅ TypeScript configuration
- ✅ SCSS styling

### 3. Content Types
- ✅ Pages (9 EN + 9 DE)
- ✅ Posts (29 EN + 30 DE)
- ✅ Products (25 EN + 25 DE)
- ✅ Categories (7 EN + 7 DE)
- ✅ Media (50 files)

### 4. SEO & i18n
- ✅ hreflang tags
- ✅ Canonical URLs
- ✅ Locale-aware metadata
- ✅ Translation references

### 5. WPBakery Compatibility
- ✅ Shortcode removal
- ✅ Class normalization
- ✅ HTML sanitization
- ✅ Grid compatibility

## Next Steps

### Immediate Implementation
1. **Complete Core Components**
   - ContactForm with Resend integration
   - CookieConsent with GDPR compliance
   - SEO component with hreflang

2. **Create Dynamic Routes**
   - Blog post pages: `/blog/[slug]` and `/de/blog/[slug]`
   - Product pages: `/product/[slug]` and `/de/product/[slug]`
   - Category pages: `/product-category/[slug]`

3. **API Routes**
   - Contact form submission
   - Analytics tracking (consent-based)

4. **Static Generation**
   - Generate all pages at build time
   - Create sitemap.xml
   - Generate robots.txt

### Environment Variables
```bash
# .env
SITE_URL=https://klz-cables.com
RESEND_API_KEY=your_resend_key
TURNSTILE_SITE_KEY=your_turnstile_key
TURNSTILE_SECRET_KEY=your_turnstile_secret
VERCEL_ANALYTICS_ID=your_analytics_id
```

### Build & Deploy
```bash
# Install dependencies
npm install --legacy-peer-deps

# Run data export
npm run data:export

# Process data
npm run data:process

# Build Next.js
npm run build

# Export static site
npm run export
```

## Data Flow

1. **Export**: WordPress → Raw JSON
2. **Process**: Raw JSON → Next.js data models
3. **Generate**: Data → Static pages
4. **Deploy**: Static pages → Vercel/Hosting

## File Sizes
- Raw data: ~3.5 MB
- Processed data: ~2.8 MB
- Media files: ~50 MB
- Final static site: ~10-15 MB

## Performance Targets
- Build time: < 2 minutes
- Page load: < 100ms (static)
- Lighthouse score: 95+