Avec la sortie du routeur d'applications Next.js, de nombreux développeurs sont impatients de migrer leurs projets existants. Dans cet article, je partagerai mon expérience de migration d'un projet vers le routeur d'applications Next.js, y compris les principaux défis, les changements et la manière dont vous pouvez rendre le processus plus fluide.

Il s'agit d'une approche incrémentielle, vous pouvez utiliser simultanément le routeur de pages et le routeur d'applications.

Pourquoi migrer vers le routeur d'application Next.js ?

L'App Router présente plusieurs avantages :

• Routage amélioré : routage plus propre basé sur le système de fichiers.
• Améliorations du rendu côté serveur (SSR) : gestion plus efficace des données côté serveur.
• Meta Handling : gestion simplifiée du référencement.
• Performances améliorées : optimisations intégrées pour divers composants.

En migrant, vous pouvez pérenniser votre application pour profiter des dernières fonctionnalités de Next.js.

Étapes pour migrer vers le routeur d'applications

• Mettre à jour les dépendances

La première étape consiste à vous assurer que votre Next.js et les dépendances associées sont à jour. Exécutez les commandes suivantes pour installer les dernières versions de Next.js et React :

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

• Structurer le dossier de l'application

L'App Router s'appuie sur le nouveau répertoire d'applications pour gérer les itinéraires, les métadonnées et les mises en page. Voici comment le structurer :

Dossier d'application : déplacez vos pages dans le dossier d'application. Chaque itinéraire possède désormais son propre dossier dédié contenant un fichier page.tsx.

Mises en page : ajoutez un fichier layout.tsx pour définir des mises en page pour des sections spécifiques de votre application. Ceci est particulièrement utile pour gérer les composants partagés tels que les barres de navigation ou les pieds de page.

• Modifications du routeur

L'un des changements les plus importants est le remplacement de next/router par next/navigation pour les fonctionnalités de routage et de navigation.

Remplacez toutes les importations next/router par next/navigation.
Mettez à jour les fonctions comme useRouter avec de nouveaux équivalents, tels que usePathname, useSearchParams et useRouter() le cas échéant.

• Refactoriser le code côté serveur

getServerSideProps et getStaticProps sont obsolètes dans le routeur d'applications.
Utilisez des composants de serveur asynchrone ou des actions de serveur pour récupérer des données dans les pages côté serveur.

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• Gestion des composants côté client

Composants clients :
Tout composant qui utilise des hooks React, des API de navigateur ou des interactions utilisateur doit être marqué « utiliser le client ». Cela indique à Next.js de les restituer côté client.

Composants du serveur :
Tout composant ne nécessitant pas d'interaction avec le navigateur peut rester en tant que composant serveur. Ceux-ci sont plus efficaces car ils évitent d’envoyer du JavaScript inutile au client.

• Gestion des bibliothèques externes

Si vous utilisez des bibliothèques externes comme React Query, AntDesign ou framer, etc. Vous devez les mettre à jour et apporter les modifications nécessaires. Je ne peux pas inclure tous les changements dans ce blog. Bien que les changements soient mentionnés dans leur documentation.

Défis courants lors de la migration

• Gestion des événements du routeur :

Avec le passage de next/router à next/navigation, la gestion des événements de routeur peut nécessiter une approche différente.
Assurez-vous de mettre à jour tous les écouteurs ou hooks d'événements de routeur en conséquence.

• Problèmes de changement de mise en page :

Lors de la migration de pages avec des mises en page complexes (en particulier celles avec des animations), vous remarquerez peut-être des changements de mise en page. Ajoutez un espace réservé ou conservez un alignement approprié côté serveur lui-même pour éviter les changements de disposition.

• Mises à jour des composants d'image et de lien :

Le routeur d'application introduit des modifications dans les composants Image et Lien.
Utilisez des codemods pour mettre à jour automatiquement les composants.
Pour le composant Image, supprimez les attributs obsolètes tels que responsive.

• Animations

Les composants liés à l'animation tels que les fichiers framer, swiper et lootie doivent être conservés côté client.

Conclusion

La migration vers le routeur d'applications Next.js comporte ses défis, mais également des améliorations significatives en termes de performances, d'évolutivité et de flexibilité. En divisant la migration en sections gérables (mises à jour au niveau de l'application, de la page et des fonctionnalités), j'ai pu aborder chaque changement systématiquement.

Faites-moi savoir si vous avez des questions ou des conseils concernant vos propres migrations !