Developer Portfolio
Wielojęzyczna wizytówka deweloperska oparta na Next.js 16, React 19 i MDX. Zero baz danych, maksymalna wydajność i doskonały Developer Experience.

Portfolio Deweloperskie: Architektura oparta na MDX, i18n i Next.js 16

Własne portfolio to poligon doświadczalny każdego programisty. Zamiast sięgać po gotowe szablony WordPressa czy ciężkie systemy Headless CMS, zbudowałem od podstaw ultralekką aplikację w Next.js. Projekt łączy nowoczesny stos technologiczny (React 19, App Router) z pełną internacjonalizacją (i18n) i systemem treści opartym na plikach Markdown/MDX.

📋 Metryki projektu

• Data wdrożenia: Początek 2026 r.
• Status: Ciągły rozwój (Continuous Deployment)
• Rola: Główny Architekt / Programista
• Cel: Stworzenie wydajnej, bezpiecznej i łatwej w utrzymaniu platformy prezentującej projekty, w 100% zarządzanej z poziomu repozytorium (Git).

🚀 Ewolucja projektu (Architektura)

1. System treści (MDX): Odejście od baz danych na rzecz next-mdx-remote i frontmattera (gray-matter). Treści są parsowane w build-time, co gwarantuje natychmiastowe ładowanie.
2. Internacjonalizacja (i18n): Wdrożenie biblioteki next-intl do obsługi wielojęzyczności na poziomie App Routera (dynamiczne ścieżki /[locale]).
3. Design System & Theming: Oparcie stylów o Tailwind CSS (v3) z natywną obsługą trybu ciemnego/jasnego przez next-themes.
4. Jakość i Testowanie: Rygorystyczny setup z Vitest, React Testing Library, ESLint i TypeScript, eliminujący błędy jeszcze przed fazą builda.

🎯 Problem biznesowy

Prezentacja projektów deweloperskich wymaga platformy, która sama w sobie jest dowodem umiejętności twórcy. Typowe portfolio oparte na CMS-ach wiąże się z kosztami hostingu bazy danych, koniecznością aktualizacji wtyczek i często przeciętną wydajnością, co negatywnie wpływa na Core Web Vitals i pierwsze wrażenie.

❌ „Bóle” i wyzwania operacyjne

• Narzut zarządzania: Klikanie przez panele CMS, by dodać jeden krótki projekt to strata czasu.
• Silosy językowe: Utrzymanie spójności między polską i angielską wersją strony bywa chaotyczne bez dobrego mechanizmu i18n.
• Wydajność (SEO): Opóźnienia w ładowaniu zasobów lub renderowanie po stronie klienta (CSR) zniechęcają roboty Google.

💡 Dlaczego to działa? (podejście inżynieryjne)

• Git-based CMS: Projekty trzymane są jako pliki .mdx bezpośrednio w repozytorium. Dodanie nowego projektu to po prostu push nowego pliku tekstowego — pełna kontrola wersji i idealny Developer Experience (DX).
• Static & Server Rendering: Zastosowanie Next.js z komponentami serwerowymi (RSC) i pre-renderowaniem generuje statyczny HTML. Do przeglądarki wysyłane jest minimum JavaScriptu.
• Zintegrowane SEO: Dynamicznie generowane pliki sitemap.ts, robots.ts oraz wsparcie dla JSON-LD (schema-dts) pozwalają wyszukiwarkom na głębokie zrozumienie struktury portfolio.
• Solidne fundamenty typu: Połączenie TypeScriptu z walidacją struktury frontmattera przy użyciu biblioteki Zod (zod).

📈 Wpływ na rozwój (ROI z architektury)

Podejście "wszystko w kodzie" zminimalizowało koszty i maksymalnie przyspieszyło proces publikacji.

"Przejście na architekturę opartą o pliki MDX i App Router wyeliminowało narzut CMS-a, dając pełną kontrolę nad kodem i treścią z poziomu IDE."

🛠️ Architektura i stack techniczny

• Core: Next.js 16.1.1 (App Router, Server Components), React 19
• Język: TypeScript 5 (Strict Mode), walidacja schematów Zod
• Styling: Tailwind CSS 3, PostCSS, Lucide React (ikony)
• Content: next-mdx-remote, gray-matter, remark-gfm
• i18n & Meta: next-intl, next-themes, dynamiczne metadane
• Jakość Kodu: Vitest, React Testing Library, ESLint, Prettier, Dependency Cruiser

🚀 Podsumowanie

Obecna forma portfolio udowadnia, że zaawansowana architektura nie musi być przekombinowana. Wykorzystanie MDX i Next.js 16 daje potężne, skalowalne rozwiązanie, które łączy wolność pisania w Markdownie z możliwościami nowoczesnego ekosystemu Reacta.