Qu’est-ce que Next.js ? Un regard sur le populaire framework JavaScript

Next.js étant qualifié de framework React pour la production, il est devenu évident que vous pouvez rapidement créer et déployer des applications à grande échelle et prêtes pour l’entreprise en production avec Next.js.

Next.js est doté de fonctionnalités qui sont garanties pour faire passer votre application de zéro à la production en un rien de temps, tout en offrant une courbe d’apprentissage facile, une simplicité et des outils puissants à votre disposition.

Next.js étend la bibliothèque React originale de Facebook et le package create-react-app pour fournir un cadre React extensible, facile à utiliser et à l’épreuve de la production.

Ce guide vous guidera à travers Next.js, en explorant pourquoi vous devriez utiliser Next.js et les différentes applications utilisant Next.js en production. En outre, nous aborderons les éléments de Next.js, y compris ses caractéristiques. Enfin, nous apprendrons comment créer notre première application Next.js.

Qu’est-ce que Next.js ?

Next.js est un framework React qui vous permet de créer des sites web statiques et des applications web surpuissantes, adaptés au référencement et extrêmement conviviaux à l’aide du framework React. Next.js est connu pour offrir la meilleure expérience aux développeurs lors de la création d’applications prêtes pour la production avec toutes les fonctionnalités dont vous avez besoin.

Il dispose d’un rendu hybride statique et serveur, d’une prise en charge de TypeScript, d’un regroupement intelligent, d’une pré-lecture de route, et plus encore, sans aucune configuration supplémentaire.

Pourquoi utiliser Next.js

Dans cette section, nous allons voir pourquoi vous devriez apprendre Next.js. Nous examinerons également les différentes applications que vous pouvez créer avec Next.js.

Optimisations d’image

Next.js fournit des optimisations d’image automatiques avec des constructions instantanées. L’optimisation des images est une fonctionnalité puissante pré-intégrée dans Next.js car la gestion et l’optimisation des images nécessitent de nombreuses configurations, et l’optimisation manuelle des images peut prendre une part importante de votre temps productif.

Internationalisation

Une autre grande fonctionnalité ajoutée à Next.js est l’internationalisation. La création d’une application d’entreprise peut facilement être utilisée et traduite dans différentes langues dans le monde entier. Cette fonctionnalité est un ajout à Next.js et permet à Next.js d’être reconnu internationalement car il faut moins de configuration pour mettre en place l’internalisation.

Next.js Analytics

Next.js fournit un tableau de bord analytique qui peut être configuré pour afficher des données précises sur les visiteurs et des aperçus de pages dès la sortie de la boîte. Grâce à cette fonctionnalité, vous pouvez rapidement élaborer un tableau de bord analytique et obtenir des informations précieuses sur vos visiteurs et vos pages sans codage ou configuration supplémentaire.

Zero Config

Next.js se compile et se construit automatiquement avec un rafraîchissement à chaud sans aucune configuration supplémentaire de votre part, et il met automatiquement à l’échelle et optimise votre application de production.

Réaliser un rafraîchissement à chaud ou un rafraîchissement automatique sur une application frontend traditionnelle comporte de nombreux obstacles. Il faut choisir et installer les bonnes bibliothèques, et effectuer les configurations pour que chaque bibliothèque fonctionne correctement. Next.js résout ce problème en fournissant un rafraîchissement à chaud dès le début, sans installation ni configuration de votre part.

Prise en charge intégrée de SSR, SSG et CSR

Avec Next.js, vous prenez en charge le rendu côté serveur, la génération statique et le rendu côté client dans une seule application. Vous pouvez décider du type d’application que vous voulez construire et de la manière dont vous comptez compiler votre application pour répondre au mieux à votre cas d’utilisation.

Le rendu côté serveur rend Next.js adapté aux applications de production à grande échelle orientées SEO, et sa configuration est un jeu d’enfant.

Applications utilisant Next.js

Vous trouverez ci-dessous la liste des applications développées avec Next.js. Puisque Next.js est soutenu par des entreprises Fortune 500, dont GitHub, Uber et Netflix.

Vous trouverez ci-dessous le top 5 des applications développées avec Next.js.

TikTok

TikTok est une communauté sociale de vidéos en ligne très répandue, où les utilisateurs téléversent des vidéos mobiles de courte durée, et qui compte des millions d’utilisateurs quotidiens.

La page web de TikTok est développée avec Next.js pour être mise à l’échelle et optimisée pour des millions d’utilisateurs actifs quotidiens.

Hashnode

Hashnode est une plateforme de blogs en ligne gratuite ciblant les développeurs, et elle est construite avec Next.js. Hashnode enregistre des millions d’utilisateurs, ce qui rend Next.js apte à alimenter des applications de petite à grande échelle.

Twitch Mobile

Twitch est une plateforme sociale en ligne permettant de chatter, d’interagir et d’apprécier différents types de contenu et de divertissement. Next.js en est également le moteur.

Hulu

Hulu est une plateforme de streaming similaire à Netflix, permettant aux utilisateurs de regarder des films et des émissions de télévision en ligne créés avec Next.js.

Binance

Binance est un portail populaire de crypto-monnaies avec des nouvelles, des tickets de prix, et une possibilité d’acheter et de vendre, enregistrant des millions d’utilisateurs actifs et des échanges de crypto quotidiennement. Next.js alimente également Binance.

Pour découvrir d’autres entreprises et sites Web utilisant Next.js, vous pouvez visiter la page de présentation officielle de Next.js pour plus d’informations.

Ce que vous pouvez construire

Dans Next.js, il n’y a pas de limite au type d’applications que vous pouvez développer. Vous pouvez développer différents types d’applications à l’aide de Next.js. En outre, toute application que vous choisissez de créer avec Next.js bénéficiera toujours de tous les avantages et de toutes les fonctionnalités de Next.js sans que vous ayez à effectuer de configurations supplémentaires.

Vous trouverez ci-dessous la liste des types d’applications que vous pouvez créer avec Next.js :

• MVP (Minimum Viable Product)
• Sites web Jamstack
• Portails web
• Pages web uniques
• Sites web statiques
• Produits SaaS
• Sites web eCommerce et de vente au détail
• Tableaux de bord
• Applications web complexes et exigeantes
• Interfaces utilisateur interactives

Caractéristiques de Next.js

Nous vous présentons ci-dessous les caractéristiques de Next.js et ce que vous pouvez gagner en utilisant Next.js dans votre projet.

Routage

Le routage est l’une des caractéristiques essentielles de Next.js. Next.js utilise le système de routage par fichier basé sur les pages pour structurer l’aspect du routage de votre application. Chaque fichier et dossier créé à l’intérieur du dossier pages est automatiquement converti en routage dans Next.js.

Le système de routage de Next.js est divisé en 3 types différents, et ci-dessous, nous allons explorer chacun d’entre eux.

Routage de l’index

Le dossier page possède automatiquement index.js, qui devient la route pour la route de la page d’accueil /. Vous pouvez également définir une page index.js pour toutes vos routes dans n’importe quel dossier. Par exemple, vous pouvez définir pages/profils/index.js, qui sera automatiquement mis en correspondance avec la page /profils.

Prenez par exemple cet exemple :

- pages
  - index.js
  - profile
    - index.js
    - [user].js

La structure de page ci-dessus fera correspondre les dossiers et les fichiers à une structure URL. Par exemple / pour les pages/index.js, /profile/ pour les pages/profile/index.js, et /profile/user pour les pages/profile/user.js, respectivement.

Routes imbriquées

Les routes imbriquées sont créées au sein d’une route parente. Pour créer une route imbriquée, vous devez créer une route/dossier parent dans le dossier pages et y ajouter des dossiers ou des fichiers pour créer une route imbriquée.

Jetez un coup d’œil à cet exemple :

- pages
  - index.js
  - dashboard
    - index.js
    - user.js

Dans le script ci-dessus, les fichiers user.js et index.js sont imbriqués 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.

Routes dynamiques

Elle est réalisée via des routes dynamiques. Les routes dynamiques sont toujours indéterminées. Elles peuvent être générées via des appels API ou attribuer un ID ou un slug à l’URL.

Pour créer une route dynamique dans Next.js, ajoutez un crochet [id].js autour du nom du fichier ou du répertoire. Vous pouvez nommer le fichier ou le répertoire du nom de votre choix, mais un crochet [] doit être attaché pour le rendre dynamique.

Jetez un coup d’œil à cet exemple :

- pages
  - dashboard
    - [user].js
        - profile

Le script ci-dessus rend le fichier [user].js dynamique, ce qui signifie que la page de profil doit être accessible avec /dashboard/2/profile ou /dashboard/johndoe/profile.

Dans la documentation officielle, vous pouvez en apprendre davantage et connaître les différentes astuces pour créer un système de routage plus avancé dans Next.js.

Service de fichiers statiques

Dans Next.js, le service des fichiers statiques ou des ressources telles que les icônes, les polices auto-hébergées ou les images se fait par le biais du dossier public, la seule source de vérité pour les ressources statiques.

Selon la documentation de Next.js, le dossier public ne doit pas être renommé. Servir des actifs statiques via le dossier public est très simple, selon la façon dont Next.js l’a configuré.

Pré-rendu

L’une des énormes caractéristiques de Next.js est le pré-rendu, qui permet à Next.js de fonctionner très bien et très rapidement. Next.js effectue un pré-rendu de chaque page en générant à l’avance le HTML de chaque page ainsi que le JavaScript minimal dont ils ont besoin pour fonctionner grâce à un processus connu sous le nom d’Hydratation.

Il existe deux formes de prérendu dans Next.js :

1. Rendu côté serveur (Server-side Rending ou SSR)
2. Génération statique (Static Generation ou SG)

La façon dont les données sont récupérées est la différence cruciale entre SG et SSR. Pour le SG, les données sont récupérées au moment de la construction et réutilisées à chaque requête (ce qui le rend plus rapide car il peut être mis en cache), tandis que dans le SSR, les données sont récupérées à chaque requête.

Importations absolues

À partir de Next.js 9.4, les importations absolues ont été introduites, ce qui signifie que vous ne devez plus importer des composants avec des répertoires relativement longs.

Par exemple, vous n’avez pas besoin d’importer des composants comme celui ci-dessous :

import InputField from "../../../../../../components/general/forms/inputfield"

Mais vous utilisez le style suivant pour importer des composants :

import InputField from "components/general/forms/inputfield";

Lier les pages

Next.js fournit le next/link pour naviguer entre les pages. La navigation entre les pages de vos applications peut se faire avec le composant Link exporté par le next/link.

En supposant que nous ayons ces structures de pages dans votre dossier pages et que vous souhaitiez lier les pages entre elles, vous pouvez y parvenir en utilisant le script suivant :

- pages
  - index.js
  - profile.js
  - settings.js
  - users
    - index.js
    - [user].js

Vous liez les pages à l’aide du script suivant :

import Link from "next/link";

export default function Users({users) {
  return (
    <div>
      <Link href="/">Home</Link>
      <Link href="/profile">Profile</Link>
      <Link href="/settings">
        <a> Settings </a>
      </Link>
      <Link href="/users">
        <a> Settings </a>
      </Link>
      <Link href="/users/bob">
        <a> Settings </a>
      </Link>
    </div>
  )
}

Stylisation

Next.js vous offre le luxe de créer et d’avoir plusieurs styles selon les besoins de votre projet. Par défaut, Next.js est livré avec trois styles différents, à savoir : CSS global, modules CSS et style-jsx.

Inconvénients de Next.js

Comme toute bonne chose, Next.js a ses inconvénients, dont vous devez tenir compte avant de l’utiliser pour votre prochain projet. Dans cette section, nous allons explorer les inconvénients de Next.js.

Coût de développement et de maintenance

Avec Next.js, la flexibilité s’accompagne de coûts élevés de développement et de maintenance. Pour apporter des modifications et maintenir l’application, vous aurez besoin d’un développeur Next.js dédié et d’un expert frontend, ce qui coûtera plus cher.

Absence de gestionnaire d’état intégré

Next.js ne prend pas en charge la gestion d’état dès sa sortie de la boîte. Si vous avez besoin d’une gestion d’état, vous devrez l’installer et l’utiliser comme vous le feriez avec React.

Peu de plugins

Avec Next.js, vous n’aurez pas accès à de nombreuses extensions faciles à adapter.

Comment créer une application Next.js

Cette section va explorer l’utilisation pratique de Nuxtjs et comment créer une application NuxtJS. Cependant, explorons quelques-uns des quelques concepts essentiels au développement d’une application Nuxtjs.

Création d’une application Next.js

Créer un nouveau projet Next.js est très facile et va droit au but. Vous pouvez créer un projet Nuxt de différentes manières, mais l’approche la plus préférée et recommandée est CLI.

Pour créer une nouvelle application Next.js avec CLE, assurez-vous que vous avez installé npx (npx est livré par défaut depuis npm 5.2.0) ou npm v6.1 ou yarn.

Ensuite, saisissez la commande suivante dans le bon dossier où vous voulez placer votre projet Next.js :

npx create-next-app
// Follow the instructions to create your first Next.js project.
cd <project-name>
npm run dev

Veillez à remplacer le <project-name> par le nom réel de votre projet. Vous pouvez alors commencer à créer les différentes pages et composants requis par votre projet.

Éléments Next.js

Lorsque vous créez un nouveau projet Next.js, vous remarquerez qu’il est livré avec différents éléments, pages et structures de dossiers qui peuvent être difficiles à appréhender pour les débutants. Cependant, nous allons explorer certains des éléments de Next.js ci-dessous.

Structure des dossiers

Après avoir créé un nouveau projet Next.js à partir d’une CLI, vous remarquerez une application Next.js avec une arborescence de dossiers allégée. Cette structure de dossiers par défaut est le strict minimum pour faire fonctionner une application Next.js. Lorsque vous commencez à construire votre projet, vous aurez plus de dossiers et de fichiers que le framework initial.

Les seuls dossiers spécifiques à Next.js sont les dossiers pages, public et styles. Ceux-ci ne doivent pas être renommés, sauf si vous êtes prêt à ajuster des configurations supplémentaires.

Vous trouverez ci-dessous la structure de dossiers par défaut pour un nouveau projet Next.js :

# other files and folders, .gitignore, package.json...
- pages
  - api
    - hello.js
  - _app.js
  - index.js
- public
  - favicon.ico
  - vercel.svg
- styles
  - globals.css
  - Home.module.css

Pages

Les pages sont l’un des dossiers spécifiques à Next. Vous trouverez ci-dessous certaines choses que vous devez savoir sur les pages Next.js.

Les pages sont des composants React, et chaque fichier du dossier Pages est une page web, et chaque page web est un composant React. Par exemple, nous avons un composant React dans le dossier Pages, ce qui donne une URL de page web.

// Location: /pages/index.js
//  is just a basic React component
export default Index() {
  return <h1>Welcome to Home</h1>
}

Next.js est livré avec des pages personnalisées pré-créées, préfixées par des underscores, telles que _app.js et _document.js. Next.js utilise le composant de page personnalisée _app.js pour initialiser les pages. Il réside dans le dossier pages, tandis que le composant de page personnalisée _document.js complète les balises <html> et <body> de votre application.

Le framework utilise également un système de routage basé sur les pages, dans lequel chaque page devient automatiquement une route en fonction de son nom de fichier. Par exemple, une page à pages/user sera située à /user, et pages/index.js à /.

Résumé

Next.js devrait venir à l’esprit lors de la création d’applications d’entreprise et de production à l’aide de React, car il est conçu pour simplifier les tracas liés à la création d’applications de production grâce à ses fonctionnalités, ses outils et sa configuration.

Dans ce guide, nous avons exploré les différentes fonctionnalités de ce framework et identifié les raisons pour lesquelles vous devriez créer vos prochaines applications d’entreprise à l’aide de Next.js. Vous savez maintenant que même si vous n’avez jamais essayé Next.js auparavant, il existe de nombreuses raisons de l’essayer.

Faites-nous savoir dans la section des commentaires ce que vous allez construire avec ces nouveaux super-pouvoirs !