Migrate from Vite to Next.js 15 with SSR

- Replace Vite + React Router with Next.js 15 App Router
- Implement i18n with next-intl (URL-based: /de, /en, /sr)
- Add SSR/SSG for all pages (48 static pages generated)
- Setup Supabase SSR client for auth
- Migrate all pages: Home, About, Portfolio, Blog, Contact, Login, Dashboard, Imprint, Privacy, Terms
- Add Docker support with standalone output
- Replace i18next with next-intl JSON translations
- Use next/image for optimized images

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-17 01:00:33 +01:00
co-authored by Claude Opus 4.5
parent a66f51b9a2
commit b1ec7b4d61
281 changed files with 8024 additions and 8901 deletions
@@ -0,0 +1,138 @@
// src/i18n/locales/de/blog/posts/erp-integration-breuninger.ts
export const erpIntegrationBreuninger = {
posts: {
erp_integration: {
title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen von Damjan Savić',
date: '2024-02-09',
excerpt: 'Detaillierte Analyse von Damjan Savić zur E-Commerce-Integration zwischen Apparel Magic und Breuninger via TradeByte',
category: 'System Integration',
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
intro: {
title: 'Apparel Magic meets Breuninger: Eine technische Analyse der TradeByte-Integration von Damjan Savić',
description: 'Die Integration von E-Commerce-Systemen mit etablierten Marktplätzen stellt Unternehmen vor besondere Herausforderungen. In diesem Artikel teilt Damjan Savić seine Erfahrungen aus einem komplexen Integrationsprojekt zwischen Apparel Magic als ERP-System und der Breuninger-Plattform über TradeByte. Damjan Savić zeigt die technischen Herausforderungen und Lösungsansätze auf.'
},
background: {
title: 'Projekthintergrund',
systems: {
erp: 'Apparel Magic als ERP-System für Produktdaten und Bestandsmanagement',
middleware: 'TradeByte als Middleware für die Breuninger-Plattform'
},
challenges: {
sync: 'Bidirektionale Synchronisation von Bestellungen',
customers: 'Automatisierte Kundenanlage',
delivery: 'Verwaltung von Lieferscheinen',
inventory: 'Bestandsmanagement in Echtzeit'
}
},
tech: {
title: 'Technische Architektur',
components: {
title: 'Zentrale Komponenten'
},
database: {
title: 'Middleware-Datenbank',
description: 'Die MariaDB-Datenbank fungiert als zentraler Datenspeicher für die Integration:'
}
},
api: {
title: 'API-Integrationen',
apparel_magic: {
title: 'Apparel Magic API',
description: 'Die REST-API von Apparel Magic wird für Kundenanlage und Bestandsmanagement verwendet:'
},
tradebyte: {
title: 'TradeByte Integration',
description: 'Die TradeByte-API verwendet eine Kombination aus REST und XML:'
}
},
order_process: {
title: 'Bestellprozess',
steps: {
fetch: 'Regelmäßiger Abruf neuer Bestellungen von TradeByte',
customers: 'Automatische Kundenanlage in Apparel Magic',
process: 'Bestellverarbeitung und Statusaktualisierung',
delivery: 'Generierung und Speicherung von Lieferscheinen'
},
delivery_notes: {
title: 'Lieferschein-Management'
}
},
challenges: {
title: 'Herausforderungen und Lösungen',
status: {
title: '1. Status-Management',
description: 'Eine besondere Herausforderung war das Management von Bestellstatus:'
},
error_handling: {
title: '2. Fehlerbehandlung und Monitoring',
description: 'Robuste Fehlerbehandlung war essentiell für den Produktivbetrieb:'
}
},
best_practices: {
title: 'Best Practices',
api: {
title: '1. API-Kommunikation',
items: {
retry: 'Implementierung von Retry-Mechanismen',
errors: 'Sorgfältiges Error Handling',
logging: 'Ausführliches Logging aller Kommunikation'
}
},
data: {
title: '2. Datenmanagement',
items: {
storage: 'Zentrale Datenhaltung in MariaDB',
transactions: 'Transaktionssicherheit bei kritischen Operationen',
validation: 'Regelmäßige Datenvalidierung'
}
},
automation: {
title: '3. Prozessautomatisierung',
items: {
customers: 'Automatisierte Kundenanlage',
status: 'Automatische Statusaktualisierungen',
delivery: 'Systematisches Lieferschein-Management'
}
}
},
lessons: {
title: 'Lessons Learned',
api: {
title: '1. API-Design',
items: {
docs: 'Gründliche API-Dokumentation ist essentiell',
auth: 'Verständnis der verschiedenen Authentifizierungsmethoden',
limits: 'Berücksichtigung von Rate Limits'
}
},
validation: {
title: '2. Datenvalidierung',
items: {
rules: 'Implementierung strenger Validierungsregeln',
edge_cases: 'Sorgfältige Handhabung von Sonderfällen',
cleanup: 'Automatische Datenbereinigung'
}
},
optimization: {
title: '3. Prozessoptimierung',
items: {
automation: 'Kontinuierliche Verbesserung der Automatisierung',
performance: 'Regelmäßige Performance-Überprüfungen',
monitoring: 'Proaktives Monitoring'
}
}
},
conclusion: {
title: 'Fazit',
requirements: {
understanding: 'Tiefes Verständnis beider Systeme',
implementation: 'Sorgfältige Implementierung der API-Kommunikation',
error_handling: 'Robuste Fehlerbehandlung',
monitoring: 'Kontinuierliches Monitoring'
},
results: 'Die von Damjan Savić entwickelte Lösung verarbeitet erfolgreich Bestellungen und ermöglicht eine nahtlose Integration zwischen den Systemen. Besonders die von Damjan Savić implementierte automatisierte Kundenanlage und das Lieferschein-Management haben sich als effizienzsteigernd erwiesen. Dieses Projekt zeigt die Expertise von Damjan Savić im Bereich der Systemintegration.'
}
}
}
};
@@ -0,0 +1,253 @@
// src/i18n/locales/de/blog/posts/fullstack-development-timetracking.ts
export const fullstackDevelopmentTimetracking = {
meta: {
title: 'Fullstack-Entwicklung mit Python und React: Architektur unserer Zeiterfassungslösung',
date: '2024-02-09',
excerpt: 'Eine technische Deep-Dive in die Implementierung einer modernen Zeiterfassungslösung',
category: 'System Architecture',
coverImage: '/images/posts/fullstack-development-timetracking/cover.jpg',
tags: ['Python', 'React', 'TypeScript', 'MSSQL', 'System Design']
},
content: {
intro: {
title: 'Fullstack-Entwicklung mit Python und React: Architektur unserer Zeiterfassungslösung',
description: 'Die Entwicklung einer robusten Zeiterfassungslösung erfordert nicht nur technisches Know-how, sondern auch ein tiefes Verständnis für komplexe Geschäftsregeln und Benutzeranforderungen. In diesem Artikel teile ich unsere Erfahrungen bei der Implementierung einer modernen Fullstack-Zeiterfassungslösung mit Python und React.'
},
systemArchitecture: {
title: 'Systemarchitektur',
frontend: {
title: 'Frontend (Next.js + TypeScript)',
description: 'Die Frontend-Architektur basiert auf Next.js mit TypeScript und folgt einem komponenten-basierten Ansatz:',
code: {
types: `// types/TimeEntry.ts
interface TimeEntry {
id: number;
date: string;
checkIn: string;
checkOut: string | null;
userId: number;
status: 'complete' | 'incomplete';
}`,
component: `// components/TimeEntryForm.tsx
const TimeEntryForm: React.FC<TimeEntryFormProps> = ({ onSubmit }) => {
const [entry, setEntry] = useState<TimeEntry>({
date: new Date().toISOString().split('T')[0],
checkIn: new Date().toLocaleTimeString(),
checkOut: null,
status: 'incomplete'
});
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!validateTimeEntry(entry)) return;
try {
await onSubmit(entry);
} catch (error) {
console.error('Error submitting time entry:', error);
}
};
return (
<form onSubmit={handleSubmit} className='space-y-4'>
<DateInput
value={entry.date}
onChange={(date) => setEntry({ ...entry, date })}
/>
<TimeInput
value={entry.checkIn}
onChange={(time) => setEntry({ ...entry, checkIn: time })}
/>
{/* Additional form elements */}
</form>
);
};`
}
},
backend: {
title: 'Backend (Flask + MSSQL)',
description: 'Das Backend verwendet Flask für die API und MSSQL für die Datenpersistenz:',
code: {
models: `# models/time_entry.py
class TimeEntry(db.Model):
__tablename__ = 'Stundenzettel'
id = db.Column('ID', db.Decimal, primary_key=True)
personal_id = db.Column('Personal_ID', db.Decimal)
datum = db.Column('Datum', db.Date)
kommen = db.Column('Kommen', db.Time)
gehen = db.Column('Gehen', db.Time)
@validates('gehen')
def validate_checkout(self, key, value):
if value and value < self.kommen:
raise ValueError('Checkout time cannot be before checkin time')
return value`,
routes: `# routes/time_entries.py
@app.route('/api/time-entries', methods=['POST'])
@jwt_required
def create_time_entry():
data = request.get_json()
user_id = get_jwt_identity()
try:
validate_time_entry_creation(data, user_id)
entry = TimeEntry(
personal_id=user_id,
datum=data['date'],
kommen=data['checkIn'],
gehen=data.get('checkOut')
)
db.session.add(entry)
db.session.commit()
return jsonify(entry.to_dict()), 201
except ValidationError as e:
return jsonify({'error': str(e)}), 400`
}
}
},
businessLogic: {
title: 'Geschäftslogik-Implementierung',
validation: {
title: 'Validierung von Zeiteinträgen',
description: 'Die Validierungslogik stellt sicher, dass alle Geschäftsregeln eingehalten werden:',
code: `def validate_time_entry_creation(data: dict, user_id: int) -> None:
'''Validates a new time entry according to business rules.'''
# Check for existing incomplete entries
incomplete_entry = TimeEntry.query.filter_by(
personal_id=user_id,
gehen=None,
datum=data['date']
).first()
if incomplete_entry:
raise ValidationError('Cannot create new entry while incomplete entry exists')
# Check for time overlap with existing entries
overlapping_entry = TimeEntry.query.filter(
TimeEntry.personal_id == user_id,
TimeEntry.datum == data['date'],
TimeEntry.kommen <= data['checkIn'],
TimeEntry.gehen >= data['checkIn']
).first()
if overlapping_entry:
raise ValidationError('Time entry overlaps with existing entry')`
}
},
databaseDesign: {
title: 'Datenbankdesign',
description: 'Das MSSQL-Datenbankschema ist auf Effizienz und Integrität ausgelegt:',
code: `CREATE TABLE dbo.Stundenzettel (
ID decimal NOT NULL PRIMARY KEY,
Personal_ID decimal,
Datum date,
Kommen time,
Gehen time,
xStatus int,
xBenutzer nvarchar(15),
xDatum datetime,
xVersion timestamp
);
CREATE INDEX idx_personal_datum
ON dbo.Stundenzettel(Personal_ID, Datum);`
},
security: {
title: 'Sicherheitsimplementierung',
authentication: {
title: 'JWT-Authentifizierung',
code: `# auth/jwt_handler.py
from flask_jwt_extended import create_access_token
def authenticate_user(username: str, password: str) -> str:
user = Personal.query.filter_by(
Benutzername=username,
Passwort=password # In production, use proper password hashing
).first()
if not user:
raise AuthenticationError('Invalid credentials')
return create_access_token(identity=user.ID)`
}
},
bestPractices: {
title: 'Best Practices und Learnings',
points: [
{
title: 'Datenvalidierung auf mehreren Ebenen',
items: [
'Frontend-Validierung für sofortiges Feedback',
'Backend-Validierung für Geschäftsregeln',
'Datenbankconstraints für Datenintegrität'
]
},
{
title: 'Fehlerbehandlung',
items: [
'Strukturierte Fehlermeldungen',
'Benutzerfreundliche Fehlermeldungen im Frontend',
'Detailliertes Logging im Backend'
]
},
{
title: 'Performance-Optimierung',
items: [
'Indexierung kritischer Datenbankfelder',
'Frontend-Caching von Zeiteinträgen',
'Lazy Loading für historische Daten'
]
}
]
},
challenges: {
title: 'Herausforderungen und Lösungen',
timezones: {
title: '1. Zeitzonen-Handling',
description: 'Eine besondere Herausforderung war die korrekte Behandlung von Zeitzonen:',
code: `// utils/dateTime.ts
export const formatTimeForDisplay = (time: string): string => {
return new Date(\`1970-01-01T\${time}\`).toLocaleTimeString('de-DE', {
hour: '2-digit',
minute: '2-digit'
});
};
export const formatTimeForAPI = (time: string): string => {
return new Date(\`1970-01-01T\${time}\`).toISOString().split('T')[1];
};`
},
concurrency: {
title: '2. Concurrent Updates',
description: 'Die Behandlung gleichzeitiger Updates erforderte spezielle Aufmerksamkeit:',
code: `from sqlalchemy import and_, or_
def update_time_entry(entry_id: int, data: dict) -> TimeEntry:
entry = TimeEntry.query.filter_by(id=entry_id).with_for_update().first()
if not entry:
raise NotFoundError('Time entry not found')
# Optimistic locking using version field
if entry.xVersion != data['version']:
raise ConcurrencyError('Entry was modified by another user')
entry.gehen = data.get('checkOut')
db.session.commit()
return entry`
},
offline: {
title: '3. Offline-Fähigkeit',
description: 'Für die Offline-Funktionalität implementierten wir eine Service Worker-Strategie:',
code: `// service-worker.ts
const CACHE_NAME = 'timetracking-v1';
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request).then(response => {
return caches.open(CACHE_NAME).then(cache => {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});`
}
},
conclusion: {
title: 'Fazit',
description: 'Die Entwicklung einer Zeiterfassungslösung erfordert sorgfältige Planung und Berücksichtigung zahlreicher Geschäftsregeln. Durch den Einsatz moderner Technologien wie Next.js, TypeScript und Flask konnten wir eine robuste und benutzerfreundliche Lösung implementieren.',
keyPoints: [
'Strikte Typisierung mit TypeScript',
'Umfassende Validierungslogik',
'Effizientes Datenbankdesign',
'Benutzerfreundliche Fehlerbehandlung'
],
results: 'Die Lösung ist seit mehreren Monaten erfolgreich im Einsatz und verarbeitet täglich hunderte von Zeiteinträgen zuverlässig.'
}
}
};
@@ -0,0 +1,204 @@
// src/i18n/locales/de/blog/posts/rfid-automation.ts
export const rfidAutomation = {
meta: {
title: 'RFID-Etiketten-Automatisierung: Von Datenbank zum Drucker',
date: '2024-02-09',
excerpt: 'Eine detaillierte technische Analyse der Implementierung eines automatisierten RFID-Etikettendruck-Systems mit Python',
category: 'System Integration',
coverImage: '/images/posts/rfid-automation/cover.jpg',
tags: ['RFID', 'Python', 'ZPL', 'Automation', 'Zebra Printer', 'EPC']
},
content: {
intro: {
title: 'RFID-Etiketten-Automatisierung: Von Datenbank zum Drucker',
description: 'In modernen Logistik- und Retail-Umgebungen ist die effiziente und fehlerfreie Etikettierung von Produkten mit RFID-Tags von entscheidender Bedeutung. In diesem Artikel teile ich meine Erfahrungen bei der Implementierung einer automatisierten Lösung für die Generierung und den Druck von RFID-Etiketten mit Chipkodierung.'
},
requirements: {
title: 'Projekthintergrund',
points: [
'Automatische Generierung von EPC-Codes (Electronic Product Code)',
'Erstellung von ZPL-Code für Zebra-Drucker',
'Direkte Netzwerkkommunikation mit dem Drucker',
'Integration mit bestehenden Produktdaten',
'Fehlerbehandlung und Logging'
]
},
implementation: {
title: 'Technische Umsetzung',
epcGeneration: {
title: 'EPC-Code Generierung',
description: 'Die EPC-Codes werden nach dem SGTIN-Standard (Serialized Global Trade Item Number) generiert:',
code: `def generate_encoded_epc(company_prefix, indicator, item_ref, serial):
sgtin = SGTIN(company_prefix, indicator, item_ref, serial)
return sgtin.encode()`
},
zplTemplates: {
title: 'ZPL-Template Management',
description: 'Für die unterschiedlichen Etikettentypen wurden ZPL-Templates implementiert:',
code: `def generate_zpl_code(artikelnr, description, ean, price, material, water_resistance, glass_type, encoded_epc):
formatted_price = f'{price:.2f}'
return f'''
CT~~CD,~CC^~CT~
^XA
~TA000
~JSN
^LT35
^MNW
^MTT
^PON
^PMN
^LH0,0
^JMA
^PR2,2
~SD23
^JUS
^LRN
^CI27
^PA0,1,1,0
^RS8,,,3
^XZ
^XA
^MMT
^PW413
^LL531
^LS-24
^FT150,57^A0N,33,33^FH\\^CI27^FD{artikelnr}^FS^CI27
^FT44,86^A0N,21,20^FH\\^CI27^FD{description}^FS^CI27
^FT130,141^A0N,50,51^FH\\^CI27^FD{formatted_price} €^FS^CI27
^FT167,175^A0N,21,20^FH\\^CI27^FD{material}^FS^CI27
^FT185,201^A0N,21,20^FH\\^CI27^FD{water_resistance}^FS^CI27
^FT155,227^A0N,21,20^FH\\^CI27^FD{glass_type}^FS^CI27
^BY3,2,113^FT73,420^BEN,,Y,N
^FH\\^FD{ean}^FS
^RFW,H,1,2,1^FD3000^FS
^RFW,H,2,12,1^FD{encoded_epc}^FS
^PQ1,0,1,Y
^XZ'''`
},
printerCommunication: {
title: 'Netzwerkkommunikation mit dem Drucker',
description: 'Die Kommunikation mit dem Zebra-Drucker erfolgt über TCP/IP:',
code: `def send_to_printer(data, printer_ip='192.168.68.50', printer_port=9100):
try:
with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as sock:
sock.connect((printer_ip, printer_port))
sock.sendall(data.encode('utf-8'))
logger.info('Daten erfolgreich an den Drucker gesendet')
except Exception as e:
logger.error(f'Fehler beim Senden der Daten an den Drucker: {e}')`
},
serialNumberManagement: {
title: 'Datenprozessierung und Seriennummernverwaltung',
description: 'Die Verwaltung von Seriennummern ist kritisch für die Eindeutigkeit der EPC-Codes:',
code: `def initialize_serial_number():
global current_serial_number
try:
serial_log_content = SERIAL_NUMBER_LOG_PATH.read_text().strip()
current_serial_number = int(serial_log_content)
except (FileNotFoundError, ValueError):
current_serial_number = START_SERIAL_NUMBER
def get_next_serial_number():
global current_serial_number
current_serial_number += 1
return current_serial_number
def finalize_serial_number():
SERIAL_NUMBER_LOG_PATH.write_text(str(current_serial_number))`
}
},
features: {
title: 'Implementierte Features',
errorHandling: {
title: '1. Robuste Fehlerbehandlung',
points: [
'Validierung der Eingabedaten',
'Überprüfung der Netzwerkverbindung',
'Persistenz von Seriennummern',
'Detailliertes Logging aller Operationen'
]
},
configurability: {
title: '2. Konfigurierbarkeit',
points: [
'Drucker-IP und Port einstellbar',
'Anpassbare ZPL-Templates',
'Flexible EPC-Code-Generierung',
'Konfigurierbare Seriennummernbereiche'
]
},
scalability: {
title: '3. Skalierbarkeit',
points: [
'Batch-Verarbeitung von Produktdaten',
'Parallele Druckaufträge möglich',
'Effizientes Ressourcenmanagement',
'Modularer Code für einfache Erweiterbarkeit'
]
}
},
bestPractices: {
title: 'Best Practices',
dataValidation: {
title: '1. Datenvalidierung',
points: [
'Strict typing für kritische Datenfelder',
'Überprüfung von Pflichtfeldern',
'Format- und Plausibilitätsprüfungen'
]
},
faultTolerance: {
title: '2. Fehlertoleranz',
points: [
'Automatische Wiederholungsversuche',
'Graceful Degradation',
'Detaillierte Fehlerprotokolle'
]
},
maintainability: {
title: '3. Wartbarkeit',
points: [
'Modularer Code-Aufbau',
'Ausführliche Dokumentation',
'Klare Trennung von Konfiguration und Code'
]
}
},
lessonsLearned: {
title: 'Lessons Learned',
zplSpecifics: {
title: '1. ZPL-Spezifika',
points: [
'Genaue Kenntnis der ZPL-Spezifikationen notwendig',
'Sorgfältige Validierung der generierten ZPL-Codes',
'Regelmäßige Tests mit verschiedenen Druckermodellen'
]
},
rfidStandards: {
title: '2. RFID-Standards',
points: [
'Einhaltung der EPC-Standards kritisch',
'Sorgfältige Verwaltung von Seriennummern',
'Validierung der generierten EPC-Codes'
]
},
networkCommunication: {
title: '3. Netzwerkkommunikation',
points: [
'Robuste Fehlerbehandlung bei Netzwerkproblemen',
'Timeouts und Wiederholungsversuche',
'Pufferung von Druckaufträgen'
]
}
},
conclusion: {
title: 'Fazit',
description: 'Die implementierte Lösung ermöglicht eine effiziente und zuverlässige Automatisierung des RFID-Etikettierungsprozesses. Durch die Kombination von EPC-Code-Generierung, ZPL-Template-Management und direkter Druckerkommunikation wurde ein robustes System geschaffen, das sich in der Praxis bewährt hat.',
keyPoints: [
'Gründliche Planung der Systemarchitektur',
'Umfassende Fehlerbehandlung',
'Sorgfältige Dokumentation',
'Regelmäßige Tests und Validierung'
],
results: 'Die Lösung läuft seit mehreren Monaten stabil im Produktivbetrieb und verarbeitet täglich hunderte von Etiketten.'
}
}
};