Dans le cadre de mon alternance à La Capsule, j’ai des projets à réaliser afin de consolider certaines notions du développement web avec React. Ainsi, chaque mois, je m’engage dans un sprint de deux jours pour créer un projet plus ou moins conforme au sujet donné par La Capsule.
Aujourd’hui, je vais rapidement parler de mon projet lié à une notion dont je n’avais que vaguement entendu parler : les Styled Components.
Le projet
Le but de ce premier projet était de réaliser un clone de la page de Startpage avec Next.js, Styled Components, et polished.js. Il fallait permettre à ce clone d’avoir un thème sombre, un thème clair, et éventuellement un thème “high contrast”.
Il y avait également des objectifs tels que la redirection d’une recherche dans la page vers Google ou encore l’implémentation de la recherche Google directement dans la page via l’utilisation de l’API de Google.
Réalisation
Réaliser ce projet a été plutôt ardu. En effet, j’avais jusqu’ici l’habitude d’utiliser Next.js avec son “Page Router”, mais les dernières versions de Next.js (à partir de la version 13) apportent un nouveau système de routage : l’App Router. Relativement nouveau il y a quelques mois, il a été difficile de trouver de la documentation ou même des exemples d’implémentation basés sur l’App Router.
Si la mise en place des Styled Components a été compliquée, j’ai aussi été ralenti par la mise en place d’un contexte pour le thème du clone. En effet, j’ai eu beaucoup de mal à faire fonctionner les Styled Components en raison de nombreux conflits que je rencontrais avec le Server Side Rendering (SSR) de Next.js.
J’ai quand même réussi à obtenir une page plutôt ressemblante, même si j’ai dû mettre de côté quelques points du sujet (pas d’utilisation de polished.js, pas de “high contrast”, certains menus ou actions dans la page n’ont pas été reproduits, un thème clair peu harmonieux).
Conclusion
Un projet bien difficile, mais qui m’a permis de prendre en main cette nouvelle manière de créer une application avec Next.js. J’ai pu découvrir les Styled Components et la notion de CSS-in-JS, et redécouvrir la notion de contexte en React. Au moment où j’écris ces lignes, il est possible de trouver une page CSS-in-JS montrant comment implémenter les Styled Components avec Next.js et l’App Router. J’ai également remarqué dans la documentation des Styled Components qu’ils peuvent supporter le SSR avec l’aide du plugin Babel. J’aurais aimé le savoir plus tôt…
Le CSS-in-JS est utile à bien des égards, surtout avec une logique orientée composant, mais j’aurais tendance à ne pas opter pour Styled Components pour mes futurs projets. Les difficultés que j’ai rencontrées avec, et la nécessité de passer par un plugin externe pour supporter le SSR, m’ont un peu refroidi.
Néanmoins, les avantages en performance du CSS-in-JS sont trop intéressants pour faire l’impasse dessus, et j’ai repéré une nouvelle technologie qui mérite d’être approfondie davantage : Panda CSS. La documentation est propre et bien détaillée, et je l’emploierai sûrement dans un futur projet.
Le code de ce projet est disponible sur Github et hébergé chez Vercel.
Merci de m’avoir lu jusqu’ici et à la prochaine ! 👋🏾