Next.js contre React ? C'est un partenariat, pas une compétition

Les bibliothèques et frameworks JavaScript ne manquent pas pour les développeurs Web modernes. L'une des bibliothèques les plus omniprésentes est React, que Facebook (maintenant Meta) a créée pour aider à créer des applications riches en fonctionnalités. Les applications React s'exécutent traditionnellement dans les navigateurs Web, mais le framework Next.js étend les fonctionnalités de React côté serveur via l'environnement d'exécution JavaScript Node.js.

Dans cet article, nous examinerons Next.js et React afin que vous puissiez décider s'ils conviennent à votre prochain projet.

Next.js et React : JavaScript au niveau supérieur

Une enquête SlashData de 2022 a révélé qu'il y avait plus de 17 millions de programmeurs JavaScript dans le monde, à la tête d'un pack comprenant des langages populaires comme Python et Java. JavaScript peut être utilisé à la fois côté client et côté serveur, et cette polyvalence signifie que les développeurs peuvent créer des applications complètes à l'aide d'un seul langage de programmation.

L'introduction de bibliothèques JavaScript comme React et de frameworks comme Next.js a encore amélioré ce développement. Ces bibliothèques et frameworks fournissent des fonctionnalités qui simplifient l'intégration frontend et backend. De plus, les développeurs peuvent étendre les fonctionnalités JavaScript à l'aide de gestionnaires de packages tels que npm (le gestionnaire de packages Node.js) pour installer des bibliothèques et des outils JavaScript. Ces ressources fournissent des fonctionnalités sophistiquées qui réduisent la quantité de code que vous devez écrire vous-même.

L'extensibilité de JavaScript signifie qu'une connaissance approfondie de ses outils les plus courants est la clé de votre succès en tant que développeur Web.

Qu'est-ce que Next.js ?

Initialement publié en 2016 par Vercel, Next.js est un framework React open source qui fournit les éléments de base pour créer des applications Web hautes performances. De grandes entreprises l'ont depuis adopté, notamment Twitch, TikTok et Uber, pour n'en nommer que quelques-uns.

Next.js offre l'une des meilleures expériences de développement pour créer des applications rapides et optimisées pour le référencement. Voici quelques fonctionnalités de Next.js qui en font un framework de production exceptionnel :

• Capacités de rendu hybride
• Fractionnement de code automatique
• Optimisation des images
• Prise en charge intégrée des préprocesseurs CSS et des bibliothèques CSS-in-JS
• Routage intégré

Ces fonctionnalités aident les développeurs Next.js à gagner un temps considérable sur la configuration et les outils. Vous pouvez passer directement à la création de votre application, qui peut prendre en charge des projets tels que les suivants :

• Magasins de commerce électronique
• Blogues
• Tableaux de bord
• Demandes d'une seule page
• Interfaces utilisateur interactives
• Sites Web statiques

Qu'est-ce que Réagir ?

React est une bibliothèque JavaScript utilisée pour créer des interfaces utilisateur dynamiques. En plus de créer des interfaces Web, vous pouvez créer des applications mobiles à l'aide de React Native.

Certains avantages de l'utilisation de React incluent :

• Performances améliorées : au lieu de mettre à jour chaque composant dans le DOM, React utilise un DOM virtuel pour mettre à jour uniquement les composants modifiés.
• Fortement basé sur des composants : une fois que vous avez créé un composant, vous pouvez le réutiliser à plusieurs reprises.
• Débogage facile : les applications React utilisent un flux de données unidirectionnel - des composants parents aux composants enfants uniquement.

Next.js vs Réagir

Bien que les développeurs utilisent souvent Next.js et React dans le même but, il existe des différences fondamentales entre les deux.

Facilité d'utilisation

Il est facile de commencer avec Next.js et React. Chacun nécessite l'exécution de commandes uniques dans votre terminal à l'aide npx , qui fait partie du npm pour Node.js.

Pour Next.js, la commande la plus simple est :

 npx create-next-app

Sans arguments supplémentaires pour create-next-app , l'installation se poursuivra en mode interactif. Il vous sera demandé un nom de projet (qui sera utilisé pour le répertoire du projet) et si vous souhaitez inclure la prise en charge de TypeScript et du linter de code ESLint.

Cela ressemblera à ceci :

Lors de l'initialisation d'une instance React, la commande la plus simple inclut un nom pour le répertoire du projet :

 npx create-react-app new-app

Cela génère un dossier contenant toutes les configurations et dépendances initiales nécessaires :

Bien que les deux facilitent le démarrage, rappelez-vous que Next.js est construit sur React. Donc, vous ne pouvez pas apprendre Next.js sans d'abord apprendre React et comprendre comment cela fonctionne. Heureusement, React bénéficie d'une courbe d'apprentissage douce et est idéal pour les débutants.

Il est également important de noter que React est relativement peu structuré. Vous devez installer et configurer un routeur React et décider comment gérer la récupération des données, l'optimisation des images et le fractionnement du code. Cette configuration nécessite que vous installiez et configuriez des bibliothèques et des outils supplémentaires.

En revanche, Next.js est livré avec ces outils préinstallés et préconfigurés. Avec Next.js, tout fichier ajouté au dossier pages sert automatiquement de route. Grâce à cette prise en charge intégrée, il est plus facile de travailler avec Next.js au quotidien, ce qui vous permet de commencer immédiatement à coder la logique de votre application.

Fonctionnalités Next.js et React

Étant donné que Next.js est basé sur React, les deux partagent certaines fonctionnalités. Cependant, Next.js va plus loin et inclut des fonctionnalités supplémentaires telles que le routage, le fractionnement de code, le pré-rendu et la prise en charge de l'API dès la sortie de la boîte. Ce sont des fonctionnalités que vous devrez configurer vous-même lors de l'utilisation de React.

Récupération de données

React rend les données côté client. Le serveur envoie des fichiers statiques au navigateur, puis le navigateur récupère les données des API pour remplir l'application. Ce processus réduit les performances de l'application et offre une mauvaise expérience utilisateur car l'application se charge lentement. Next.js résout ce problème grâce au pré-rendu.

Avec le pré-rendu, le serveur effectue les appels d'API nécessaires et récupère les données avant d'envoyer l'application au navigateur. En tant que tel, le navigateur reçoit des pages Web prêtes à être affichées.

Le pré-rendu peut faire référence à la génération de site statique (SSG) ou au rendu côté serveur (SSR). Dans SSG, les pages HTML sont générées au moment de la construction et réutilisées pour plusieurs requêtes. Next.js peut générer des pages HTML avec ou sans données.

Voici un exemple de la manière dont Next.js génère des pages sans données :

 function App() { return <div>Welcome</div> } export default App

Pour les pages statiques qui consomment des données externes, utilisez la fonction getStaticProps() . Une fois que vous avez exporté getStaticProps() à partir d'une page, Next.js pré-rendra la page en utilisant les accessoires qu'il renvoie. Cette fonction s'exécute toujours sur le serveur, utilisez donc getStaticProps() lorsque les données utilisées par la page sont disponibles au moment de la construction. Par exemple, vous pouvez l'utiliser pour récupérer des articles de blog à partir d'un CMS.

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

Dans les situations où les chemins de page dépendent de données externes, utilisez la fonction getStaticPaths() . Ainsi, pour créer un chemin basé sur l'ID de publication, exportez le getStaticPaths() de la page.

Par exemple, vous pouvez exporter getStaticPaths() à partir de pages/posts/[id].js comme indiqué ci-dessous.

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

getStaticPaths() est souvent associé à getStaticProps() . Dans cet exemple, vous utiliseriez getStaticProps() pour récupérer les détails de l'ID dans le chemin.

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

Dans SSR, les données sont récupérées à l'heure demandée et envoyées au navigateur. Pour utiliser SSR, exportez la fonction props getServerSide() à partir de la page que vous souhaitez afficher. Le serveur appelle cette fonction à chaque requête, ce qui rend SSR utile pour les pages qui consomment des données dynamiques.

Par exemple, vous pouvez l'utiliser pour récupérer des données à partir d'une API de nouvelles.

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

Les données sont récupérées à chaque requête et transmises au composant News via des accessoires.

Fractionnement de code

Le fractionnement du code consiste à diviser le code en morceaux que le navigateur peut charger à la demande. Cela réduit la quantité de code envoyée au navigateur lors du chargement initial, car le serveur n'envoie que ce dont l'utilisateur a besoin. Les bundles comme Webpack, Rollup et Browserify prennent en charge le fractionnement de code dans React.

Next.js prend en charge le fractionnement de code prêt à l'emploi.

Avec Next.js, chaque page est divisée en code et l'ajout de pages à l'application n'augmente pas la taille du bundle. Next.js prend également en charge les importations dynamiques, ce qui vous permet d'importer des modules JavaScript et de les charger dynamiquement pendant l'exécution. Les importations dynamiques contribuent à accélérer la vitesse des pages car les bundles sont chargés paresseusement.

Par exemple, dans le composant Home ci-dessous, le serveur n'inclura pas le composant hero dans le bundle initial.

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

Au lieu de cela, l'élément de secours du suspense sera rendu avant le chargement du composant héros.

Prise en charge de l'API dans Next.js vs React

La fonctionnalité de routage de l'API Next.js vous permet d'écrire du code backend et frontend dans la même base de code. Toute page enregistrée dans le dossier /pages/api/ est mappée sur la route /api/* et Next.js la traite comme un point de terminaison d'API.

Par exemple, vous pouvez créer une route d'API pages/api/user.js qui renvoie le nom de l'utilisateur actuel comme ceci :

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

Si vous visitez l' URL https://app-url/api/user , vous verrez l'objet username.

 { username: 'Jane' }

Les routes d'API sont utiles lorsque vous souhaitez masquer l'URL d'un service auquel vous accédez ou que vous souhaitez garder secrètes les variables d'environnement sans coder une application backend entière.

Performance

Next.js est sans aucun doute supérieur dans sa capacité à créer des applications plus performantes avec un processus simplifié. Les applications SSR et SSG Next.js fonctionnent mieux que les applications React de rendu côté client (CSR). En récupérant les données sur le serveur et en envoyant tout ce dont le navigateur a besoin pour le rendu, Next.js élimine le besoin d'une requête de récupération de données aux API. Cela signifie des temps de chargement plus rapides.

De plus, parce que Next.js prend en charge le routage côté client. Le navigateur n'a pas besoin de récupérer les données du serveur chaque fois qu'un utilisateur navigue vers un autre itinéraire. De plus, le composant d'image Next.js permet l'optimisation automatique de l'image. Les images ne se chargent que lorsqu'elles entrent dans la fenêtre. Dans la mesure du possible, Next.js sert également des images dans des formats modernes comme WebP.

Next.js fournit également des optimisations de polices, une prélecture de route intelligente et des optimisations de regroupement. Ces optimisations ne sont pas automatiquement disponibles dans React.

Soutien

Parce que React existe depuis plus longtemps que Next.js, il a une communauté plus étendue. Cependant, de nombreux développeurs React adoptent Next.js, de sorte que la communauté ne cesse de croître. Les développeurs trouvent plus facilement des solutions existantes aux problèmes qu'ils rencontrent plutôt que d'avoir à créer des solutions à partir de zéro.

Next.js propose également une excellente documentation avec des exemples complets faciles à comprendre. Malgré sa popularité, la documentation de React n'est pas aussi navigable.

Résumé

Choisir Next.js ou React dépend des exigences d'une application.

Next.js améliore les capacités de React en fournissant une structure et des outils qui améliorent les performances. Ces outils, tels que le routage, le fractionnement de code et l'optimisation des images, sont intégrés à Next.js, ce qui signifie que les développeurs n'ont rien à configurer manuellement. Grâce à ces fonctionnalités, Next.js est facile à utiliser et les développeurs peuvent commencer à coder la logique métier immédiatement.

En raison des différentes options de rendu, Next.js convient aux applications rendues côté serveur ou aux applications qui combinent la génération statique et le rendu côté serveur Node.js. De plus, grâce à la fonctionnalité d'optimisation fournie par Next.js, il est parfait pour les sites qui doivent être rapides, comme les magasins de commerce électronique.

React est une bibliothèque JavaScript qui peut vous aider à créer et à faire évoluer des applications front-end robustes. Sa syntaxe est également simple, en particulier pour les développeurs ayant une formation en JavaScript. De plus, vous contrôlez les outils que vous utilisez dans votre application et comment vous les configurez.

Vous planifiez votre propre application dominante dans le monde ? Découvrez l'approche de Kinsta en matière d'hébergement d'applications Node.js pour les services prenant en charge React et Next.js.