klz-cables.com/PROJECT_STRUCTURE.md

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

# .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

# 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+