Case Study - Modern corporate website with MDX content pipeline: Next.js 15 portfolio and blog platform

TechForge Digital needed a modern corporate website showcasing technical expertise through case studies and blog articles. Built with Next.js 15, React 19, and advanced MDX processing pipeline featuring custom remark plugins, syntax highlighting, and performance optimizations.

Client: TechForge Digital
Year: 2024
Service: Web development, Content platform, Performance optimization

Overview

For a technology consultancy, the corporate website serves dual purposes: marketing presence and technical demonstration. A simple landing page doesn't suffice—the site itself must showcase capabilities. TechForge Digital needed a platform that:

Demonstrates technical excellence: The website's implementation quality signals expertise
Enables rich content: Case studies require code blocks, diagrams, embedded components
Performs flawlessly: Poor performance undermines credibility
Scales with content: As the portfolio grows, site performance must not degrade
Provides excellent authoring experience: Content creation should be friction-free
Optimizes for SEO: Case studies and blog articles must rank in search results

Traditional approaches presented trade-offs:

WordPress/CMS: Rich content editing, but performance challenges, maintenance overhead, security concerns
Static site generators: Fast performance, but limited interactivity, rigid content structure
Custom React SPA: Full flexibility, but SEO challenges, slow initial load, complex routing
Documentation platforms: Good for technical content, but not suitable for marketing

The solution: leverage Next.js 15's latest capabilities—App Router with Server Components, advanced MDX processing, static site generation with on-demand revalidation. This approach combines performance of static sites with flexibility of custom applications.

What we did

Next.js 15 App Router with React 19 Server Components
Advanced MDX pipeline with custom remark/rehype plugins
Tailwind CSS 4 design system with custom typography
Shiki syntax highlighting with CSS variables theme
Framer Motion animations and transitions
Image optimization with Sharp and Next.js Image
File-based content management (no database)
Vercel deployment with edge network CDN

Matvii Kharlamenko,
Co-Founder / CTO, BeingArt IT

Next.js 15 App Router architecture

The website leverages Next.js 15's App Router—a paradigm shift from previous Next.js versions:

React Server Components by default: Pages render on the server, sending only HTML to the client. JavaScript only ships for interactive components. A typical page loads 80% less JavaScript than traditional React apps. This dramatically improves initial load time and time-to-interactive.

File-based routing: Route structure mirrors directory structure—app/blog/page.jsx becomes /blog. Dynamic routes via [slug] directories. Nested layouts with automatic layout composition. No route configuration files—routing is intuitive.

Async components: Server Components can be async functions fetching data directly:

async function BlogPage() {
  const articles = await loadAllArticles()
  return <ArticleList articles={articles} />
}

No getServerSideProps or getStaticProps boilerplate. Data fetching happens inline where it's used.

Streaming and Suspense: Long data fetches don't block page render. Fast content streams immediately, slow content shows loading states. Users see content progressively instead of staring at blank screens.

Automatic code splitting: Each route automatically code-splits. Navigation to new pages only loads required JavaScript. Unlike traditional SPAs where initial bundle includes all routes, App Router loads routes on demand.

Metadata API: SEO metadata (title, description, Open Graph tags) defined alongside routes:

export const metadata = {
  title: 'Enterprise ERP Modernization Case Study',
  description: 'How we migrated legacy AS/400 system to modern Angular...'
}

No manual <Head> management. Metadata automatically generates proper tags.

Benefit: App Router provides SPA-like navigation (no full page reloads) with static site performance (minimal JavaScript). Best of both worlds.

Advanced MDX content pipeline

The site's core innovation is the MDX content pipeline—enabling rich content authoring with Markdown simplicity:

MDX architecture

MDX = Markdown + JSX: Write content in Markdown, embed React components where needed:

## Overview

The platform integrated **20+ government services**...

<TagList>
  <TagListItem>Spring Boot 3 + Camunda</TagListItem>
  <TagListItem>React + AngularJS hybrid</TagListItem>
</TagList>

This content compiles to React components. Markdown provides readable authoring, React components provide rich interactivity.

Custom remark plugins: The remark/rehype pipeline transforms Markdown before rendering:

remark-gfm: GitHub Flavored Markdown—tables, task lists, strikethrough
remark-rehype-wrap: Automatically wraps blog and work content in different layouts
rehype-unwrap-images: Extracts images from paragraph wrappers for custom styling
@leafac/rehype-shiki: Syntax highlighting using Shiki engine

Unified conditional layouts: Custom plugin automatically detects content type (blog vs. work) and injects appropriate wrapper:

remarkRehypeWrap({
  selector: 'body > *',
  wrapperBlog: (children) => ({ type: 'jsx', value: `<BlogLayout>${children}</BlogLayout>` }),
  wrapperWork: (children) => ({ type: 'jsx', value: `<WorkLayout>${children}</WorkLayout>` })
})

Authors don't specify layouts—pipeline infers from file location. Blog posts automatically get blog layout, case studies get work layout.

Custom MDX components: MDX content can reference custom React components:

export const MDXComponents = {
  h2: (props) => <H2 {...props} />,  // Custom heading with anchor links
  pre: (props) => <CodeBlock {...props} />,  // Enhanced code blocks
  img: (props) => <OptimizedImage {...props} />,  // Next.js Image optimization
  Blockquote,  // Custom testimonial component
  TagList,  // Tag display component
  StatList,  // Statistics display component
}

Standard Markdown elements automatically render as custom components with enhanced styling and functionality.

Shiki syntax highlighting

Code blocks use Shiki—VS Code's syntax highlighter:

Accurate highlighting: Shiki uses VS Code's grammar definitions—highlighting is identical to VS Code. Supports 100+ languages. Highlighting is grammatically correct, not regex-based.

CSS variables theme: Instead of inline styles, Shiki generates CSS classes. Theme colors defined via CSS variables:

:root {
  --shiki-token-keyword: #c678dd;
  --shiki-token-function: #61afef;
  --shiki-token-string: #98c379;
}

Dark mode simply changes CSS variables—no re-rendering, no inline style duplication.

Build-time highlighting: Syntax highlighting happens during build—zero runtime cost. Code blocks ship as pre-highlighted HTML. No JavaScript library loads for highlighting.

Result: Beautiful, accurate syntax highlighting with zero performance cost.

Content discovery

File-based content management with dynamic discovery:

No build configuration: Adding new content doesn't require updating config files. Drop an MDX file into app/blog/ or app/work/—it automatically appears.

Fast-glob discovery: Utility functions use fast-glob to discover content:

async function loadAllArticles() {
  const articleGlobs = await glob('*/page.mdx', { cwd: './src/app/blog' })
  const articles = await Promise.all(articleGlobs.map(loadArticle))
  return articles.sort((a, b) => b.date - a.date)
}

This runs at build time—zero runtime overhead.

Metadata extraction: Each MDX file exports metadata:

export const article = {
  author: 'Matvii Kharlamenko',
  date: '2024-11-15',
  title: 'Building Scalable React Applications',
  description: '...'
}

Build process extracts this metadata for listing pages without rendering full content.

Benefit: Content authoring is simple—create Markdown file, add metadata, write. No database, no CMS interface, no deployment complexity.

Tailwind CSS 4 design system

The site implements a comprehensive design system with Tailwind CSS 4:

Utility-first CSS: Styles applied via utility classes directly in markup:

<div className="rounded-lg bg-white p-6 shadow-lg">
  <h2 className="text-2xl font-bold text-gray-900">...</h2>
</div>

No separate CSS files, no naming conventions, no specificity battles. Styles colocate with markup for clarity.

Custom typography system: Mona Sans variable font with custom font variations:

@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  src: url('/fonts/Mona-Sans.woff2') format('woff2-variations');
}

Variable font provides entire weight range (200-900) in single file—reduces font load from 5-6 files to 1.

CSS custom properties: Design tokens as CSS variables:

:root {
  --color-neutral-50: #fafafa;
  --color-neutral-900: #171717;
  --spacing-4: 1rem;
  --font-size-base: 1rem;
}

Tailwind utilities reference these variables. Theme changes update variables, not individual classes.

Responsive design: Mobile-first responsive design with Tailwind breakpoints:

<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">

Layout automatically adapts—1 column on mobile, 2 on tablet, 3 on desktop.

Dark mode support: Color scheme adapts to user preference:

<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">

CSS media query prefers-color-scheme automatically applies dark variants.

Prettier plugin: prettier-plugin-tailwindcss automatically sorts classes:

// Before: className="text-white p-4 bg-blue-500 rounded-lg"
// After:  className="rounded-lg bg-blue-500 p-4 text-white"

Consistent class ordering improves readability and diffs.

Benefit: Tailwind enables rapid UI development with consistent design. Utility classes eliminate "naming things" problem. Design tokens ensure consistency. Responsive design is effortless.

Framer Motion animations

Subtle animations enhance user experience without sacrificing performance:

FadeIn component: Content fades and slides in as it enters viewport:

<FadeIn>
  <h1>Enterprise Solutions</h1>
  <p>We deliver scalable applications...</p>
</FadeIn>

Uses Intersection Observer to detect visibility. Animations only trigger when content is in viewport—no animating off-screen content.

Stagger animations: List items animate sequentially:

<FadeInStagger>
  {articles.map(article => (
    <FadeIn key={article.id}>
      <ArticleCard article={article} />
    </FadeIn>
  ))}
</FadeInStagger>

Creates polished, professional appearance as content reveals progressively.

Page transitions: Smooth transitions between routes:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>

Reduces perceived navigation time—content appears to transition smoothly instead of instantly replacing.

Performance: Framer Motion uses hardware-accelerated CSS transforms (opacity, transform). Animations run on GPU, not main thread—smooth 60fps even during JavaScript execution.

Benefit: Animations add polish and professionalism. Site feels premium, not generic. Animations guide user attention to important content.

Performance optimizations

The site achieves perfect Lighthouse scores through comprehensive optimization:

Image optimization

Next.js Image component: All images use <Image> component:

<Image
  src={heroImage}
  alt="Platform dashboard"
  width={1200}
  height={800}
  priority
/>

Automatic WebP/AVIF generation—modern formats for supported browsers, fallback for others. Responsive srcset generation—appropriate image size per viewport. Lazy loading by default—images load as they enter viewport. priority flag for above-the-fold images prevents lazy loading.

Sharp processing: Sharp library performs image optimization during build:

Format conversion (JPEG → WebP/AVIF)
Quality compression (reduces file size 60-80% without visible quality loss)
Responsive image generation (generates multiple sizes automatically)
Metadata stripping (removes EXIF data reducing file size)

Result: Largest Contentful Paint (LCP) under 1 second. Images load instantly for perceived performance.

Server Components

Minimal JavaScript: Server Components eliminate client JavaScript for non-interactive content:

Traditional React SPA: 200KB+ initial JavaScript bundle
TechForge Digital website: 40KB JavaScript (80% reduction)

Content-heavy pages (case studies, blog articles) ship almost zero JavaScript—just HTML and CSS. Only interactive components (navigation menu, contact form) include JavaScript.

Streaming: Server Components support streaming—fast content renders immediately:

<Suspense fallback={<Loading />}>
  <SlowComponent />
</Suspense>

Users see content progressively, not all-or-nothing.

Static Site Generation

Build-time rendering: All pages pre-render at build time. Server generates HTML during deployment, not per-request. First request serves cached HTML—instant response.

Incremental Static Regeneration: On-demand revalidation enables updating content without full rebuild:

export const revalidate = 3600 // Revalidate after 1 hour

First request after revalidation period triggers background regeneration. Users always see fast cached version.

Code splitting

Route-based splitting: Each page only loads required JavaScript. Navigating to /blog doesn't load /work JavaScript. Visiting case study page doesn't load blog code.

Dynamic imports: Large components load on-demand:

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Spinner />
})

Component JavaScript loads only when needed.

CSS optimization

Tailwind purging: Build process removes unused CSS. Tailwind includes thousands of utilities, but each page only uses dozens. Unused utilities purged from production CSS:

Development: 3MB CSS (all utilities)
Production: 12KB CSS (used utilities only)

Critical CSS: Above-the-fold styles inline in <head>. Page renders styled immediately—no flash of unstyled content (FOUC). Remaining CSS loads asynchronously.

Lighthouse Performance score: 100
First Contentful Paint: <1s
Less JavaScript than SPA: 80%
Runtime content processing: Zero

Results and technical achievements

The website delivers exceptional performance and developer experience:

Perfect Lighthouse scores: 100/100 on Performance, Accessibility, Best Practices, SEO. This validates optimization strategy—every metric in green. Perfect scores rare for content-rich sites—usually trade content for performance. TechForge Digital achieves both.

Sub-second page loads: First Contentful Paint under 1 second on 3G networks. Time to Interactive under 2 seconds. Users experience content immediately—no blank screens, no loading spinners for standard navigation.

SEO excellence: Static generation enables perfect SEO—search engines receive fully-rendered HTML. Server-side metadata generation ensures proper Open Graph tags. Automatic sitemaps aid search engine discovery. Case studies and blog articles rank competitively in search results.

Developer experience: Adding new content is frictionless—create Markdown file, write content, commit. No database updates, no CMS login, no deployment configuration. Content preview in development server with hot reload. Syntax highlighting works identically in VS Code editor and published site.

Content flexibility: MDX enables rich content impossible with pure Markdown—embedded React components for interactive demos, custom statistics displays, syntax-highlighted code blocks, image galleries. Technical case studies include properly formatted code examples demonstrating implementation details.

Minimal maintenance: No database to maintain, no CMS to update, no plugin security vulnerabilities. Dependencies update via automated pull requests (Dependabot). Deployment is automatic via Git push. No server administration—Vercel handles infrastructure.

Build performance: Full site rebuild completes in 30 seconds. Incremental builds (changing single article) complete in 5 seconds. Hot reload in development is instant. Fast builds enable rapid iteration.

Hosting costs: Static site hosting via Vercel—near-zero cost at current traffic. No database hosting, no application server, no load balancers. CDN bandwidth included. Cost scales with traffic, not fixed monthly fee.

Type safety: TypeScript prevents runtime errors. Next.js App Router provides type-safe routing—invalid routes caught at compile time. MDX metadata extraction is type-checked—missing required fields cause build failures, not runtime crashes.

Accessibility: Semantic HTML, proper heading hierarchy, ARIA labels where needed, keyboard navigation support, focus visible states, reduced motion preferences respected. Accessibility built-in from start, not retrofitted.

Analytics ready: Static site supports analytics without performance penalty. Google Analytics, Vercel Analytics, or custom analytics integrate easily. No database queries impact page load time.

Content migration: When expanding content (adding new case study categories, new blog topics), no database migrations required. Simply create new directories following existing patterns. No schema changes, no data migration scripts.

Technical excellence and lessons learned

The project demonstrates modern web development best practices:

Embrace Server Components: React 19 Server Components fundamentally improve web application performance. Rendering on server eliminates client JavaScript for non-interactive content. This isn't optimization—it's architectural shift. Server Components should be default; client components should be exception for interactivity.

MDX for technical content: For technical case studies and documentation, MDX is superior to traditional CMSes. Markdown provides readable authoring. React components provide rich functionality. Syntax highlighting works perfectly. Version control tracks content changes. No database complexity.

Performance budgets: Perfect Lighthouse scores require discipline. Every dependency costs performance—evaluate carefully. Third-party scripts, analytics, fonts all impact scores. TechForge Digital proves rich content and perfect performance aren't mutually exclusive.

Design systems pay off: Tailwind CSS design system ensures consistency and accelerates development. Utility classes eliminate context switching between markup and CSS files. Custom design tokens provide flexibility. Responsive design is natural, not afterthought.

Static generation scales: Static sites handle traffic spikes effortlessly—every request serves cached HTML from CDN. No database load, no application server scaling. Traffic 10x overnight doesn't affect performance or hosting cost significantly.

Developer experience compounds: Excellent DX enables sustained productivity. Fast builds prevent context switching. Hot reload enables rapid iteration. Type safety prevents bugs. Good DX investment pays dividends continuously.

Content as code: Treating content as code (Markdown in Git repository) provides benefits: version control history, branching for drafts, pull request reviews, merge conflict resolution. Content and code workflows align. No separate CMS with different workflows.

Progressive enhancement: Ship HTML and CSS first, JavaScript only where needed. This philosophy—progressively enhance basic HTML with JavaScript for interactivity—results in fast, resilient applications. If JavaScript fails to load, content remains accessible.

The TechForge Digital website demonstrates that corporate websites can be both technically sophisticated and performant—modern frameworks, advanced content pipeline, comprehensive optimizations, and developer-friendly authoring combine to create platform that accurately represents the company's technical capabilities.

Follow us