My thoughts on the Next.js "App Router" & what I (don't) like about it

Summary

Dans cette vidéo, l'orateur partage ses impressions sur Next.js 14 et l'App Router après avoir mis à jour son cours. Il décrit les améliorations majeures apportées, comme une meilleure intégration entre le front-end et le back-end, facilitant la création d'applications React full-stack. Bien qu'il apprécie ces avancées, il exprime des réserves concernant la structure des dossiers, la lenteur du serveur de développement et des problèmes de cache et de bugs. Malgré ces défauts, il recommande vivement Next.js pour tout projet React impliquant un back-end, tout en suggérant d'explorer des alternatives comme Remix.

Takeaways

• 😀 Next.js version 14 introduit le router d'applications, une fonctionnalité qui facilite le développement d'applications React full-stack.
• 😀 Le router d'applications offre une intégration plus étroite entre le front-end et le back-end grâce aux composants React Server, ce qui simplifie le développement full-stack.
• 😀 Avec Next.js 14, la gestion de l'authentification, du cache et des requêtes de données est plus simple et plus sécurisée par rapport à l'ancienne approche avec le Pages Router.
• 😀 Le processus de récupération et de modification de données est désormais plus intégré, ce qui simplifie le travail pour les développeurs.
• 😀 Bien que Next.js 14 améliore la gestion des applications full-stack, il existe encore des problèmes de performances, notamment un serveur de développement lent et des bugs liés à certaines fonctionnalités.
• 😀 Un des problèmes majeurs de Next.js 14 réside dans la structure des dossiers, avec des noms de fichiers réservés (page.js, layout.js, etc.) qui rendent la navigation complexe dans les projets.
• 😀 Le comportement du cache dans Next.js 14 varie entre le développement et la production, ce qui peut entraîner des incohérences et des bugs difficiles à résoudre.
• 😀 Malgré ces problèmes, les améliorations apportées par Next.js 14 permettent de travailler plus facilement avec des applications full-stack complexes et d'éviter la gestion manuelle du fetching de données.
• 😀 Next.js est toujours le framework React le plus utilisé et recommandé pour les développeurs React, bien qu'il existe des alternatives comme Remix qui méritent d'être explorées.
• 😀 La recommandation principale du speaker est d'essayer Next.js 14 si vous souhaitez développer des applications React avec un backend intégré, tout en restant conscient des problèmes existants.

Q & A

Qu'est-ce que Next.js et pourquoi est-il si populaire ?

Next.js est un framework pour React qui simplifie la création d'applications full-stack. Il est populaire car il permet de développer des applications avec un backend intégré dans le même projet, ce qui réduit la complexité et améliore l'efficacité du développement.

Quelle est la principale différence entre le router 'pages' et le router 'app' dans Next.js ?

La principale différence réside dans l'intégration du frontend et du backend. Le router 'app' utilise des composants serveur React, ce qui permet une intégration plus étroite entre le frontend et le backend, rendant ainsi la gestion des données et des fonctionnalités côté serveur plus fluide.

Quelles améliorations le router 'app' dans Next.js 14 apporte-t-il ?

Le router 'app' facilite la création d'applications full-stack en simplifiant la récupération et la mutation des données, et en permettant une gestion plus cohérente des fonctionnalités comme l'authentification, tout en intégrant le frontend et le backend de manière plus fluide grâce aux composants serveur React.

Pourquoi l'intégration du backend et du frontend est-elle un atout majeur de Next.js 14 ?

Cette intégration rend le développement d'applications plus simple et plus cohérent. Les développeurs n'ont plus besoin d'écrire du code de récupération de données côté frontend ou d'utiliser des bibliothèques comme React Query, car tout est directement intégré dans le framework, ce qui simplifie le processus.

Quels sont les inconvénients de la structure de dossiers dans Next.js 14 ?

Un inconvénient notable est la nécessité d'utiliser des noms de fichiers réservés comme 'page.js', 'layout.js' et 'error.js' dans plusieurs dossiers, ce qui peut rendre le projet complexe à naviguer. Ces fichiers sont nécessaires pour définir les routes, mais leur multiplication dans de nombreux sous-dossiers peut rendre la gestion du projet moins claire.

Pourquoi la lenteur du serveur de développement dans Next.js 14 est-elle problématique ?

La lenteur du serveur de développement peut rendre l'expérience de développement moins fluide et augmenter le temps de cycle de développement. Cela peut ralentir la productivité des développeurs, surtout lors de la mise au point et du test des fonctionnalités.

Quelles sont les différences de comportement de mise en cache entre le développement et la production dans Next.js 14 ?

Next.js applique un cache agressif en production pour optimiser les performances, mais ce comportement diffère en développement. En développement, moins de cache est appliqué pour permettre de voir immédiatement les changements. Cette différence peut entraîner des comportements inattendus lors de la mise en production d'une application.

Quels types de bugs ont été rencontrés avec les fonctionnalités de Next.js 14 ?

Certains bugs concernent des fonctionnalités spécifiques comme l'interception et les routes parallèles, qui ne fonctionnent pas toujours comme prévu. Ces bugs peuvent perturber le flux de travail des développeurs, mais devraient être résolus dans de futures mises à jour.

Pourquoi Next.js 14 est-il recommandé malgré ses imperfections ?

Malgré quelques inconvénients, comme la lenteur du serveur de développement et des problèmes de mise en cache, Next.js 14 reste un choix incontournable pour la création d'applications full-stack. Il est simple à utiliser, avec une meilleure intégration du frontend et du backend, et il est largement adopté dans l'écosystème React.

Quelles alternatives à Next.js sont mentionnées dans le script, et comment se comparent-elles ?

Le script mentionne Remix et le framework TanStack comme alternatives à Next.js. Bien que Remix offre des fonctionnalités intéressantes pour les applications React, Next.js reste l'option la plus populaire et la plus utilisée, avec une large communauté et une intégration plus poussée entre le frontend et le backend.