Comment j'ai construit mon portfolio avec Next.js

Pourquoi Next.js ?

Quand j'ai décidé de refondre mon portfolio, j'avais plusieurs critères en tête : performance, SEO et expérience développeur. Next.js cochait toutes les cases.

L'App Router de Next.js 16 apporte une approche moderne du routing avec les Server Components par défaut, ce qui permet un rendu côté serveur optimal sans sacrifier l'interactivité.

Les technologies choisies

Voici le stack technique que j'ai retenu :

• Next.js 16 - Framework React avec App Router
• Tailwind CSS v4 - Styling utility-first
• Framer Motion - Animations fluides
• TypeScript - Typage statique

Le Design System

J'ai opté pour un design dark minimal avec des panels en verre (glassmorphism) et des transitions subtiles. L'idée était de créer une expérience immersive sans surcharger visuellement.

// Exemple de glass panel
<div className="glass-panel rounded-2xl p-8">
  <h3 className="text-white text-xl">Contenu</h3>
</div>

Performance

Grâce aux Server Components et à l'optimisation automatique des images par Next.js, le site atteint des scores Lighthouse excellents :

• Performance : 98/100
• Accessibilité : 95/100
• SEO : 100/100

Le secret d'un bon portfolio n'est pas la complexité technique, mais la clarté du message.

Conclusion

Ce projet m'a permis d'explorer les dernières fonctionnalités de Next.js tout en créant un outil qui me représente. Si vous envisagez de créer votre propre portfolio, n'hésitez pas à me contacter pour en discuter.