Premiers pas avec Next.js

Next.js est un framework Node.js très populaire qui permet un rendu React côté serveur facile et fournit de nombreuses autres fonctionnalités étonnantes

introduction

Travailler sur un moderneJavaScriptapplication alimentée parRéagirest génial jusqu'à ce que vous vous rendiez compte qu'il y a quelques problèmes liés au rendu de tout le contenu côté client.

Tout d'abord, la page prend plus de temps pour devenir visible pour l'utilisateur, car avant le chargement du contenu, tout le JavaScript doit se charger et votre application doit s'exécuter pour déterminer ce qu'il faut afficher sur la page.

Deuxièmement, si vous créez un site Web accessible au public, vous avez un problème de référencement de contenu. Les moteurs de recherche s'améliorent dans l'exécution et l'indexation des applications JavaScript, mais c'est beaucoup mieux si nous pouvons leur envoyer du contenu au lieu de les laisser le comprendre.

La solution à ces deux problèmes estrendu du serveur, aussi appelépré-rendu statique.

Next.js est un framework React pour faire tout cela de manière très simple, mais ce n'est pas limité à cela. Il est annoncé par ses créateurs comme unchaîne d'outils à configuration zéro et à commande unique pour les applications React.

Il fournit une structure commune qui vous permet de créer facilement une application frontale React et de gérer de manière transparente le rendu côté serveur pour vous.

Caractéristiques principales

Voici une liste non exhaustive des principales fonctionnalités de Next.js:

Rechargement de Hot Code: Next.js recharge la page lorsqu'il détecte une modification enregistrée sur le disque.
Routage automatique: toute URL est mappée au système de fichiers, aux fichiers placés dans lepagesdossier, et vous n'avez besoin d'aucune configuration (vous avez bien sûr des options de personnalisation).
Composants de fichier unique: utilisantstyled-jsx, complètement intégré tel que construit par la même équipe, il est trivial d'ajouter des styles étendus au composant.
Rendu du serveur: vous pouvez (éventuellement) rendre les composants React côté serveur, avant d'envoyer le HTML au client.
Compatibilité des écosystèmes: Next.js fonctionne bien avec le reste de l'écosystème JavaScript, Node et React.
Fractionnement automatique du code: les pages sont rendues avec uniquement les bibliothèques et JavaScript dont elles ont besoin, pas plus.
Prérécupération: leLinkcomposant, utilisé pour relier différentes pages, prend en charge unprefetchprop qui pré-récupère automatiquement les ressources de la page (y compris le code manquant en raison du fractionnement du code) en arrière-plan.
Composants dynamiques: vous pouvez importer dynamiquement des modules JavaScript et des composants React (https://github.com/zeit/next.js#dynamic-import).
Exportations statiques: en utilisant lenext export, Next.js vous permet d'exporter un site entièrement statique à partir de votre application.

Installation

Next.js prend en charge toutes les principales plates-formes: Linux, macOS, Windows.

Un projet Next.js démarre facilement avecnpm:

npm install next react react-dom

Commencer

Créer unpackage.jsonfichier avec ce contenu:

{
  "scripts": {
    "dev": "next"
  }
}

Si vous exécutez cette commande maintenant:

npm run dev

le script soulèvera une erreur se plaignant de ne pas trouver lepagesdossier. C'est la seule chose dont Next.js a besoin pour s'exécuter.

Créer un videpagesdossier, et exécutez à nouveau la commande, et Next.js démarrera un serveur surlocalhost:3000.

Si vous accédez à cette URL maintenant, vous serez accueilli par une page 404 conviviale, avec un joli design épuré.

A 404 page returned by Next.js

Next.js gère également d'autres types d'erreurs, comme 500 erreurs par exemple.

Créer une page

Dans lepagesdossier créer unindex.jsfichier avec un composant fonctionnel React simple:

export default () => (
  <div>
    <p>Hello World!</p>
  </div>
)

Si vous visitezlocalhost:3000, ce composant sera automatiquement rendu.

Pourquoi est-ce si simple?

Next.js utilise une structure de pages déclarative, basée sur la structure du système de fichiers.

Les pages sont à l'intérieur d'unpagesdossier et l'URL de la page est déterminée par le nom du fichier de la page. Le système de fichiers est l'API des pages.

Rendu côté serveur

Ouvrez la source de la page,View -> Developer -> View Sourceavec Chrome.

Comme vous pouvez le voir, le HTML généré par le composant est envoyé directement dans la source de la page. Il n'est pas rendu côté client, mais à la place, il est rendu sur le serveur.

L'équipe Next.js souhaitait créer une expérience de développement pour les pages rendues par le serveur similaire à celle que vous obtenez lors de la création d'un projet PHP de base, par exemple, où vous déposez des fichiers PHP et que vous les appelez, et ils apparaissent sous forme de pages. En interne, bien sûr, tout est très différent, mais la facilité d'utilisation apparente est claire.

Ajouter une deuxième page

Créons une autre page, danspages/contact.js

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
  </div>
)

Si vous pointez votre navigateur verslocalhost:3000/contactcette page sera rendue. Comme vous pouvez le voir, cette page est également rendue par le serveur.

Rechargement à chaud

Notez que vous n'avez pas eu à redémarrer lenpmprocessus pour charger la deuxième page. Next.js fait cela pour vous sous le capot.

Rendu client

Le rendu du serveur est très pratique lors du chargement de la première page, pour toutes les raisons que nous avons vues ci-dessus, mais lorsqu'il s'agit de naviguer à l'intérieur du site Web, le rendu côté client est essentiel pour accélérer le chargement de la page et améliorer l'expérience utilisateur.

Next.js fournit unLinkcomposant que vous pouvez utiliser pour créer des liens. Essayez de lier les deux pages ci-dessus.

Changementindex.jsà ce code:

import Link from 'next/link'
export default () => (
<div>
<p>Hello World!</p>
<Link href=’/contact’>
<a>Contact me!</a>
</Link>
</div>
)

Revenez maintenant au navigateur et essayez ce lien. Comme vous pouvez le voir, la page Contact se charge immédiatement, sans actualisation de la page.

C'est la navigation côté client qui fonctionne correctement, avec une prise en charge complète de laAPI historique, ce qui signifie que le bouton de retour de vos utilisateurs ne se cassera pas.

Si vous maintenantcmd-clickle lien, la même page Contact s'ouvrira dans un nouvel onglet, maintenant rendu par le serveur.

Pages dynamiques

Un bon cas d'utilisation de Next.js est un blog, car c'est quelque chose que tous les développeurs savent comment cela fonctionne, et c'est un bon exemple pour un exemple simple de gestion des pages dynamiques.

Une page dynamique est une page qui n'a pas de contenu fixe, mais qui affiche à la place des données basées sur certains paramètres.

Changementindex.jsà

import Link from 'next/link'
const Post = (props) => (
<li>
<Link href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}>
<a>{props.title}</a>
</Link>
</li>
)
export default () => (
<div>
<h2>My blog</h2>
<ul>
<li>
<Post title=‘Yet another post’ />
<Post title=‘Second post’ />
<Post title=‘Hello, world!’ />
</li>
</ul>
</div>
)

Cela créera une série d'articles et remplira le paramètre de requête de titre avec le titre de l'article:

The posts list

Créez maintenant unpost.jsfichier dans lepagesdossier, et ajoutez:

export default (props) => <h1>{props.url.query.title}</h1>

Cliquez maintenant sur un seul article pour afficher le titre de l'article dans unh1étiqueter:

A single post

Vous pouvez utiliser des URL propres sans paramètres de requête. Le composant Next.js Link nous aide en acceptant unasattribut, que vous pouvez utiliser pour transmettre un slug:

import Link from 'next/link'
const Post = (props) => (
<li>
<Link as={/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">slug</span><span style="color:#e6db74">}</span><span style="color:#e6db74">} href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}>
<a>{props.title}</a>
</Link>
</li>
)
export default () => (
<div>
<h2>My blog</h2>
<ul>
<li>
<Post slug=‘yet-another-post’ title=‘Yet another post’ />
<Post slug=‘second-post’ title=‘Second post’ />
<Post slug=‘hello-world’ title=‘Hello, world!’ />
</li>
</ul>
</div>
)

CSS-en-JS

Next.js par défaut fournit la prise en charge destyled-jsx, qui est une solution CSS-in-JS fournie par la même équipe de développement, mais vous pouvez utiliser la bibliothèque de votre choix, commeComposants stylisés.

Exemple:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx>{`
      p {
        font-family: 'Courier New';
      }
      a {
        text-decoration: none;
        color: black;
      }
      a:hover {
        opacity: 0.8;
      }
    `}</style>
  </div>
)

Les styles sont limités au composant, mais vous pouvez également modifier les styles globaux en ajoutantglobalà lastyleélément:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx global>{`
      body {
        font-family: 'Benton Sans', 'Helvetica Neue';
        margin: 2em;
      }
      h2 {
        font-style: italic;
        color: #373fff;
      }
    `}</style>
  </div>
)

Exporter un site statique

Une application Next.js peut être facilement exportée en tant que site statique, qui peut être déployé sur l'un des hôtes de site statiques ultra rapides, commeNetlifyouHébergement Firebase, sans avoir besoin de configurer un environnement Node.

Le processus vous oblige à déclarer les URL qui composent le site, mais c'estun processus simple.

Déploiement

Il est facile de créer une copie de l'application prête pour la production, sans cartes sources ni autres outils de développement qui ne sont pas nécessaires dans la version finale.

Au début de ce didacticiel, vous avez créé unpackage.jsonfichier avec ce contenu:

{
  "scripts": {
    "dev": "next"
  }
}

qui était le moyen de démarrer un serveur de développement en utilisantnpm run dev.

Maintenant, ajoutez simplement le contenu suivant àpackage.jsonau lieu:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

et préparez votre application en exécutantnpm run buildetnpm run start.

À présent

Zeit s'appelle maintenantVercel, et ce didacticiel est peut-être obsolète

La société derrière Next.js fournit un excellent service d'hébergement pour les applications Node.js, appeléÀ présent.

Bien sûr, ils intègrent leurs deux produits afin que vous puissiez déployer les applications Next.js de manière transparente,une fois que vous avez maintenant installé, en exécutant lenowcommande dans le dossier de l'application.

Dans les coulisses Maintenant, configurez un serveur pour vous, et vous n'avez pas à vous soucier de quoi que ce soit, attendez simplement que l'URL de votre application soit prête.

Zones

Vous pouvez configurer plusieurs instances Next.js pour écouter différentes URL, mais l'application à un utilisateur extérieur aura l'air d'être alimentée par un seul serveur:https://github.com/zeit/next.js/#multi-zones

Plugins

Next.js a une liste de plugins surhttps://github.com/zeit/next-plugins

Kit de démarrage sur Glitch

Si vous cherchez à expérimenter, je recommande Glitch. Découvrez monKit de démarrage Next.js Glitch.

En savoir plus sur Next.js

Je ne peux pas décrire toutes les fonctionnalités de ce grand framework, et le principal endroit pour en savoir plus sur Next.js estle fichier readme du projet sur GitHub.

Téléchargez mon gratuitManuel Next.js