Building H-Studio: A Modern Web Development Showcase

H-Studio's website isn't just a portfolio—it's a production system that demonstrates modern web engineering practices. Built with Next.js 15, React 19, and TypeScript, it serves 20+ service pages, handles bilingual content (English/German), and maintains GDPR compliance while delivering exceptional performance.

This article breaks down the architecture decisions, component patterns, and optimizations that make this site both scalable and maintainable.

---

Architecture Overview

Core Stack

Next.js 15 with App Router provides the foundation:

• React 19 Server Components by default
• TypeScript strict mode for type safety
• ISR (Incremental Static Regeneration) for dynamic content
• Edge Runtime for API routes and middleware

The App Router architecture lets us mix static pages, dynamic routes, and API endpoints seamlessly—essential for a site with multiple service pages, case studies, and a blog.

Content Architecture

We use Contentlayer2 for the blog and next-intl for internationalization:

// Contentlayer2 schema for type-safe blog posts
export const Blog = defineDocumentType(() => ({
 name: 'Blog',
 filePathPattern: `**/*.mdx`,
 fields: {
 title: { type: 'string', required: true },
 description: { type: 'string', required: true },
 slug: { type: 'string', required: true },
 date: { type: 'date', required: true },
 lang: { type: 'string', required: true },
 tags: { type: 'list', of: { type: 'string' }, required: true },
 readingTime: { type: 'number', required: true },
 noindex: { type: 'boolean', required: false, default: false },
 },
 computedFields: {
 url: { type: 'string', resolve: (doc) => `/blog/${doc.slug}` },
 localeUrl: { type: 'string', resolve: (doc) => `/${doc.lang}/blog/${doc.slug}` },
 },
}))

This ensures compile-time validation of all blog posts and type-safe queries throughout the application.

---

Service Pages Architecture

We maintain 20+ service pages, each with:

• Dedicated route (/services/[service-slug])
• Custom layout and content
• Related services suggestions
• FAQ sections with Schema.org markup
• Breadcrumb navigation
• Service-specific JSON-LD structured data

Service Categories

Services are organized into five categories:

1. Web & Frontend: Website Development, Frontend Development, Lead Systems, Startup MVP
2. Backend & Infrastructure: Backend Development, Java Development, API Development, DevOps
3. Business Solutions: CRM Integration, Custom Software, Client Portals, Consulting
4. AI & Automation: AI/ML Services, AI SDR Assistants, Email Automation
5. Team Services: IT Outstaffing, IT Outsourcing

Each service page follows a consistent structure but allows customization for specific needs.

Component Reusability

We've built a component library that powers all service pages:

• PageHeader: Consistent hero sections with CTAs
• RelatedServices: Cross-linking between services
• FAQPageSchema: Automatic FAQ Schema.org generation
• ServiceSchema: Service-specific structured data
• BreadcrumbSchema: Navigation breadcrumbs with JSON-LD

This pattern reduces duplication while maintaining flexibility.

---

Internationalization (i18n)

Middleware-Based Locale Detection

Our custom middleware handles locale detection and routing:

// Smart locale detection
const detectedLocale = preferredLanguages
 .map(lang => lang.split('-')[0])
 .find(lang => VALID_LOCALES.includes(lang)) || DEFAULT_LOCALE

// SEO-optimized redirects (301 for search engines)
if (pathname === '/') {
 return NextResponse.redirect(new URL(`/${detectedLocale}`, request.url), 301)
}

Features:

• Automatic browser language detection
• Cookie-based locale persistence (GDPR-compliant essential cookie)
• Googlebot optimization with proper redirects
• SEO-friendly URLs (/en/services/..., /de/services/...)

Content Structure

Each page exists in both languages:

• English: /en/services/website-development
• German: /de/services/website-development

The middleware ensures users always land on the correct locale version, improving UX and SEO.

---

Performance Optimization

Code Splitting & Lazy Loading

We use dynamic imports for below-the-fold components:

// Lazy load heavy components
const StartupFAQ = dynamic(() => import("@/components/FAQGrid/StartupFAQ"), {
 loading: () => <div className="min-h-[400px]" />,
});

const StartupStats = dynamic(() => import("@/components/Stats/StartupStats"), {
 loading: () => <div className="min-h-[300px]" />,
});

This reduces initial bundle size and improves Time to Interactive (TTI).

Image Optimization

Next.js Image component with:

• WebP/AVIF formats with automatic fallbacks
• Responsive sizing for different viewports
• Lazy loading for below-the-fold content
• SVG security policies (CSP headers)

Bundle Optimization

const nextConfig = {
 compiler: {
 removeConsole: process.env.NODE_ENV === "production",
 },
 images: {
 formats: ['image/webp', 'image/avif'],
 dangerouslyAllowSVG: true,
 contentDispositionType: 'attachment',
 contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
 },
 experimental: {
 mdxRs: true, // Rust-based MDX processing for faster builds
 },
}

---

SEO Infrastructure

Dynamic OG Images

We generate Open Graph images on-the-fly using @vercel/og:

const ogImageUrl = `${siteUrl}/api/og?title=${encodeURIComponent(title)}&description=${encodeURIComponent(description)}&author=${encodeURIComponent(author || 'H-Studio Team')}`

Each page gets a unique social preview image automatically.

Structured Data (JSON-LD)

Every page includes relevant Schema.org markup:

• Article schema for blog posts
• Service schema for service pages
• FAQPage schema for FAQ sections
• BreadcrumbList for navigation
• Organization schema for company information

Sitemap Generation

Automated sitemap with next-sitemap:

• Hreflang tags for international SEO
• Dynamic blog post inclusion
• Service page generation
• Tag page generation
• Priority and changefreq optimization

The sitemap regenerates automatically on each build.

---

GDPR Compliance

Cookie Banner System

We've implemented a GDPR-compliant cookie banner that:

• Categorizes cookies (essential, analytics, marketing)
• Stores consent in localStorage and cookies
• Respects user preferences across sessions
• Integrates with Google Analytics (only loads after consent)
• Provides cookie settings page for granular control

Essential Cookies

According to TDDDG §25(2), language preference cookies are considered essential (technically necessary) and don't require consent. Our middleware sets the locale cookie automatically.

Privacy Policy Integration

• Version tracking for policy updates
• Automatic notifications when policies change
• Processor tables for transparency
• Cookie settings links throughout the site

---

Component Architecture

Homepage Components

The homepage uses a modular component structure:

<StartupHeroSection onContactClick={openModal} />
<TechFocus />
<StartupFeatures onContactClick={openModal} />
<StartupKeyMessage />
<StartupAlternatingSection onContactClick={openModal} />
<StartupStats />
<StartupBenefits onContactClick={openModal} />
<StartupRoadmap onContactClick={openModal} />
<OurServices />
<StartupTestimonials />
<StartupFAQ />

Each component is:

• Self-contained with its own logic
• Reusable across different pages
• Type-safe with TypeScript
• Accessible with proper ARIA labels

Contact Modal System

We use a custom hook for modal state management:

const { isOpen, openModal, closeModal } = useContactModal();

This provides:

• Global state accessible from any component
• Keyboard navigation (ESC to close)
• Focus management for accessibility
• Smooth animations with Framer Motion

---

UI/UX Features

Tailwind CSS Design System

Custom design system with:

• Dark mode support (darkMode: "class")
• Custom color palette for brand consistency
• Responsive design patterns (mobile-first)
• Component-based styling for maintainability

Framer Motion Animations

Smooth animations and transitions:

• Page transitions between routes
• Scroll animations with useInView hooks
• Micro-interactions on buttons and cards
• Performance-optimized with will-change CSS

Smooth Scrolling with Lenis

We implemented Lenis for native-feel scrolling:

• Momentum-based scrolling for mobile-like experience
• Smooth scroll to sections with built-in anchors
• Performance optimization with requestAnimationFrame
• Accessibility support for reduced motion preferences

---

Forms & Integrations

Contact Forms

Serverless API routes handle form submissions:

• Server-side validation with Zod
• Email notifications with formatted templates
• Anti-spam protection (honeypot fields, rate limiting)
• Error handling with user-friendly messages

Newsletter Integration

• Double opt-in for GDPR compliance
• Email validation and sanitization
• Unsubscribe handling
• Integration with email service providers

Analytics Integration

Privacy-focused analytics:

• Google Analytics 4 with consent management
• UTM parameter tracking for campaign attribution
• Custom event tracking for user interactions
• Server-side tracking for accurate attribution

---

Development Experience

TypeScript Configuration

Comprehensive type safety:

{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@/*": ["./src/*"],
 "contentlayer/generated": ["./.contentlayer/generated"]
 },
 "strict": true
 }
}

This ensures:

• Type-safe imports throughout the codebase
• Autocomplete in IDEs
• Compile-time error detection
• Refactoring confidence

Code Quality Tools

• ESLint with Next.js configuration
• Prettier with Tailwind plugin for class sorting
• TypeScript strict mode for maximum safety
• Import organization for consistency

Hot Reloading

Content changes reflect immediately:

• MDX files hot-reload in development
• Frontmatter changes update instantly
• Component updates without page refresh
• Type errors shown in real-time

---

Deployment & Monitoring

Vercel Integration

• Automatic deployments from Git pushes
• Preview deployments for Pull Requests
• Edge functions for global performance
• Analytics integration for performance monitoring
• Build optimization with caching

Build Pipeline

{
 "scripts": {
 "build": "next build && next-sitemap",
 "postbuild": "next-sitemap"
 }
}

The build process:

1. Generates static pages
2. Processes MDX content
3. Generates sitemap
4. Optimizes images
5. Deploys to Vercel Edge Network

---

Why This Architecture Works

Scalability

• Component reusability reduces duplication
• Type safety prevents bugs at scale
• Modular structure allows easy feature additions
• ISR handles traffic spikes gracefully

Maintainability

• Consistent patterns across all pages
• TypeScript catches errors before runtime
• Clear component boundaries make debugging easier
• Documented architecture for team onboarding

Performance

• Static generation for maximum speed
• Code splitting reduces initial load
• Image optimization improves LCP
• Edge caching for global performance

SEO

• Structured data helps search engines understand content
• Hreflang tags for international SEO
• Fast loading improves Core Web Vitals
• Mobile-first design improves mobile rankings

---

Real-World Results

This architecture delivers:

• Perfect Core Web Vitals scores (LCP < 2.5s, INP < 200ms, CLS < 0.1)
• 100% Lighthouse performance rating
• SEO-optimized for maximum visibility
• GDPR-compliant cookie handling
• Accessible to all users (WCAG 2.1 AA)
• Scalable architecture for future growth

---

Lessons Learned

What Works Well

• Component-based architecture makes adding new pages easy
• TypeScript strict mode catches bugs early
• ISR provides the perfect balance of freshness and performance
• Middleware-based i18n simplifies locale handling

Challenges Overcome

• Cookie consent required careful GDPR compliance
• Service page structure needed to balance consistency and flexibility
• Image optimization required testing across devices
• SEO needed structured data for all page types

---

This website showcases our commitment to excellence in web development. Every architectural decision, every component pattern, and every optimization reflects the same standards we bring to client projects in Berlin and across Germany. It's not just a portfolio—it's a demonstration of what's possible with modern web technologies.