Alternative-hydrogène: un site d'information sous Next.js

Alternative-hydrogène est un site d'information sur l'hydrogène de plus de 300 pages. Je vais vous présenter ici:

  • Les technologies utilisées
  • Les fonctionnalités
  • Les éléments de style un peu complexes
  • Les difficultés rencontrées

Je vais devoir utiliser le langage technique. Je vous propose donc, avant cela, un résumé compréhensible par un non-développeur.

Vous pouvez consulter le code, si autorisé, ici : https://github.com/AlexandreBaumann/Next--pages-router-

Résumé

J'avais utilisé la génération par IA pour produire ce site, initialement sous wordpress. Pour tester Next.js, un framework javascript base sur React, j'ai fait la migration sous cette technologie.

Il a d'abord fallu récupérer le contenu et le nettoyer avec Python. J'ai également utilisé ce langage pour générer la base de données. J'ai ensuite créé l'architecture du site avec Create-react-app et l'ai procéduralement construit avec le contenu extrait.

Le site, s'il est parfaitement fonctionnel, rapide, avec un design responsive et relativement joli souffre néanmoins de quelques défauts. Sur le plan technique, la gestion des données n'est pas satisfaisante: à chaque fois qu'une page est chargée, est également chargée la base de données (~500ko), ce qui l'alourdit. En termes de contenus, il faudra rajouter des pages de blog et repasser sur les pages spécifiques (les pages de catégories sont faites à la main). Ce sont des problèmes mineurs qui demanderont que j'y passe quelques jours.

Pour résumer, c'est un prototype de site Next.js et une expérience de migration de grande ampleur.

Présentation des technologies utilisées

Next.js

Le site repose sur Next.js, un framework javascript basé sur React.js. React est, avec Vue.js et Angular.js, l'un des langages de "single page application"? Comme les autres, il peut poser des problèmes de référencement et de performance. Next.js compense ce problème grâce à la génération de site statique ou côté serveur (server side rendering). On a ainsi la fluidité de navigation des SPA tout en conservant une conformité aux bonnes pratiques du référencement naturel (SEO).

Python

J'ai utilisé Python pour la migration et la génération de la base de données.

Dépendances

Parmi les dépendances, il y a notamment:

  • Sass pour permettre le SCSS.
  • Prettier pour le formattage automatique.
  • jsonwebtoken pour gérer le maintien de l'authentification.
  • Express pour gérer le server.hs, qui sert de point d'entrée à l'application.
  • Mongoose pour interagir avec la base de données MongoDB.
  • Next-sitemap pour générer un sitemap.
  • Dotenv pour les variables d'environnement.

J'utilise également Typescript pour avoir un code plus propre.

MongoDB

La base de donnée est MongoDB, hébergée sur MongoDB Atlas. La connexion avec elle se fait grâce à la dépendance Mongoose.

Autres

J'utilise le SCSS pour le style.

Fonctionnalités

Insertion de cartes thématisées

Un des composants (injectionposts) me permet d'insérer un certain nombre de cartes d'une catégorie (une propriété de la base de données). L'affichage peut être vertical ou horizontal.

La boucle de cartes

Le composant Cardloop permet d'insérer les cartes correspondant à tous les éléments d'une catégorie définie.

Le backoffice

J'ai créé un backoffice permettant d'enregistrer de nouveaux éléments dans la base de données, ainsi que l'API correspondante. Il est protégé par une authentification, qui génère un jsonwebtoken.

Breadcrumbs

Le site étant volumineux et pouvant s'avérer profond, j'ai créé un système de Breadcrumbs avec le balisage Schema adapté. Le texte affiché peut être modifié dans la base de données.

Filtre

Le composant cardfilter permet de créer plusieurs icones qui permettent de filtrer les données en fonction du filtre sélectionné. Il est utilisé pour gérer le blog.

Le style

Le seul élément notable ici sont les cartes. Il y en a de deux types:

  • Celles qui peuvent être individuelles, c'est le composant "smallcard", et qui sont utilisées par Injectionposts.
  • Celles du blog, qui prennent toute la largeur et sont appelées par Cardloop.

L'originalité est l'utilisation d' une bande blanche oblique pour donner l'impression que le bord droit de l'image est oblique, ce qui rend la carte plus dynamique.

Difficultés rencontrées

Sur le fonctionnement

Le principal problème a été la mise en ligne. En effet, mettre en ligne ce genre d'applications sur un hébergement basé sur le cpanel peut être un challenge.

Sur la mise en page

La mise en page est très basique. Il n'y a pas eu de difficulté particulière.