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
- Caractéristiques principales
- Installation
- Commencer
- Créer une page
- Rendu côté serveur
- Ajouter une deuxième page
- Rechargement à chaud
- Rendu client
- Pages dynamiques
- CSS-en-JS
- Exporter un site statique
- Déploiement
- À présent
- Zones
- Plugins
- Kit de démarrage sur Glitch
- En savoir plus sur Next.js
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 le
pages
dossier, 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: le
Link
composant, utilisé pour relier différentes pages, prend en charge unprefetch
prop 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 le
next 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.json
fichier 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 lepages
dossier. C'est la seule chose dont Next.js a besoin pour s'exécuter.
Créer un videpages
dossier, 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é.
Next.js gère également d'autres types d'erreurs, comme 500 erreurs par exemple.
Créer une page
Dans lepages
dossier créer unindex.js
fichier 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'unpages
dossier 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 Source
avec 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/contact
cette 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 lenpm
processus 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 unLink
composant 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-click
le 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:
Créez maintenant unpost.js
fichier dans lepages
dossier, 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:
Vous pouvez utiliser des URL propres sans paramètres de requête. Le composant Next.js Link nous aide en acceptant unas
attribut, 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.json
fichier 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.json
au lieu:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
et préparez votre application en exécutantnpm run build
etnpm 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 lenow
commande 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
Plus de prochains tutoriels:
- Premiers pas avec Next.js
- Next.js vs Gatsby vs create-react-app
- Comment installer Next.js
- Lier deux pages dans Next.js à l'aide de Link
- Contenu dynamique dans Next.js avec le routeur
- Flux de données vers un composant Next.js à l'aide de getInitialProps
- Styliser les composants Next.js à l'aide de CSS
- Pré-extraire du contenu dans Next.js
- Utilisation du routeur pour détecter le lien actif dans Next.js
- Afficher la source pour confirmer que SSR fonctionne dans Next.js
- Next.js: remplissez la balise head avec des balises personnalisées
- Déployer une application Next.js maintenant
- Next.js: exécutez le code uniquement côté serveur ou côté client dans Next.js
- Déployer une application Next.js en production
- Comment analyser les bundles d'applications Next.js
- Modules de chargement paresseux dans Next.js
- Ajout d'un composant wrapper à votre application Next.js
- Les icônes ajoutées par Next.js à votre application
- Les offres groupées d'applications Next.js
- Comment utiliser le routeur Next.js
- Comment utiliser les routes d'API Next.js
- Comment obtenir des cookies côté serveur dans une application Next.js
- Comment changer le port d'une application Next.js