{"id":66253,"date":"2023-02-13T10:00:35","date_gmt":"2023-02-13T09:00:35","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=66253&#038;preview=true&#038;preview_id=66253"},"modified":"2024-01-23T09:15:17","modified_gmt":"2024-01-23T08:15:17","slug":"nextjs-vs-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/","title":{"rendered":"Next.js vs React ? C&rsquo;est un partenariat, pas une comp\u00e9tition"},"content":{"rendered":"<p>Les d\u00e9veloppeurs web modernes ne manquent pas de <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">biblioth\u00e8ques et de frameworks JavaScript<\/a>. L&rsquo;une des biblioth\u00e8ques les plus omnipr\u00e9sentes est <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a>, que Facebook (maintenant Meta) a cr\u00e9\u00e9e pour aider \u00e0 construire des applications riches en fonctionnalit\u00e9s. Les applications React s&rsquo;ex\u00e9cutent traditionnellement dans les navigateurs web, mais le framework <a href=\"https:\/\/kinsta.com\/fr\/blog\/next-js\/\">Next.js<\/a> \u00e9tend la fonctionnalit\u00e9 React au c\u00f4t\u00e9 serveur par le biais de l&rsquo;environnement d&rsquo;ex\u00e9cution JavaScript <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Node.js<\/a>.<\/p>\n<p>Dans cet article, nous allons examiner Next.js et React afin que vous puissiez d\u00e9cider s&rsquo;ils conviennent \u00e0 votre prochain projet.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Next.js et React : JavaScript au niveau sup\u00e9rieur<\/h2>\n<p>Une enqu\u00eate SlashData de 2022 a r\u00e9v\u00e9l\u00e9 qu&rsquo;il y a plus de 17 millions de programmeurs <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a> dans le monde, en t\u00eate d&rsquo;un peloton qui comprend des langages populaires comme Python et Java. JavaScript peut \u00eatre utilis\u00e9 \u00e0 la fois du c\u00f4t\u00e9 client et du c\u00f4t\u00e9 serveur, et cette polyvalence permet aux d\u00e9veloppeurs de cr\u00e9er des applications compl\u00e8tes \u00e0 l&rsquo;aide d&rsquo;un seul langage de programmation.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/programming-language-community-sizes-worldwide-2022.png\" alt=\"Enqu\u00eate Slash\/Data sur les langages utilis\u00e9s par les programmeurs en 2022.\" width=\"960\" height=\"908\"><figcaption class=\"wp-caption-text\">Enqu\u00eate Slash\/Data sur les langages utilis\u00e9s par les programmeurs en 2022. (Source : <a href=\"https:\/\/www.statista.com\/statistics\/1241923\/worldwide-software-developer-programming-language-communities\/\" target=\"_blank\" rel=\"noopener noreferrer\">Statista<\/a>)<\/figcaption><\/figure>\n<p>L&rsquo;introduction de biblioth\u00e8ques JavaScript comme React et de <a href=\"https:\/\/kinsta.com\/javascript\/#frameworks\">frameworks<\/a> comme Next.js a encore renforc\u00e9 ce d\u00e9veloppement. Ces biblioth\u00e8ques et frameworks offrent des fonctionnalit\u00e9s qui simplifient l&rsquo;int\u00e9gration du frontend et du backend. En outre, les d\u00e9veloppeurs peuvent \u00e9tendre les capacit\u00e9s de JavaScript en utilisant des gestionnaires de paquets comme <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">npm<\/a> (le gestionnaire de paquets Node.js) pour installer des biblioth\u00e8ques et des outils JavaScript. Ces ressources fournissent des fonctionnalit\u00e9s sophistiqu\u00e9es qui r\u00e9duisent la quantit\u00e9 de code que vous devez \u00e9crire vous-m\u00eame.<\/p>\n<p>L&rsquo;extensibilit\u00e9 de JavaScript signifie qu&rsquo;une connaissance approfondie de ses outils les plus courants est la cl\u00e9 de votre r\u00e9ussite en tant que d\u00e9veloppeur web.<\/p>\n<h2>Qu&rsquo;est-ce que Next.js ?<\/h2>\n<p>Initialement publi\u00e9 en 2016 par Vercel, Next.js est un framework React open source qui fournit les blocs de construction permettant de cr\u00e9er des <a href=\"https:\/\/kinsta.com\/fr\/blog\/architecture-application-web\/\">applications web<\/a> performantes. De grandes entreprises l&rsquo;ont depuis adopt\u00e9, notamment Twitch, TikTok et Uber, pour n&rsquo;en citer que quelques-unes.<\/p>\n<p>Next.js offre l&rsquo;une des meilleures exp\u00e9riences de d\u00e9veloppeur pour cr\u00e9er des applications rapides et adapt\u00e9es au r\u00e9f\u00e9rencement. Vous trouverez ci-dessous quelques caract\u00e9ristiques de Next.js qui en font un framework de production exceptionnel :<\/p>\n<ul>\n<li>Capacit\u00e9s de rendu hybride<\/li>\n<li>Fractionnement automatique du code<\/li>\n<li>Optimisation des images<\/li>\n<li>Prise en charge int\u00e9gr\u00e9e des pr\u00e9processeurs CSS et des biblioth\u00e8ques CSS-in-JS<\/li>\n<li>Routage int\u00e9gr\u00e9<\/li>\n<\/ul>\n<p>Ces fonctionnalit\u00e9s permettent aux d\u00e9veloppeurs Next.js de gagner un temps consid\u00e9rable sur la configuration et l&rsquo;outillage. Vous pouvez passer directement \u00e0 la construction de votre application, qui pourrait prendre en charge des projets tels que les suivants :<\/p>\n<ul>\n<li>Magasins de commerce \u00e9lectronique<\/li>\n<li>Blogs<\/li>\n<li>Tableaux de bord<\/li>\n<li>Applications \u00e0 page unique<\/li>\n<li>Interfaces utilisateur d&rsquo;interaction<\/li>\n<li>Sites web statiques<\/li>\n<\/ul>\n<h2>Qu&rsquo;est-ce que React ?<\/h2>\n<p>React est une biblioth\u00e8que JavaScript utilis\u00e9e pour cr\u00e9er des interfaces utilisateur dynamiques. En plus de cr\u00e9er des interfaces web, vous pouvez construire des applications mobiles en utilisant React Native.<\/p>\n<p>Voici quelques avantages de l&rsquo;utilisation de React :<\/p>\n<ul>\n<li><strong>Des performances am\u00e9lior\u00e9es :<\/strong> Au lieu de mettre \u00e0 jour chaque composant dans le DOM, React utilise un DOM virtuel pour mettre \u00e0 jour uniquement les composants modifi\u00e9s.<\/li>\n<li><strong>Fortement bas\u00e9 sur les composants : <\/strong>Une fois que vous avez cr\u00e9\u00e9 un composant, vous pouvez le r\u00e9utiliser \u00e0 plusieurs reprises.<\/li>\n<li><strong>D\u00e9bogage facile :<\/strong> Les applications React utilisent un flux de donn\u00e9es unidirectionnel &#8211; des composants parents aux composants enfants uniquement.<\/li>\n<\/ul>\n<h2>Next.js vs React<\/h2>\n<p>Bien que les d\u00e9veloppeurs utilisent souvent Next.js et React dans le m\u00eame but, il existe quelques diff\u00e9rences fondamentales entre les deux.<\/p>\n<h3>Facilit\u00e9 d&rsquo;utilisation<\/h3>\n<p>Il est facile de d\u00e9marrer avec Next.js et React. Chacun d&rsquo;entre eux n\u00e9cessite l&rsquo;ex\u00e9cution de commandes uniques dans votre terminal \u00e0 l&rsquo;aide de <code>npx<\/code>, qui fait partie de <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-node-js\/\">npm pour Node.js<\/a>.<\/p>\n<p>Pour Next.js, la commande la plus simple est :<\/p>\n<pre><code>npx create-next-app<\/code><\/pre>\n<p>Sans arguments suppl\u00e9mentaires pour <code>create-next-app<\/code>, l&rsquo;installation se d\u00e9roulera en mode interactif. Il vous sera demand\u00e9 un nom de projet (qui sera utilis\u00e9 pour le r\u00e9pertoire du projet), et si vous souhaitez inclure la prise en charge de TypeScript et du linter de code ESLint.<\/p>\n<p>Cela ressemblera \u00e0 quelque chose comme ceci :<\/p>\n<figure style=\"width: 1040px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/using-npx-to-create-next-app.png\" alt=\"Cr\u00e9ation d'une application Next.js en mode interactif.\" width=\"1040\" height=\"467\"><figcaption class=\"wp-caption-text\">Cr\u00e9ation d&rsquo;une application Next.js en mode interactif.<\/figcaption><\/figure>\n<p>Lors de l&rsquo;initialisation d&rsquo;une instance React, la commande la plus simple inclut un nom pour le r\u00e9pertoire du projet :<\/p>\n<pre><code>npx create-react-app <strong>new-app<\/strong><\/code><\/pre>\n<p>Cela g\u00e9n\u00e8re un dossier contenant toutes les configurations initiales et d\u00e9pendances n\u00e9cessaires :<\/p>\n<figure style=\"width: 1040px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/using-npx-to-create-react-app.png\" alt=\"Cr\u00e9ation d'un projet React sur la ligne de commande du terminal.\" width=\"1040\" height=\"756\"><figcaption class=\"wp-caption-text\">Cr\u00e9ation d&rsquo;un projet React sur la ligne de commande du terminal.<\/figcaption><\/figure>\n<p>Bien que ces deux m\u00e9thodes permettent de commencer facilement, n&rsquo;oubliez pas que Next.js est construit au-dessus de React. Vous ne pouvez donc pas apprendre Next.js sans d&rsquo;abord apprendre React et comprendre son fonctionnement. Heureusement, React offre une courbe d&rsquo;apprentissage douce et est id\u00e9al pour les d\u00e9butants.<\/p>\n<p>Il est \u00e9galement important de noter que React est relativement peu structur\u00e9. Vous devez installer et configurer un routeur React et d\u00e9cider comment g\u00e9rer la r\u00e9cup\u00e9ration des donn\u00e9es, l&rsquo;optimisation des images et le fractionnement du code. Cette configuration vous oblige \u00e0 installer et \u00e0 configurer des biblioth\u00e8ques et des outils suppl\u00e9mentaires.<\/p>\n<p>En revanche, Next.js est livr\u00e9 avec ces outils pr\u00e9install\u00e9s et pr\u00e9-configur\u00e9s. Avec Next.js, tout fichier ajout\u00e9 au dossier <code>pages<\/code> sert automatiquement d&rsquo;itin\u00e9raire. Gr\u00e2ce \u00e0 cette prise en charge int\u00e9gr\u00e9e, Next.js est plus facile \u00e0 utiliser au quotidien, ce qui vous permet de commencer imm\u00e9diatement \u00e0 coder la logique de votre application.<\/p>\n\n<h2>Next.js et les fonctionnalit\u00e9s de React<\/h2>\n<p>Comme Next.js est bas\u00e9 sur React, les deux partagent certaines fonctionnalit\u00e9s. Cependant, Next.js va un peu plus loin et inclut des fonctionnalit\u00e9s suppl\u00e9mentaires telles que le routage, le fractionnement du code, le pr\u00e9-rendu et la prise en charge des API d\u00e8s la sortie de l&#8217;emballage. Ce sont des fonctionnalit\u00e9s que vous devrez configurer vous-m\u00eame lorsque vous utilisez React.<\/p>\n<h3>R\u00e9cup\u00e9ration de donn\u00e9es<\/h3>\n<p>React rend les donn\u00e9es du c\u00f4t\u00e9 client. Le serveur envoie des fichiers statiques au navigateur, puis ce dernier va chercher les donn\u00e9es dans les API pour alimenter l&rsquo;application. Ce processus r\u00e9duit les performances de l&rsquo;application et offre une mauvaise exp\u00e9rience utilisateur puisque l&rsquo;application se charge lentement. Next.js r\u00e9sout ce probl\u00e8me gr\u00e2ce au pr\u00e9-rendu.<\/p>\n<p>Avec le pr\u00e9-rendu, le serveur effectue les appels d&rsquo;API n\u00e9cessaires et r\u00e9cup\u00e8re les donn\u00e9es avant d&rsquo;envoyer l&rsquo;application au navigateur. Ainsi, le navigateur re\u00e7oit des pages web pr\u00eates \u00e0 \u00eatre rendues.<\/p>\n<p>Le pr\u00e9-rendu peut faire r\u00e9f\u00e9rence \u00e0 la g\u00e9n\u00e9ration de sites statiques (SSG) ou au rendu c\u00f4t\u00e9 serveur (SSR). Dans la SSG, les pages HTML sont g\u00e9n\u00e9r\u00e9es au moment de la construction et r\u00e9utilis\u00e9es pour de multiples requ\u00eates. Next.js peut g\u00e9n\u00e9rer des pages <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a> avec ou sans donn\u00e9es.<\/p>\n<p>Vous trouverez ci-dessous un exemple de la fa\u00e7on dont Next.js g\u00e9n\u00e8re des pages sans donn\u00e9es :<\/p>\n<pre><code class=\"language-js\">function App() {\n  return &lt;div&gt;Welcome&lt;\/div&gt;\n}\nexport default App<\/code><\/pre>\n<p>Pour les pages statiques qui consomment des donn\u00e9es externes, utilisez la fonction <code>getStaticProps()<\/code>. Une fois que vous exportez <code>getStaticProps()<\/code> d&rsquo;une page, Next.js effectuera un pr\u00e9-rendu de la page en utilisant les props qu&rsquo;elle renvoie. Cette fonction s&rsquo;ex\u00e9cute toujours sur le serveur, utilisez donc <code>getStaticProps()<\/code> lorsque les donn\u00e9es que la page utilise sont disponibles au moment de la construction. Par exemple, vous pouvez l&rsquo;utiliser pour r\u00e9cup\u00e9rer des articles de blog \u00e0 partir d&rsquo;un CMS.<\/p>\n<pre><code class=\"language-js\">const Posts= ({ posts }) =&gt; {\n    return (\n        &lt;div className={styles.container}&gt;\n            {posts.map((post, index) =&gt; (\n                \/\/ render each post\n            ))}\n        &lt;\/div&gt;\n    );\n  };\n\nexport const getStaticProps = async () =&gt; {\n    const posts = getAllPosts();\n    return {\n        props: { posts },\n    };\n};<\/code><\/pre>\n<p>Dans les situations o\u00f9 les chemins de la page d\u00e9pendent de donn\u00e9es externes, utilisez la fonction <code>getStaticPaths()<\/code>. Ainsi, pour cr\u00e9er un chemin bas\u00e9 sur l&rsquo;ID de l&rsquo;article, exportez le <code>getStaticPaths()<\/code> de la page.<\/p>\n<p>Par exemple, vous pourriez exporter <code>getStaticPaths()<\/code> \u00e0 partir de <strong>pages\/posts\/[id].js<\/strong> comme indiqu\u00e9 ci-dessous.<\/p>\n<pre><code class=\"language-js\">export getStaticPaths = async()  =&gt; {\n  \/\/ Get all the posts\n  const posts = await getAllPosts()\n\n  \/\/ Get the paths you want to pre-render based on posts\n  const paths = posts.map((post) =&gt; ({\n    params: { id: post.id },\n  }))\n  return { paths, fallback: false }\n}<\/code><\/pre>\n<p><code>getStaticPaths()<\/code> est souvent associ\u00e9 \u00e0 <code>getStaticProps()<\/code>. Dans cet exemple, vous utiliseriez <code>getStaticProps()<\/code> pour r\u00e9cup\u00e9rer les d\u00e9tails de l&rsquo;ID dans le chemin.<\/p>\n<pre><code class=\"language-js\">export const getStaticProps = async ({ params }) =&gt; {\n    const post = await getSinglePost(params.id);\n    return {\n        props: { post }\n    };\n};<\/code><\/pre>\n<p>Dans SSR, les donn\u00e9es sont r\u00e9cup\u00e9r\u00e9es au moment demand\u00e9 et envoy\u00e9es au navigateur. Pour utiliser SSR, exportez la fonction props <code>getServerSide()<\/code> de la page que vous souhaitez rendre. Le serveur appelle cette fonction \u00e0 chaque requ\u00eate, ce qui rend SSR utile pour les pages qui consomment des donn\u00e9es dynamiques.<\/p>\n<p>Par exemple, vous pouvez l&rsquo;utiliser pour r\u00e9cup\u00e9rer des donn\u00e9es \u00e0 partir d&rsquo;une API de nouvelles.<\/p>\n<pre><code class=\"language-js\">const News = ({ data }) =&gt; {\n    return (\n        \/\/ render data\n    );\n  };\n\nexport async function getServerSideProps() {\n    const res = await fetch(`https:\/\/app-url\/data`)\n    const data = await res.json()\n    return { props: { data } }\n}<\/code><\/pre>\n<p>Les donn\u00e9es sont r\u00e9cup\u00e9r\u00e9es \u00e0 chaque requ\u00eate et transmises au composant News via des props.<\/p>\n<h3>Division du code<\/h3>\n<p>Le fractionnement du code consiste \u00e0 diviser le code en morceaux que le navigateur peut charger \u00e0 la demande. Il r\u00e9duit la quantit\u00e9 de code envoy\u00e9e au navigateur lors du chargement initial, car le serveur n&rsquo;envoie que ce dont l&rsquo;utilisateur a besoin. Des bundlers comme Webpack, Rollup et Browserify prennent en charge le fractionnement du code dans React.<\/p>\n<p>Next.js prend en charge le fractionnement du code d\u00e8s le d\u00e9part.<\/p>\n<p>Avec Next.js, chaque page est divis\u00e9e en code, et l&rsquo;ajout de pages \u00e0 l&rsquo;application n&rsquo;augmente pas la taille du bundle. Next.js prend \u00e9galement en charge les importations dynamiques, ce qui vous permet d&rsquo;importer des modules JavaScript et de les charger dynamiquement pendant l&rsquo;ex\u00e9cution. Les importations dynamiques contribuent \u00e0 acc\u00e9l\u00e9rer la vitesse des pages car les paquets sont charg\u00e9s paresseusement.<\/p>\n<p>Par exemple, dans le composant <strong>Home<\/strong> ci-dessous, le serveur n&rsquo;inclura pas le composant hero dans le bundle initial.<\/p>\n<pre><code class=\"language-js\">const DynamicHero = dynamic(() =&gt; import('..\/components\/Hero'), {\n  suspense: true,\n})\n\nexport default function Home() {\n  return (\n    &lt;Suspense fallback={`Loading...`}&gt;\n      &lt;DynamicHero \/&gt;\n    &lt;\/Suspense&gt;\n  )\n}<\/code><\/pre>\n<p>Au lieu de cela, l&rsquo;\u00e9l\u00e9ment de repli du suspense sera rendu avant le chargement du composant h\u00e9ros.<\/p>\n<h3>Support API dans Next.js vs React<\/h3>\n<p>La fonction de routage API de Next.js vous permet d&rsquo;\u00e9crire du code backend et frontend dans la m\u00eame base de code. Toute page enregistr\u00e9e dans le dossier <strong>\/pages\/api\/<\/strong> est mapp\u00e9e \u00e0 la route <strong>\/api\/*<\/strong>, et Next.js la traite comme un <a href=\"https:\/\/kinsta.com\/fr\/blog\/api-endpoint\/\">point de terminaison d&rsquo;API<\/a>.<\/p>\n<p>Par exemple, vous pouvez cr\u00e9er une route API <strong>pages\/api\/user.js<\/strong> qui renvoie le nom de l&rsquo;utilisateur actuel comme ceci :<\/p>\n<pre><code class=\"language-js\">export default function user(req, res) {\n    res.status(200).json({ username: 'Jane' });\n}<\/code><\/pre>\n<p>Si vous visitez l&rsquo;URL <strong>https:\/\/app-url\/api\/user<\/strong>, vous verrez l&rsquo;objet nom d&rsquo;utilisateur.<\/p>\n<pre><code class=\"language-json\">{\n        username: 'Jane'\n}<\/code><\/pre>\n<p>Les routes API sont utiles lorsque vous voulez masquer l&rsquo;URL d&rsquo;un service auquel vous acc\u00e9dez ou lorsque vous voulez garder secr\u00e8tes des variables d&rsquo;environnement sans coder une application backend enti\u00e8re.<\/p>\n<h3>Performances<\/h3>\n<p>Next.js est sans aucun doute sup\u00e9rieur dans sa capacit\u00e9 \u00e0 cr\u00e9er des applications plus performantes avec un processus simplifi\u00e9. Les applications SSR et SSG Next.js sont plus performantes que les applications React \u00e0 rendu c\u00f4t\u00e9 client (CSR). En r\u00e9cup\u00e9rant les donn\u00e9es sur le serveur et en envoyant tout ce dont le navigateur a besoin pour effectuer le rendu, Next.js \u00e9limine la n\u00e9cessit\u00e9 d&rsquo;une demande de r\u00e9cup\u00e9ration de donn\u00e9es aux API. Cela signifie des temps de chargement plus rapides.<\/p>\n<p>En outre, Next.js prend en charge le routage c\u00f4t\u00e9 client. Le navigateur ne doit pas aller chercher des donn\u00e9es sur le serveur chaque fois qu&rsquo;un utilisateur navigue vers un autre itin\u00e9raire. En outre, le composant image de Next.js permet l&rsquo;optimisation automatique des images. Les images ne se chargent que lorsqu&rsquo;elles entrent dans le viewport. Dans la mesure du possible, Next.js sert \u00e9galement les images dans des formats modernes comme <a href=\"https:\/\/kinsta.com\/fr\/blog\/webp\/#what-is-webp\">WebP<\/a>.<\/p>\n<p>Next.js propose \u00e9galement des optimisations des polices de caract\u00e8res, la pr\u00e9-extraction intelligente des routes et des optimisations du regroupement. Ces optimisations ne sont pas automatiquement disponibles dans React.<\/p>\n<h3>Support<\/h3>\n<p>Comme React existe depuis plus longtemps que Next.js, il dispose d&rsquo;une communaut\u00e9 plus \u00e9tendue. Toutefois, de nombreux d\u00e9veloppeurs React adoptent Next.js, de sorte que cette communaut\u00e9 ne cesse de croitre. Les d\u00e9veloppeurs trouvent plus facilement des solutions existantes aux probl\u00e8mes qu&rsquo;ils rencontrent plut\u00f4t que de devoir construire des solutions \u00e0 partir de z\u00e9ro.<\/p>\n<p>Next.js propose \u00e9galement une excellente documentation avec des exemples complets et faciles \u00e0 comprendre. Malgr\u00e9 sa popularit\u00e9, la documentation de React n&rsquo;est pas aussi facile \u00e0 consulter.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Le choix de Next.js ou de React se r\u00e9sume aux exigences d&rsquo;une application.<\/p>\n<p>Next.js am\u00e9liore les capacit\u00e9s de React en fournissant une structure et des outils qui am\u00e9liorent les performances. Ces outils, comme le routage, le fractionnement du code et l&rsquo;optimisation des images, sont int\u00e9gr\u00e9s \u00e0 Next.js, ce qui signifie que les d\u00e9veloppeurs n&rsquo;ont pas \u00e0 configurer quoi que ce soit manuellement. Gr\u00e2ce \u00e0 ces fonctionnalit\u00e9s, Next.js est facile \u00e0 utiliser et les d\u00e9veloppeurs peuvent commencer \u00e0 coder la logique m\u00e9tier imm\u00e9diatement.<\/p>\n<p>En raison des diff\u00e9rentes options de rendu, Next.js convient aux applications avec rendu c\u00f4t\u00e9 serveur ou aux applications qui combinent la g\u00e9n\u00e9ration statique et le rendu c\u00f4t\u00e9 serveur de Node.js. De plus, gr\u00e2ce \u00e0 la fonction d&rsquo;optimisation fournie par Next.js, il est parfait pour les sites qui doivent \u00eatre rapides, comme les boutiques de commerce \u00e9lectronique.<\/p>\n<p>React est une biblioth\u00e8que JavaScript qui peut vous aider \u00e0 cr\u00e9er et \u00e0 faire \u00e9voluer des applications frontend robustes. Sa syntaxe est \u00e9galement simple, en particulier pour les d\u00e9veloppeurs ayant des connaissances en JavaScript. En outre, vous avez le contr\u00f4le sur les outils que vous utilisez dans votre application et sur la fa\u00e7on dont vous les configurez.<\/p>\n<p>Vous planifiez votre propre application qui dominera le monde ? D\u00e9couvrez l&rsquo;approche de Kinsta en mati\u00e8re d&rsquo;<a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">h\u00e9bergement d&rsquo;applications Node.js<\/a> pour les services prenant en charge React et Next.js.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les d\u00e9veloppeurs web modernes ne manquent pas de biblioth\u00e8ques et de frameworks JavaScript. L&rsquo;une des biblioth\u00e8ques les plus omnipr\u00e9sentes est React, que Facebook (maintenant Meta) a &#8230;<\/p>\n","protected":false},"author":117,"featured_media":66254,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[979,1004],"class_list":["post-66253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Next.js vs React ? C&#039;est un partenariat, pas une comp\u00e9tition - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Vous vous demandez comment Next.js et React s&#039;int\u00e8grent dans le paysage JavaScript ? Nous nous penchons sur ces outils pour cr\u00e9er des sites web performants.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js vs React ? C&#039;est un partenariat, pas une comp\u00e9tition\" \/>\n<meta property=\"og:description\" content=\"Vous vous demandez comment Next.js et React s&#039;int\u00e8grent dans le paysage JavaScript ? Nous nous penchons sur ces outils pour cr\u00e9er des sites web performants.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-13T09:00:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-23T08:15:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Vous vous demandez comment Next.js et React s&#039;int\u00e8grent dans le paysage JavaScript ? Nous nous penchons sur ces outils pour cr\u00e9er des sites web performants.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Next.js vs React ? C&rsquo;est un partenariat, pas une comp\u00e9tition\",\"datePublished\":\"2023-02-13T09:00:35+00:00\",\"dateModified\":\"2024-01-23T08:15:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/\"},\"wordCount\":2442,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/\",\"name\":\"Next.js vs React ? C'est un partenariat, pas une comp\u00e9tition - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png\",\"datePublished\":\"2023-02-13T09:00:35+00:00\",\"dateModified\":\"2024-01-23T08:15:17+00:00\",\"description\":\"Vous vous demandez comment Next.js et React s'int\u00e8grent dans le paysage JavaScript ? Nous nous penchons sur ces outils pour cr\u00e9er des sites web performants.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Next.js vs React ? C&rsquo;est un partenariat, pas une comp\u00e9tition\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Next.js vs React ? C'est un partenariat, pas une comp\u00e9tition - Kinsta\u00ae","description":"Vous vous demandez comment Next.js et React s'int\u00e8grent dans le paysage JavaScript ? Nous nous penchons sur ces outils pour cr\u00e9er des sites web performants.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/","og_locale":"fr_FR","og_type":"article","og_title":"Next.js vs React ? C'est un partenariat, pas une comp\u00e9tition","og_description":"Vous vous demandez comment Next.js et React s'int\u00e8grent dans le paysage JavaScript ? Nous nous penchons sur ces outils pour cr\u00e9er des sites web performants.","og_url":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-02-13T09:00:35+00:00","article_modified_time":"2024-01-23T08:15:17+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Vous vous demandez comment Next.js et React s'int\u00e8grent dans le paysage JavaScript ? Nous nous penchons sur ces outils pour cr\u00e9er des sites web performants.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Salman Ravoof","Dur\u00e9e de lecture estim\u00e9e":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Next.js vs React ? C&rsquo;est un partenariat, pas une comp\u00e9tition","datePublished":"2023-02-13T09:00:35+00:00","dateModified":"2024-01-23T08:15:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/"},"wordCount":2442,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/","url":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/","name":"Next.js vs React ? C'est un partenariat, pas une comp\u00e9tition - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png","datePublished":"2023-02-13T09:00:35+00:00","dateModified":"2024-01-23T08:15:17+00:00","description":"Vous vous demandez comment Next.js et React s'int\u00e8grent dans le paysage JavaScript ? Nous nous penchons sur ces outils pour cr\u00e9er des sites web performants.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/next-js-vs-react.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/nextjs-vs-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/fr\/sujets\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"Next.js vs React ? C&rsquo;est un partenariat, pas une comp\u00e9tition"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/66253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=66253"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/66253\/revisions"}],"predecessor-version":[{"id":66308,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/66253\/revisions\/66308"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66253\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/66254"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=66253"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=66253"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=66253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}