Next.js a été conçu pour une adoption progressive. Avec Next.js, vous pouvez continuer à utiliser votre code existant et ajouter autant (ou aussi peu) de React que nécessaire. En commençant modestement et en ajoutant progressivement plus de pages, vous pouvez éviter de perturber le développement des fonctionnalités en évitant une réécriture complète.
De nombreuses entreprises doivent moderniser leur stack technique pour réduire les coûts, augmenter la productivité des développeurs et offrir la meilleure expérience à leurs clients. Le développement axé sur les composants a grandement amélioré la vitesse de déploiement et la réutilisabilité des bases de code modernes.
Et avec plus de 8 millions de téléchargements/mois, React est le choix principal des développeurs pour une approche basée sur les composants. Next.js, le framework React pour la production, vous permet d'adopter React progressivement.
Motivation
Dans un monde de plus en plus mobile, l'amélioration et le suivi de vos Core Web Vitals sont essentiels pour réussir. Vos clients sont probablement répartis dans le monde entier avec des vitesses de connexion variables. Chaque seconde (ou milliseconde) supplémentaire passée à attendre le chargement d'une page ou l'exécution d'une action peut faire la différence entre une vente, une impression ou une conversion.
Si vous modernisez votre stack technique, vous pourriez faire face à des défis comme :
- Votre application contient des années de code legacy difficile à comprendre et qui prendrait des années (et des millions de dollars) à réécrire complètement.
- Vos temps de chargement de page continuent d'augmenter à mesure que la taille et la complexité de l'application grandissent. Les pages marketing simples sont aussi lentes que les pages les plus complexes.
- Vous essayez de faire évoluer votre équipe de développement, mais vous rencontrez des difficultés à intégrer plus de développeurs dans la base de code existante.
- Vos processus CI/CD et DevOps sont obsolètes, ce qui réduit la productivité des développeurs et rend difficile le déploiement sûr et fiable des nouvelles modifications.
- Votre application n'est pas adaptée aux appareils mobiles et il est impossible de mettre à jour le style global des pages sans casser d'autres parties de l'application.
Vous savez que vous devez faire quelque chose, mais il peut être difficile de comprendre par où commencer. En adoptant Next.js progressivement, vous pouvez commencer à résoudre les problèmes ci-dessus et transformer votre application. Discutons de quelques stratégies différentes pour intégrer Next.js dans votre stack technique existante.
Stratégies
Sous-chemin (Subpath)
La première stratégie consiste à configurer votre serveur ou proxy pour que tout ce qui se trouve sous un sous-chemin spécifique pointe vers une application Next.js. Par exemple, votre site web existant pourrait être sur example.com, et vous pourriez configurer votre proxy pour que example.com/store serve un magasin e-commerce Next.js.
En utilisant basePath, vous pouvez configurer les ressources et les liens de votre application Next.js pour qu'ils fonctionnent automatiquement avec votre nouveau sous-chemin /store. Comme chaque page dans Next.js est sa propre route autonome, les pages comme pages/products.js seront routées vers example.com/store/products dans votre application.
module.exports = {
basePath: '/store',
};Pour en savoir plus sur basePath, consultez notre documentation.
(Remarque : Cette fonctionnalité a été introduite dans Next.js 9.5 et versions ultérieures. Si vous utilisez des versions plus anciennes de Next.js, veuillez effectuer une mise à jour avant de l'essayer.)
Réécritures (Rewrites)
La deuxième stratégie consiste à créer une nouvelle application Next.js qui pointe vers l'URL racine de votre domaine. Ensuite, vous pouvez utiliser rewrites dans next.config.js pour que certains sous-chemins soient proxifiés vers votre application existante.
Par exemple, supposons que vous ayez créé une application Next.js à servir depuis example.com avec le next.config.js suivant. Maintenant, les requêtes pour les pages que vous avez ajoutées à cette application Next.js (par exemple /about si vous avez ajouté pages/about.js) seront traitées par Next.js, et les requêtes pour toute autre route (par exemple /dashboard) seront proxifiées vers proxy.example.com.
module.exports = {
async rewrites() {
return [
// nous devons définir une réécriture no-op pour déclencher la vérification
// de toutes les pages/fichiers statiques avant de tenter le proxying
{
source: '/:path*',
destination: '/:path*',
},
{
source: '/:path*',
destination: `https://proxy.example.com/:path*`,
},
];
},
};Pour en savoir plus sur les réécritures, consultez notre documentation.
Micro-frontends avec Monorepos et Sous-domaines
Next.js et Vercel facilitent l'adoption des micro-frontends et le déploiement sous forme de Monorepo. Cela vous permet d'utiliser des sous-domaines pour adopter de nouvelles applications progressivement. Quelques avantages des micro-frontends :
- Des bases de code plus petites, plus cohésives et maintenables.
- Des organisations plus évolutives avec des équipes découplées et autonomes.
- La possibilité de mettre à niveau, de mettre à jour ou même de réécrire des parties du frontend de manière plus progressive.
L'architecture d'un monorepo déployé sur Vercel.
Une fois votre monorepo configuré, poussez les modifications vers votre dépôt Git comme d'habitude et vous verrez les commits déployés sur les projets Vercel que vous avez connectés. Dites adieu aux processus CI/CD obsolètes.
Un exemple d'URLs de déploiement fournies par une intégration Git.
Conclusion
Next.js a été conçu pour une adoption progressive dans votre stack technique existante. La plateforme Vercel en fait une expérience collaborative avec des prévisualisations de déploiement pour chaque modification de code, en s'intégrant parfaitement avec GitHub, GitLab et Bitbucket.
- Prévisualisez instantanément les modifications localement avec Fast Refresh, augmentant la productivité des développeurs.
- Poussez les modifications pour créer une Prévisualisation de Branche, optimisée pour la collaboration avec les parties prenantes.
- Déployez en production avec Vercel en fusionnant la PR. Pas de DevOps compliqué.
Pour en savoir plus, lisez à propos des sous-chemins et des réécritures ou déployez un exemple avec des micro-frontends.