198 lines
6.1 KiB
Markdown
198 lines
6.1 KiB
Markdown
# 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+ |