Qu’est-ce que Next.js ?<\/h2>\n
Next.js est un framework React qui vous permet de cr\u00e9er des sites web statiques et des applications web surpuissantes, adapt\u00e9s au r\u00e9f\u00e9rencement et extr\u00eamement conviviaux \u00e0 l’aide du framework React. Next.js est connu pour offrir la meilleure exp\u00e9rience aux d\u00e9veloppeurs lors de la cr\u00e9ation d’applications pr\u00eates pour la production avec toutes les fonctionnalit\u00e9s dont vous avez besoin.<\/p>\n
Il dispose d’un rendu hybride statique et serveur, d’une prise en charge de TypeScript, d’un regroupement intelligent, d’une pr\u00e9-lecture de route, et plus encore, sans aucune configuration suppl\u00e9mentaire.<\/p>\n
Pourquoi utiliser Next.js<\/h2>\n
Dans cette section, nous allons voir pourquoi vous devriez apprendre Next.js. Nous examinerons \u00e9galement les diff\u00e9rentes applications que vous pouvez cr\u00e9er avec Next.js.<\/p>\n
Optimisations d’image<\/h3>\n
Next.js fournit des optimisations d’image automatiques avec des constructions instantan\u00e9es. L’optimisation des images<\/a> est une fonctionnalit\u00e9 puissante pr\u00e9-int\u00e9gr\u00e9e dans Next.js car la gestion et l’optimisation des images n\u00e9cessitent de nombreuses configurations, et l’optimisation manuelle des images peut prendre une part importante de votre temps productif.<\/p>\n Une autre grande fonctionnalit\u00e9 ajout\u00e9e \u00e0 Next.js est l’internationalisation. La cr\u00e9ation d’une application d’entreprise peut facilement \u00eatre utilis\u00e9e et traduite dans diff\u00e9rentes langues dans le monde entier. Cette fonctionnalit\u00e9 est un ajout \u00e0 Next.js et permet \u00e0 Next.js d’\u00eatre reconnu internationalement car il faut moins de configuration pour mettre en place l’internalisation.<\/p>\n Next.js fournit un tableau de bord analytique qui peut \u00eatre configur\u00e9 pour afficher des donn\u00e9es pr\u00e9cises sur les visiteurs et des aper\u00e7us de pages d\u00e8s la sortie de la bo\u00eete. Gr\u00e2ce \u00e0 cette fonctionnalit\u00e9, vous pouvez rapidement \u00e9laborer un tableau de bord analytique et obtenir des informations pr\u00e9cieuses sur vos visiteurs et vos pages sans codage ou configuration suppl\u00e9mentaire.<\/p>\n Next.js se compile et se construit automatiquement avec un rafra\u00eechissement \u00e0 chaud sans aucune configuration suppl\u00e9mentaire de votre part, et il met automatiquement \u00e0 l’\u00e9chelle et optimise votre application de production.<\/p>\n R\u00e9aliser un rafra\u00eechissement \u00e0 chaud ou un rafra\u00eechissement automatique sur une application frontend traditionnelle comporte de nombreux obstacles. Il faut choisir et installer les bonnes biblioth\u00e8ques, et effectuer les configurations pour que chaque biblioth\u00e8que fonctionne correctement. Next.js r\u00e9sout ce probl\u00e8me en fournissant un rafra\u00eechissement \u00e0 chaud d\u00e8s le d\u00e9but, sans installation ni configuration de votre part.<\/p>\n Avec Next.js, vous prenez en charge le rendu c\u00f4t\u00e9 serveur, la g\u00e9n\u00e9ration statique et le rendu c\u00f4t\u00e9 client dans une seule application. Vous pouvez d\u00e9cider du type d’application que vous voulez construire et de la mani\u00e8re dont vous comptez compiler votre application pour r\u00e9pondre au mieux \u00e0 votre cas d’utilisation.<\/p>\n Le rendu c\u00f4t\u00e9 serveur rend Next.js adapt\u00e9 aux applications de production \u00e0 grande \u00e9chelle orient\u00e9es SEO, et sa configuration est un jeu d’enfant.<\/p>\n Vous trouverez ci-dessous la liste des applications d\u00e9velopp\u00e9es avec Next.js. Puisque Next.js est soutenu par des entreprises Fortune 500, dont GitHub<\/a>, Uber et Netflix.<\/p>\n Vous trouverez ci-dessous le top 5 des applications d\u00e9velopp\u00e9es avec Next.js.<\/p>\n TikTok est une communaut\u00e9 sociale de vid\u00e9os en ligne tr\u00e8s r\u00e9pandue, o\u00f9 les utilisateurs t\u00e9l\u00e9versent des vid\u00e9os mobiles de courte dur\u00e9e, et qui compte des millions d’utilisateurs quotidiens.<\/p>\n La page web de TikTok est d\u00e9velopp\u00e9e avec Next.js pour \u00eatre mise \u00e0 l’\u00e9chelle et optimis\u00e9e pour des millions d’utilisateurs actifs quotidiens.<\/p>\n Hashnode est une plateforme de blogs en ligne gratuite ciblant les d\u00e9veloppeurs, et elle est construite avec Next.js. Hashnode enregistre des millions d’utilisateurs, ce qui rend Next.js apte \u00e0 alimenter des applications de petite \u00e0 grande \u00e9chelle.<\/p>\n Twitch est une plateforme sociale en ligne permettant de chatter, d’interagir et d’appr\u00e9cier diff\u00e9rents types de contenu et de divertissement. Next.js en est \u00e9galement le moteur.<\/p>\n Hulu est une plateforme de streaming similaire \u00e0 Netflix, permettant aux utilisateurs de regarder des films et des \u00e9missions de t\u00e9l\u00e9vision en ligne cr\u00e9\u00e9s avec Next.js.<\/p>\n Binance est un portail populaire de crypto-monnaies avec des nouvelles, des tickets de prix, et une possibilit\u00e9 d’acheter et de vendre, enregistrant des millions d’utilisateurs actifs et des \u00e9changes de crypto quotidiennement. Next.js alimente \u00e9galement Binance.<\/p>\n Pour d\u00e9couvrir d’autres entreprises et sites Web utilisant Next.js, vous pouvez visiter la page de pr\u00e9sentation officielle de Next.js<\/a> pour plus d’informations.<\/p>\n Dans Next.js, il n’y a pas de limite au type d’applications que vous pouvez d\u00e9velopper. Vous pouvez d\u00e9velopper diff\u00e9rents types d’applications \u00e0 l’aide de Next.js. En outre, toute application que vous choisissez de cr\u00e9er avec Next.js b\u00e9n\u00e9ficiera toujours de tous les avantages et de toutes les fonctionnalit\u00e9s de Next.js sans que vous ayez \u00e0 effectuer de configurations suppl\u00e9mentaires.<\/p>\n Vous trouverez ci-dessous la liste des types d’applications que vous pouvez cr\u00e9er avec Next.js :<\/p>\n Nous vous pr\u00e9sentons ci-dessous les caract\u00e9ristiques de Next.js et ce que vous pouvez gagner en utilisant Next.js dans votre projet.<\/p>\n Le routage est l’une des caract\u00e9ristiques essentielles de Next.js. Next.js utilise le syst\u00e8me de routage par fichier bas\u00e9 sur les pages<\/strong> pour structurer l’aspect du routage de votre application. Chaque fichier et dossier cr\u00e9\u00e9 \u00e0 l’int\u00e9rieur du dossier pages<\/strong> est automatiquement converti en routage dans Next.js.<\/p>\n Le syst\u00e8me de routage de Next.js est divis\u00e9 en 3 types diff\u00e9rents, et ci-dessous, nous allons explorer chacun d’entre eux.<\/p>\n Le dossier page<\/strong> poss\u00e8de automatiquement index.js, qui devient la route pour la route de la page d’accueil \/<\/strong>. Vous pouvez \u00e9galement d\u00e9finir une page index.js<\/strong> pour toutes vos routes dans n’importe quel dossier. Par exemple, vous pouvez d\u00e9finir pages\/profils\/index.js<\/strong>, qui sera automatiquement mis en correspondance avec la page \/profils<\/strong>.<\/p>\n Prenez par exemple cet exemple :<\/p>\n La structure de page ci-dessus fera correspondre les dossiers et les fichiers \u00e0 une structure URL. Par exemple \/<\/strong> pour les pages\/index.js<\/strong>, \/profile\/<\/strong> pour les pages\/profile\/index.js<\/strong>, et \/profile\/user<\/strong> pour les pages\/profile\/user.js<\/strong>, respectivement.<\/p>\n Les routes imbriqu\u00e9es sont cr\u00e9\u00e9es au sein d’une route parente. Pour cr\u00e9er une route imbriqu\u00e9e, vous devez cr\u00e9er une route\/dossier parent dans le dossier pages<\/strong> et y ajouter des dossiers ou des fichiers pour cr\u00e9er une route imbriqu\u00e9e.<\/p>\n Jetez un coup d\u2019\u0153il \u00e0 cet exemple :<\/p>\n Dans le script ci-dessus, les fichiers user.js<\/strong> et index.js<\/strong> sont imbriqu\u00e9s dans la route parente du tableau de bord, ce qui signifie que les URL ne sont accessibles qu’avec la route du tableau de bord<\/strong>.<\/p>\n Elle est r\u00e9alis\u00e9e via des routes dynamiques. Les routes dynamiques sont toujours ind\u00e9termin\u00e9es. Elles peuvent \u00eatre g\u00e9n\u00e9r\u00e9es via des appels API ou attribuer un ID ou un slug \u00e0 l’URL.<\/p>\n Pour cr\u00e9er une route dynamique dans Next.js, ajoutez un crochet [id].js<\/strong> autour du nom du fichier ou du r\u00e9pertoire. Vous pouvez nommer le fichier ou le r\u00e9pertoire du nom de votre choix, mais un crochet []<\/strong> doit \u00eatre attach\u00e9 pour le rendre dynamique.<\/p>\n Jetez un coup d’\u0153il \u00e0 cet exemple :<\/p>\n Le script ci-dessus rend le fichier [user].js<\/strong> dynamique, ce qui signifie que la page de profil doit \u00eatre accessible avec \/dashboard\/2\/profile<\/strong> ou \/dashboard\/johndoe\/profile<\/strong>.<\/p>\n Dans la documentation officielle, vous pouvez en apprendre davantage et conna\u00eetre les diff\u00e9rentes astuces pour cr\u00e9er un syst\u00e8me de routage plus avanc\u00e9 dans Next.js.<\/p>\n Dans Next.js, le service des fichiers statiques ou des ressources telles que les ic\u00f4nes, les polices auto-h\u00e9berg\u00e9es ou les images se fait par le biais du dossier public<\/strong>, la seule source de v\u00e9rit\u00e9 pour les ressources statiques.<\/p>\n Selon la documentation de Next.js, le dossier public<\/strong> ne doit pas \u00eatre renomm\u00e9. Servir des actifs statiques via le dossier public<\/strong> est tr\u00e8s simple, selon la fa\u00e7on dont Next.js l’a configur\u00e9.<\/p>\n L’une des \u00e9normes caract\u00e9ristiques de Next.js est le pr\u00e9-rendu, qui permet \u00e0 Next.js de fonctionner tr\u00e8s bien et tr\u00e8s rapidement. Next.js effectue un pr\u00e9-rendu de chaque page en g\u00e9n\u00e9rant \u00e0 l’avance le HTML de chaque page ainsi que le JavaScript minimal dont ils ont besoin pour fonctionner gr\u00e2ce \u00e0 un processus connu sous le nom d’Hydratation.<\/p>\n Il existe deux formes de pr\u00e9rendu dans Next.js :<\/p>\n La fa\u00e7on dont les donn\u00e9es sont r\u00e9cup\u00e9r\u00e9es est la diff\u00e9rence cruciale entre SG et SSR. Pour le SG, les donn\u00e9es sont r\u00e9cup\u00e9r\u00e9es au moment de la construction et r\u00e9utilis\u00e9es \u00e0 chaque requ\u00eate (ce qui le rend plus rapide car il peut \u00eatre mis en cache), tandis que dans le SSR, les donn\u00e9es sont r\u00e9cup\u00e9r\u00e9es \u00e0 chaque requ\u00eate.<\/p>\n \u00c0 partir de Next.js 9.4, les importations absolues ont \u00e9t\u00e9 introduites, ce qui signifie que vous ne devez plus importer des composants avec des r\u00e9pertoires relativement longs.<\/p>\n Par exemple, vous n’avez pas besoin d’importer des composants comme celui ci-dessous :<\/p>\n Mais vous utilisez le style suivant pour importer des composants :<\/p>\n Next.js fournit le next\/link<\/strong> pour naviguer entre les pages. La navigation entre les pages de vos applications peut se faire avec le composant Link<\/a> export\u00e9 par le next\/link<\/strong>.<\/p>\n En supposant que nous ayons ces structures de pages dans votre dossier pages<\/strong> et que vous souhaitiez lier les pages entre elles, vous pouvez y parvenir en utilisant le script suivant :<\/p>\n Vous liez les pages \u00e0 l’aide du script suivant :<\/p>\n Next.js vous offre le luxe de cr\u00e9er et d’avoir plusieurs styles selon les besoins de votre projet. Par d\u00e9faut, Next.js est livr\u00e9 avec trois styles diff\u00e9rents, \u00e0 savoir : CSS global, modules CSS et style-jsx.<\/p>\n Comme toute bonne chose, Next.js a ses inconv\u00e9nients, dont vous devez tenir compte avant de l’utiliser pour votre prochain projet. Dans cette section, nous allons explorer les inconv\u00e9nients de Next.js.<\/p>\n Avec Next.js, la flexibilit\u00e9 s’accompagne de co\u00fbts \u00e9lev\u00e9s de d\u00e9veloppement et de maintenance. Pour apporter des modifications et maintenir l’application, vous aurez besoin d’un d\u00e9veloppeur Next.js d\u00e9di\u00e9 et d’un expert frontend<\/a>, ce qui co\u00fbtera plus cher.<\/p>\n Next.js ne prend pas en charge la gestion d’\u00e9tat d\u00e8s sa sortie de la bo\u00eete. Si vous avez besoin d’une gestion d’\u00e9tat, vous devrez l’installer et l’utiliser comme vous le feriez avec React.<\/p>\n Avec Next.js, vous n’aurez pas acc\u00e8s \u00e0 de nombreuses extensions faciles \u00e0 adapter.<\/p>\n Cette section va explorer l’utilisation pratique de Nuxtjs et comment cr\u00e9er une application NuxtJS. Cependant, explorons quelques-uns des quelques concepts essentiels au d\u00e9veloppement d’une application Nuxtjs.<\/p>\n Cr\u00e9er un nouveau projet Next.js est tr\u00e8s facile et va droit au but. Vous pouvez cr\u00e9er un projet Nuxt de diff\u00e9rentes mani\u00e8res, mais l’approche la plus pr\u00e9f\u00e9r\u00e9e et recommand\u00e9e est CLI.<\/p>\nInternationalisation<\/h3>\n
Next.js Analytics<\/h3>\n
![\"Tableau](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/dashboard-1024x658.png\")
Zero Config<\/h3>\n
Prise en charge int\u00e9gr\u00e9e de SSR, SSG et CSR<\/h3>\n
Applications utilisant Next.js<\/h2>\n
TikTok<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/tiktok-1024x556.png\")
Hashnode<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/hashnode-1024x531.png\")
Twitch Mobile<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/twitch-1024x482.png\")
Hulu<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/hulu-1024x486.png\")
Binance<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/binance-1024x505.png\")
Ce que vous pouvez construire<\/h2>\n
\n
Caract\u00e9ristiques de Next.js<\/h2>\n
Routage<\/h3>\n
Routage de l’index<\/h4>\n
- pages\n - index.js\n - profile\n - index.js\n - [user].js<\/code><\/pre>\nRoutes imbriqu\u00e9es<\/h4>\n
- pages\n - index.js\n - dashboard\n - index.js\n - user.js<\/code><\/pre>\nRoutes dynamiques<\/h4>\n
- pages\n - dashboard\n - [user].js\n - profile<\/code><\/pre>\nService de fichiers statiques<\/h3>\n
Pr\u00e9-rendu<\/h3>\n
\n
Importations absolues<\/h3>\n
import InputField from \"..\/..\/..\/..\/..\/..\/components\/general\/forms\/inputfield\"<\/code><\/pre>\nimport InputField from \"components\/general\/forms\/inputfield\";<\/code><\/pre>\nLier les pages<\/h3>\n
- pages\n - index.js\n - profile.js\n - settings.js\n - users\n - index.js\n - [user].js<\/code><\/pre>\nimport Link from \"next\/link\";\n\nexport default function Users({users) {\n return (\n <div>\n <Link href=\"\/\">Home<\/Link>\n <Link href=\"\/profile\">Profile<\/Link>\n <Link href=\"\/settings\">\n <a> Settings <\/a>\n <\/Link>\n <Link href=\"\/users\">\n <a> Settings <\/a>\n <\/Link>\n <Link href=\"\/users\/bob\">\n <a> Settings <\/a>\n <\/Link>\n <\/div>\n )\n}<\/code><\/pre>\nStylisation<\/h3>\n
Inconv\u00e9nients de Next.js<\/h2>\n
Co\u00fbt de d\u00e9veloppement et de maintenance<\/h3>\n
Absence de gestionnaire d’\u00e9tat int\u00e9gr\u00e9<\/h3>\n
Peu de plugins<\/h3>\n
Comment cr\u00e9er une application Next.js<\/h2>\n
Cr\u00e9ation d’une application Next.js<\/h3>\n