Meilleures pratiques pour construire et maintenir un projet Clean React/Next.js / Blogs / Perficient/ Best Practices React/ Next.JS/ React/ NextJS

Grâce à mon expérience dans la création et la maintenance d’une importante application React/Next.js, j’ai acquis des informations précieuses applicables aux projets. L’aspect le plus crucial de toute application est de fournir un produit qui offre une expérience utilisateur, une vitesse et une convivialité exceptionnelles. Il doit être évolutif et durable.

Je me fais un devoir de me souvenir de ces facteurs dans tout mon travail de développement, et j’espère qu’ils vous seront également bénéfiques !

1. Planifiez la structure des dossiers

Avant de démarrer toute application, un plan pour une bonne structure de dossiers est essentiel. Bien que cela dépende entièrement de la taille de l’équipe, de l’application et parfois des choix personnels, il est préférable de conserver une structure de dossiers appropriée. Pour référence, veuillez visiter ce blog qui explique 5 tailles d’application différentes et comment organiser les fichiers dans des dossiers pour le même. Pour NextJS, le routage basé sur les fichiers est suivi, de sorte que la structure des dossiers varie en conséquence. Essayez de garder le même propre et accessible.

2. Maintenir une bonne commande d’importation

Il y aura certainement un cas lors de l’écriture du code de réaction où le nombre d’importations occupe un grand nombre de lignes. Il est préférable de maintenir l’ordre à l’aide d’un linter ou de conserver la séquence d’importation en tant que BuiltIn -> ThirdParty -> Internal

3. Utilisez le texte dactylographié

Documents Next.js dire:

« Par défaut, Next.js effectuera une vérification de type dans le cadre de la construction. Nous vous recommandons d’utiliser la vérification du type d’éditeur de code pendant le développement. »

Tout en travaillant avec une grande base de code, Typescript peut aider les développeurs à éliminer les bogues avant même que l’application ne soit créée. Comme Next.js vérifie la définition de type au moment de la construction, la construction échouera si des incompatibilités de type sont trouvées dans le code.

4. Utilisation de composants fonctionnels

Pour éviter de se retrouver avec un code difficile à maintenir et à mettre à l’échelle, il est important d’apprendre divers modèles de composants. Cependant, il ne suffit pas de connaître les différents modèles. Comprendre quand utiliser chaque modèle pour résoudre des problèmes spécifiques est crucial. Chaque modèle a un but unique. Par exemple,

Les composants sans état, également appelés composants fonctionnels ou de présentation, restituent toujours la même chose ou uniquement ce qui leur est transmis via des accessoires. En tant que développeur, nous devons toujours créer des composants sans état.

De même, le modèle de composant composé peut éliminer le besoin de faire passer des accessoires à travers plusieurs niveaux de composants. Si vous voyez votre code passer par cinq niveaux de composants pour atteindre le composant prévu, il est peut-être temps de reconsidérer la façon dont vous organisez les composants.

5. Utilisez un Linter

Dans React/Next.js, ESLint a déjà été configuré, mais nous pouvons également le configurer entièrement par nous-mêmes ou étendre les règles d’un ensemble de règles préconfiguré.

Un linter observe le code JavaScript et nous rappelle les erreurs qui sont plus susceptibles d’être interceptées lors de l’exécution du code.

6. Écrire des tests maintenables

Lorsque l’application grandit, la complexité de l’application augmente également et dans une application complexe, la refactorisation devient difficile car il est très difficile de comprendre quels fichiers pourraient se casser en raison de modifications. Il est évident que l’écriture de tests maintenables prend du temps, mais je pense que les tests unitaires sont cruciaux pour les grandes applications car cela nous donne la confiance nécessaire pour refactoriser les fichiers. Généralement, j’utilise Jest and React Testing Library pour écrire des tests dans mon application.

7. Utilisez Dependabot pour mettre à jour les packages

Dans les cas où plusieurs équipes collaborent sur la même application, il est courant que les packages utilisés dans le projet deviennent obsolètes. Cela peut se produire parce que la mise à jour des packages peut impliquer la résolution de modifications avec rupture, ce qui peut prendre beaucoup de temps et potentiellement retarder la publication de nouvelles fonctionnalités. Néanmoins, s’appuyer sur des packages obsolètes peut entraîner des problèmes à long terme, tels que des vulnérabilités de sécurité et des problèmes de performances.

Heureusement, des outils comme Dependabot peuvent aider en automatisant le processus de mise à jour. Il peut vérifier les packages obsolètes et envoyer des demandes d’extraction mises à jour chaque fois que nécessaire.

8. Utilisation des importations dynamiques/du fractionnement du code/du chargement différé

Réagissez doc dit:

«La plupart des applications React verront leurs fichiers« groupés »à l’aide d’outils tels que Webpack, Rollup ou Browserify. Le regroupement est le processus qui consiste à suivre les fichiers importés et à les fusionner en un seul fichier : un « bundle ». Ce bundle peut ensuite être inclus sur une page Web pour charger une application entière à la fois.

C’est une excellente technique, mais avec la croissance de notre application, le bundle commence également à se développer. Ce bundle se charge toujours complètement, même lorsque l’utilisateur n’a besoin que d’un fragment de code. Cela entraîne des problèmes de performances car le chargement de notre application peut prendre beaucoup de temps.

Pour éviter cela, il existe une technique appelée fractionnement de code dans laquelle nous divisons notre bundle en morceaux de code dont notre utilisateur a besoin. Ceci est pris en charge par des bundlers comme Webpack et TurboPack. Diviser notre bundle permet de ne charger paresseux que les éléments dont l’utilisateur a besoin. React/Next.js prend en charge le chargement paresseux des bibliothèques externes avec next/dynamic, lazy et suspense. Vérifier ce pour référence.

9. Extraction de logique réutilisable dans des crochets personnalisés

Chaque fois que la logique est utilisée dans plusieurs composants, il est recommandé d’extraire la logique dans un hook personnalisé. Ce hook personnalisé encapsule la logique et renvoie la valeur souhaitée lors du passage de différentes entrées. Cela oblige un développeur à suivre DRY (ne vous répétez pas) et supprime la redondance du code dans l’application.

10. Traitement efficace des erreurs

En ce qui concerne la gestion des erreurs, il y a trois étapes principales à suivre :

• Attrapez les erreurs
• Gérer l’interface utilisateur selon les erreurs
• Enregistrer les erreurs

Pour détecter les erreurs, il est préférable d’envelopper nos composants sujets aux erreurs avec Error Boundary. Il gérera l’interface utilisateur dans sa partie rendu selon nos erreurs. L’inconvénient des limites d’erreur est qu’elles ne gèrent pas les erreurs dans les appels asynchrones, les gestionnaires d’événements et le rendu côté serveur. Pour ces exceptions, enroulez-les autour de blocs try-catch. Enfin, il est important de consigner correctement les erreurs et cela doit être fait dans un endroit dédié. Il est donc recommandé d’utiliser une bibliothèque tierce connue nommée ‘Sentry’. Les autres services de surveillance utilisés peuvent être Bugsnag ou Datadog.

11. Utilisez des outils comme Storybook pour visualiser les composants de l’interface utilisateur

Une façon de gérer les composants de l’interface utilisateur dans une base de code complexe consiste à utiliser Storybook, qui fournit une plate-forme pour visualiser et organiser les composants. Avec un grand nombre de composants dans une application, il peut être difficile d’identifier les composants obsolètes ou redondants. Les développeurs peuvent créer de nouveaux composants sans se rendre compte que des fonctionnalités similaires existent déjà. Storybook aide à garder une trace de tous les composants et de leurs interactions les uns avec les autres, permettant une meilleure gestion des composants de l’interface utilisateur dans une application. La configuration et l’intégration du livre d’histoires avec le code suivant existant sont également faciles.

12. Récupérez les données asynchrones à l’aide de React Query/SWR.

Les applications frontales récupèrent généralement les données d’un serveur principal pour les afficher sur la page. Pour ce faire dans React/Next, les développeurs peuvent utiliser l’API Fetch, Axios ou des bibliothèques similaires. Cependant, à mesure que l’application évolue, il peut devenir difficile de gérer l’état asynchrone des données. La création de fonctions utilitaires ou de wrappers autour de Fetch ou d’Axios pour gérer ces problèmes peut entraîner des problèmes de mise en cache et de performances, en particulier lorsque plusieurs développeurs travaillent sur la même application.

Pour éviter ces problèmes, les développeurs peuvent utiliser des packages tels que React Query ou SWR. Ces packages offrent des configurations par défaut prêtes à l’emploi, ce qui facilite la gestion de tâches telles que la mise en cache et les performances. Ces packages fournissent des configurations et des options par défaut, permettant aux développeurs de personnaliser leurs comportements en fonction des exigences de l’application. En récupérant et en mettant en cache les données asynchrones à partir des points de terminaison de l’API back-end, ces packages rendent l’état de l’application plus maintenable.

Avant de déployer une application Web en production, il est essentiel de suivre également diverses pratiques de routage et des principes de code propre. La documentation officielle fournit plusieurs directives pour ces pratiques, y compris l’utilisation de conventions de dénomination cohérentes, l’utilisation d’une notation abrégée pour les accessoires booléens, le maintien de l’unicité de l’accessoire « clé », l’utilisation de fragments et la mise en œuvre d’autres mesures de sécurité. Le respect de ces pratiques peut améliorer considérablement la qualité globale du code d’un développeur et garantir que son application est sécurisée et performante. Bien que les pratiques mentionnées soient fondamentales, il est important d’explorer et de mettre en œuvre en permanence les meilleures pratiques supplémentaires au fur et à mesure qu’elles émergent pour maintenir les normes les plus élevées de qualité du code et de sécurité des applications.