Mon Portfolio Next.js 15 : 6 mois de développement, 10+ défis techniques résolus

6 mois. 127 commits. 10+ refactorisations.

Créer un portfolio de développeur en 2025 n'est plus juste une vitrine de projets - c'est un laboratoire technique qui doit prouver votre maîtrise des technologies de pointe. Voici mon retour d'expérience brutalement honnête sur la création de ce site avec Next.js 15, TypeScript et les best practices 2025.

L'architecture : App Router de Next.js 15

J'ai choisi l'App Router pour ses Server Components natifs et sa génération statique optimisée. Premier défi : migrer ma logique de routage depuis l'ancien système.

Structure révolutionnaire

La structure app/ révolutionne l'organisation :

app/
├── layout.tsx       # Layout principal
├── loading.tsx      # État de chargement
├── error.tsx        # Gestion d'erreurs
├── page.tsx         # Page d'accueil
├── blog/
│   ├── page.tsx     # Liste des articles
│   └── [slug]/      # Article dynamique
└── projects/
    └── [slug]/      # Projet dynamique

Résultats mesurables :

📉 40% de JavaScript client en moins
⚡ Lighthouse score de 98/100
🚀 First Contentful Paint : 0.8s

Astuce Pro : Co-localiser layout.tsx, loading.tsx et error.tsx simplifie la maintenance !

Le Design System : 23 composants modulaires

Mobile-first obligatoire en 2025 ! J'ai créé un système atomique avec Tailwind CSS.

Architecture des composants

Niveau	Exemples
Atoms (UI)	Button, Badge, Card, BackButton, ButtonLink
Molecules	BlogCard, ProjectCard, StatCard, MarkdownContent
Organisms	Header, Footer, Hero, PortfolioSection, BlogSection, PortfolioGrid
Sections	SkillsSection, StatsSection, ProfileSection, AboutResumeSection, TestimonialsSection, ThemeToggle

Total : 23 composants réutilisables

Technologies utilisées :

🎨 Variables CSS custom pour les couleurs
🔄 Composants polymorphes réutilisables
🍪 Gestion de thème persistante (cookies)

Le défi du mode sombre

Le mode sombre n'est plus un nice-to-have, c'est un standard.

Challenge résolu : Éviter le flash de thème au chargement

// Solution avec middleware custom
export function middleware(request: NextRequest) {
  const theme = request.cookies.get('theme')?.value || 'light';
  const response = NextResponse.next();
  response.headers.set('x-theme', theme);
  return response;
}

TypeScript Strict : 0 bug de typage

"strict": true dans tsconfig.json dès le début !

Interfaces bulletproof

Chaque entité a son interface TypeScript :

interface BlogPost {
  slug: string;
  title: string;
  content: string; // Markdown!
  category: "Développement" | "Design" | "Tutoriels" | "Veille Tech";
  tags: string[];
  author: Author;
  isHighlighted: boolean;
}

// Types discriminants pour les projets
type Project =
  | { type: "OpenSource"; githubUrl: string }
  | { type: "Client"; clientName: string }
  | { type: "Personal"; demoUrl: string };

Bénéfices :

✅ Code plus sûr
✅ Autocomplétion parfaite
✅ Refactoring sans stress

La discipline TypeScript paie à long terme - Ne négociez jamais là-dessus !

SEO 2025 : Du Next Level

Next.js 15 simplifie le SEO avec generateMetadata() pour chaque route.

Ma stack SEO complète

Métadonnées dynamiques par route
Images Open Graph auto-générées avec @vercel/og
Sitemap.xml dynamique basé sur les projets
Structured data JSON-LD pour les articles

// Génération automatique de métadonnées
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getBlogPostBySlug(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [\`/api/og?title=\${post.title}\`],
    },
  };
}

Résultats :

🔍 Indexation Google en 48h
⭐ Rich snippets actifs
📊 CTR augmenté de 35%

Micro-interactions : L'art subtil

Les animations font la différence entre 'fonctionnel' et 'mémorable'.

Ma stack d'animations

👁️ Intersection Observer API - Animations au scroll (natif, zéro dépendance)
✨ CSS Transforms + Transitions - Hovers et animations fluides
🎨 Tailwind CSS animations - Classes utilitaires pour transitions

Mon secret : Animations natives performantes

// AnimatedCard.tsx - Composant custom avec Intersection Observer
const observer = new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) {
      setTimeout(() => setIsVisible(true), delay);
      observer.unobserve(entry.target);
    }
  },
  { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }
);

/* Transitions Tailwind CSS */
.transition-all {
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

⚠️ Attention : Toujours respecter prefers-reduced-motion !

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Performance : De 82 à 98 sur Lighthouse

Les 7 optimisations qui changent tout

✅ Image optimization - next/image avec formats WebP/AVIF automatiques
✅ Priority loading - priority sur images critiques (hero, cover)
✅ Responsive images - sizes adaptatifs selon breakpoints
✅ Lazy loading - Images chargées progressivement au scroll
✅ Server Components - Rendu côté serveur par défaut
✅ Static Generation - Pages blog/projets pré-générées
✅ Minimal JS bundle - Composants légers, peu de dépendances

// Exemple : Image optimisée avec next/image
<Image
  src={post.coverImage}
  alt={post.title}
  fill
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  className="object-cover"
  priority // Pour les images above-the-fold
/>

Résultat final :

🎯 Performance : 98/100
⚡ Accessibility : 100/100
🔍 SEO : 100/100

Architecture Scalable

5 dossiers, 0 confusion, croissance infinie.

Structure Next.js 15 optimisée

src/
├── app/           # Routes (App Router)
├── components/    # Composants modulaires
├── lib/           # Utilitaires, helpers & données
├── types/         # Types TypeScript
└── theme/         # Configuration thème

Convention de nommage stricte

PascalCase pour les composants (BlogCard.tsx)
kebab-case pour les fichiers utils (blog-data.ts)
camelCase pour les variables et fonctions

Résultat : Codebase lisible même après 6 mois sans y toucher !

Les défis rencontrés (et résolus)

Top 3 des bugs les plus vicieux

Hydration mismatch avec le theme toggle
- Solution : Middleware + cookies server-side
Images non optimisées ralentissaient le LCP
- Solution : next/image + formats modernes
Re-renders inutiles sur les formulaires
- Solution : Server Actions + useActionState

Conclusion : L'excellence se partage

Ce portfolio n'est pas une fin, c'est un laboratoire d'innovation permanent.

Chaque feature est une expérimentation technique. Chaque optimisation repousse les limites du possible.

Les 3 principes qui m'ont guidé

🎯 Performance first - Toujours
💎 Code quality - Sans compromis
🚀 Innovation - Repousser les limites

En 2025, votre portfolio doit être votre meilleur argument technique - il prouve que vous maîtrisez les technologies de demain.

Le code source est sur GitHub : inspirez-vous, forkez, dépassez-moi ! L'excellence technique se partage. 🚀

Prochaines étapes : CMS headless, tests E2E, analytics avancés, et toujours plus d'optimisations !