damjan_savicandClaude Sonnet 4.5
d130972cd7
- Created BlogList client component with search and category filtering - Integrated SearchBar and CategoryFilter components - Implemented case-insensitive search by title/excerpt/tags - Added category filtering with AND logic for combined filters - Updated pagination to work with filtered results - Added search placeholder translations for de/en/sr - Moved blog card and pagination logic to client component Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
360 lines
16 KiB
TypeScript
360 lines
16 KiB
TypeScript
import { setRequestLocale } from 'next-intl/server';
|
|
import { getTranslations } from 'next-intl/server';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import type { Metadata } from 'next';
|
|
import { getAllBlogPosts, BlogPost } from '@/lib/blog';
|
|
import { BlogList } from '@/components/blog/BlogList';
|
|
|
|
type Props = {
|
|
params: Promise<{ locale: string }>;
|
|
};
|
|
|
|
// Legacy blog posts with translations (these have manual translations)
|
|
const legacyBlogPosts: Record<string, BlogPost[]> = {
|
|
de: [
|
|
{
|
|
slug: 'n8n-automatisierung-tutorial',
|
|
title: 'n8n Tutorial: Workflows automatisieren ohne Code - Schritt für Schritt',
|
|
date: '2026-01-18',
|
|
excerpt: 'Lernen Sie, wie Sie mit n8n leistungsstarke Automatisierungen erstellen. Von der Installation bis zum ersten produktiven Workflow - inklusive Best Practices.',
|
|
category: 'Automatisierung',
|
|
tags: ['n8n', 'Tutorial', 'Automatisierung', 'Workflow', 'No-Code', 'Self-Hosted'],
|
|
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'geo-generative-engine-optimization',
|
|
title: 'GEO: Generative Engine Optimization - SEO für die KI-Ära',
|
|
date: '2026-01-17',
|
|
excerpt: 'Wie Sie Ihre Inhalte für ChatGPT, Perplexity und andere KI-Suchmaschinen optimieren. Der neue Standard nach klassischem SEO.',
|
|
category: 'Marketing',
|
|
tags: ['GEO', 'SEO', 'KI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
|
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'gpt-api-integration-praxisguide',
|
|
title: 'GPT API Integration: Vom API-Key zur produktionsreifen Anwendung',
|
|
date: '2026-01-16',
|
|
excerpt: 'Praktische Anleitung zur Integration von OpenAI GPT-4 in Ihre Anwendungen. Token-Optimierung, Fehlerbehandlung und Best Practices.',
|
|
category: 'KI-Entwicklung',
|
|
tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
|
|
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'ki-agenten-unternehmen-guide',
|
|
title: 'KI-Agenten für Unternehmen: Der ultimative Praxisguide 2026',
|
|
date: '2026-01-15',
|
|
excerpt: 'Wie Unternehmen KI-Agenten einsetzen können, um Prozesse zu automatisieren, Kosten zu senken und Wettbewerbsvorteile zu gewinnen.',
|
|
category: 'KI-Entwicklung',
|
|
tags: ['KI-Agenten', 'Automatisierung', 'GPT-4', 'Claude', 'LLM', 'Unternehmen'],
|
|
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'n8n-make-zapier-vergleich',
|
|
title: 'n8n vs Make vs Zapier: Welches Automatisierungstool passt zu Ihnen?',
|
|
date: '2026-01-10',
|
|
excerpt: 'Ein detaillierter Vergleich der führenden Workflow-Automatisierungstools mit Vor- und Nachteilen für verschiedene Anwendungsfälle.',
|
|
category: 'Automatisierung',
|
|
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatisierung', 'No-Code'],
|
|
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'voice-ai-kundenservice-trends',
|
|
title: 'Voice AI im Kundenservice: Trends und Best Practices 2026',
|
|
date: '2026-01-05',
|
|
excerpt: 'Wie Voice AI den Kundenservice revolutioniert und welche Technologien Sie für Ihr Unternehmen evaluieren sollten.',
|
|
category: 'Voice AI',
|
|
tags: ['Voice AI', 'Sprachassistent', 'Kundenservice', 'NLP', 'Chatbot', 'Vapi'],
|
|
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'saas-mvp-entwicklung-4-wochen',
|
|
title: 'SaaS MVP in 4 Wochen: Von der Idee zum Launch',
|
|
date: '2025-12-20',
|
|
excerpt: 'Schritt-für-Schritt Anleitung zur schnellen Entwicklung eines SaaS MVP mit Next.js, Prisma und modernen Cloud-Diensten.',
|
|
category: 'SaaS-Entwicklung',
|
|
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Produktentwicklung', 'React'],
|
|
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'erp-integration-breuninger',
|
|
title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen',
|
|
date: '2024-02-09',
|
|
excerpt: 'Detaillierte Analyse einer 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',
|
|
},
|
|
],
|
|
en: [
|
|
{
|
|
slug: 'n8n-automatisierung-tutorial',
|
|
title: 'n8n Tutorial: Automate Workflows Without Code - Step by Step',
|
|
date: '2026-01-18',
|
|
excerpt: 'Learn how to create powerful automations with n8n. From installation to your first production workflow - including best practices.',
|
|
category: 'Automation',
|
|
tags: ['n8n', 'Tutorial', 'Automation', 'Workflow', 'No-Code', 'Self-Hosted'],
|
|
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'geo-generative-engine-optimization',
|
|
title: 'GEO: Generative Engine Optimization - SEO for the AI Era',
|
|
date: '2026-01-17',
|
|
excerpt: 'How to optimize your content for ChatGPT, Perplexity and other AI search engines. The new standard after traditional SEO.',
|
|
category: 'Marketing',
|
|
tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
|
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'gpt-api-integration-praxisguide',
|
|
title: 'GPT API Integration: From API Key to Production-Ready Application',
|
|
date: '2026-01-16',
|
|
excerpt: 'Practical guide to integrating OpenAI GPT-4 into your applications. Token optimization, error handling and best practices.',
|
|
category: 'AI Development',
|
|
tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
|
|
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'ki-agenten-unternehmen-guide',
|
|
title: 'AI Agents for Business: The Ultimate Practical Guide 2026',
|
|
date: '2026-01-15',
|
|
excerpt: 'How companies can use AI agents to automate processes, reduce costs and gain competitive advantages.',
|
|
category: 'AI Development',
|
|
tags: ['AI Agents', 'Automation', 'GPT-4', 'Claude', 'LLM', 'Enterprise'],
|
|
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'n8n-make-zapier-vergleich',
|
|
title: 'n8n vs Make vs Zapier: Which Automation Tool is Right for You?',
|
|
date: '2026-01-10',
|
|
excerpt: 'A detailed comparison of leading workflow automation tools with pros and cons for different use cases.',
|
|
category: 'Automation',
|
|
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automation', 'No-Code'],
|
|
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'voice-ai-kundenservice-trends',
|
|
title: 'Voice AI in Customer Service: Trends and Best Practices 2026',
|
|
date: '2026-01-05',
|
|
excerpt: 'How Voice AI is revolutionizing customer service and which technologies you should evaluate for your business.',
|
|
category: 'Voice AI',
|
|
tags: ['Voice AI', 'Voice Assistant', 'Customer Service', 'NLP', 'Chatbot', 'Vapi'],
|
|
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'saas-mvp-entwicklung-4-wochen',
|
|
title: 'SaaS MVP in 4 Weeks: From Idea to Launch',
|
|
date: '2025-12-20',
|
|
excerpt: 'Step-by-step guide to quickly developing a SaaS MVP with Next.js, Prisma and modern cloud services.',
|
|
category: 'SaaS Development',
|
|
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Product Development', 'React'],
|
|
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'erp-integration-breuninger',
|
|
title: 'ApparelMagic and TradeByte: Complex Integration Analysis',
|
|
date: '2024-02-09',
|
|
excerpt: 'Detailed analysis of an e-commerce integration between Apparel Magic and Breuninger via TradeByte',
|
|
category: 'System Integration',
|
|
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
|
|
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
|
|
},
|
|
],
|
|
sr: [
|
|
{
|
|
slug: 'n8n-automatisierung-tutorial',
|
|
title: 'n8n Tutorial: Automatizujte Radne Tokove Bez Koda - Korak po Korak',
|
|
date: '2026-01-18',
|
|
excerpt: 'Naučite kako da kreirate moćne automatizacije sa n8n. Od instalacije do prvog produktivnog radnog toka - uključujući najbolje prakse.',
|
|
category: 'Automatizacija',
|
|
tags: ['n8n', 'Tutorial', 'Automatizacija', 'Workflow', 'No-Code', 'Self-Hosted'],
|
|
coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'geo-generative-engine-optimization',
|
|
title: 'GEO: Generative Engine Optimization - SEO za AI Eru',
|
|
date: '2026-01-17',
|
|
excerpt: 'Kako da optimizujete sadržaj za ChatGPT, Perplexity i druge AI pretraživače. Novi standard posle klasičnog SEO-a.',
|
|
category: 'Marketing',
|
|
tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
|
|
coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'gpt-api-integration-praxisguide',
|
|
title: 'GPT API Integracija: Od API Ključa do Produkcione Aplikacije',
|
|
date: '2026-01-16',
|
|
excerpt: 'Praktični vodič za integraciju OpenAI GPT-4 u vaše aplikacije. Optimizacija tokena, rukovanje greškama i najbolje prakse.',
|
|
category: 'AI Razvoj',
|
|
tags: ['GPT-4', 'OpenAI', 'API', 'Integracija', 'Python', 'LLM', 'Prompt Engineering'],
|
|
coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'ki-agenten-unternehmen-guide',
|
|
title: 'AI Agenti za Preduzeća: Ultimativni Praktični Vodič 2026',
|
|
date: '2026-01-15',
|
|
excerpt: 'Kako kompanije mogu koristiti AI agente za automatizaciju procesa, smanjenje troškova i sticanje konkurentskih prednosti.',
|
|
category: 'AI Razvoj',
|
|
tags: ['AI Agenti', 'Automatizacija', 'GPT-4', 'Claude', 'LLM', 'Preduzeća'],
|
|
coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'n8n-make-zapier-vergleich',
|
|
title: 'n8n vs Make vs Zapier: Koji Alat za Automatizaciju je Pravi za Vas?',
|
|
date: '2026-01-10',
|
|
excerpt: 'Detaljna uporedna analiza vodećih alata za automatizaciju radnih tokova sa prednostima i manama za različite slučajeve upotrebe.',
|
|
category: 'Automatizacija',
|
|
tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatizacija', 'No-Code'],
|
|
coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'voice-ai-kundenservice-trends',
|
|
title: 'Voice AI u Korisničkoj Službi: Trendovi i Najbolje Prakse 2026',
|
|
date: '2026-01-05',
|
|
excerpt: 'Kako Voice AI revolucioniše korisničku službu i koje tehnologije treba da evaluirate za vaš posao.',
|
|
category: 'Voice AI',
|
|
tags: ['Voice AI', 'Glasovni Asistent', 'Korisnička Služba', 'NLP', 'Chatbot', 'Vapi'],
|
|
coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'saas-mvp-entwicklung-4-wochen',
|
|
title: 'SaaS MVP za 4 Nedelje: Od Ideje do Lansiranja',
|
|
date: '2025-12-20',
|
|
excerpt: 'Korak-po-korak vodič za brz razvoj SaaS MVP-a sa Next.js, Prisma i modernim cloud servisima.',
|
|
category: 'SaaS Razvoj',
|
|
tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Razvoj Proizvoda', 'React'],
|
|
coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
|
|
},
|
|
{
|
|
slug: 'erp-integration-breuninger',
|
|
title: 'ApparelMagic i TradeByte: Analiza kompleksnih integracija',
|
|
date: '2024-02-09',
|
|
excerpt: 'Detaljna analiza e-commerce integracije izmedu Apparel Magic i Breuninger putem TradeByte',
|
|
category: 'Sistemska Integracija',
|
|
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integracija', 'Python', 'MariaDB'],
|
|
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
|
|
},
|
|
],
|
|
};
|
|
|
|
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { locale } = await params;
|
|
const t = await getTranslations({ locale, namespace: 'blog.meta' });
|
|
|
|
const keywords: Record<string, string[]> = {
|
|
de: [
|
|
'KI Blog',
|
|
'Automatisierung Blog',
|
|
'Tech Blog',
|
|
'KI-Agenten',
|
|
'n8n Tutorials',
|
|
'Voice AI',
|
|
'SaaS Entwicklung',
|
|
'Python Tutorials',
|
|
],
|
|
en: [
|
|
'AI Blog',
|
|
'Automation Blog',
|
|
'Tech Blog',
|
|
'AI Agents Guide',
|
|
'n8n Tutorials',
|
|
'Voice AI Guide',
|
|
'SaaS Development',
|
|
'Python Tutorials',
|
|
'GPT-4 Integration Guide',
|
|
'AI Developer Blog',
|
|
'Process Automation Tips',
|
|
],
|
|
sr: [
|
|
'AI Blog',
|
|
'Automatizacija Blog',
|
|
'Tech Blog',
|
|
'AI Agenti',
|
|
'n8n Tutoriali',
|
|
'Voice AI',
|
|
'SaaS Razvoj',
|
|
'Python Tutoriali',
|
|
],
|
|
};
|
|
|
|
const localePath = locale === 'de' ? '/blog' : `/${locale}/blog`;
|
|
|
|
return {
|
|
title: t('title'),
|
|
description: t('description'),
|
|
keywords: keywords[locale] || keywords.de,
|
|
alternates: {
|
|
canonical: `${BASE_URL}${localePath}`,
|
|
languages: {
|
|
'x-default': `${BASE_URL}/blog`,
|
|
de: `${BASE_URL}/blog`,
|
|
en: `${BASE_URL}/en/blog`,
|
|
sr: `${BASE_URL}/sr/blog`,
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: t('title'),
|
|
description: t('description'),
|
|
url: `${BASE_URL}${localePath}`,
|
|
type: 'website',
|
|
locale: locale === 'de' ? 'de_DE' : locale === 'sr' ? 'sr_RS' : 'en_US',
|
|
alternateLocale: ['de_DE', 'en_US', 'sr_RS'].filter(l => l !== (locale === 'de' ? 'de_DE' : locale === 'sr' ? 'sr_RS' : 'en_US')),
|
|
},
|
|
};
|
|
}
|
|
|
|
|
|
export default async function BlogPage({ params }: Props) {
|
|
const { locale } = await params;
|
|
setRequestLocale(locale);
|
|
|
|
const t = await getTranslations('blog');
|
|
|
|
// Get dynamic posts from markdown files
|
|
const dynamicPosts = getAllBlogPosts();
|
|
|
|
// Get legacy posts (with translations)
|
|
const legacyPosts = legacyBlogPosts[locale] || legacyBlogPosts.de;
|
|
|
|
// Merge: dynamic posts first, then legacy posts (avoiding duplicates)
|
|
const legacySlugs = new Set(legacyPosts.map(p => p.slug));
|
|
const allPosts = [
|
|
...dynamicPosts.filter(p => !legacySlugs.has(p.slug)),
|
|
...legacyPosts,
|
|
].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
|
|
|
return (
|
|
<main className="min-h-screen">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
|
|
{/* Header Section */}
|
|
<div className="mb-12 sm:mb-16 lg:mb-20">
|
|
<div className="flex items-center gap-4 mb-8">
|
|
<ArrowRight className="h-5 w-5 text-zinc-500" />
|
|
<h2 className="text-white text-sm tracking-wider">BLOG</h2>
|
|
</div>
|
|
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
|
|
{t('meta.header.title')}
|
|
</h1>
|
|
<p className="text-lg sm:text-xl text-zinc-400 max-w-2xl">
|
|
{t('meta.header.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Blog List with Search and Filters */}
|
|
<BlogList
|
|
posts={allPosts}
|
|
locale={locale}
|
|
translations={{
|
|
searchPlaceholder: t('ui.search.placeholder'),
|
|
showingText: (start: number, end: number, total: number) =>
|
|
t('ui.pagination.showing', { start, end, total }),
|
|
noPostsText: t('ui.errors.posts'),
|
|
paginationPrevious: t('ui.pagination.previous'),
|
|
paginationNext: t('ui.pagination.next'),
|
|
}}
|
|
/>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|