Next.js est un framework React livré avec toutes les fonctionnalités dont vous avez besoin pour la production. Il vous offre la meilleure expérience développeur car il est livré avec plusieurs fonctionnalités qui auraient été installées et gérées par vous-même dans une application "vanilla" React. Dans ce guide, je vais vous présenter Next.js en expliquant d'abord ce qu'est Next et pourquoi utiliser un tel outil, et puis créer une application de base avec.

Allons-y

Qu'est-ce que Next.js?

Next.js est un framework construit avec React, Node.js, Babel et Webpack. Il est livré par défaut avec des fonctionnalités pratiques qui ne sont pas disponibles dans une application "vanilla" React.

Next.js vous offre la meilleure expérience de développement avec toutes les fonctionnalités dont vous avez besoin pour la production: rendu hybride statique et serveur, prise en charge de TypeScript, bundling intelligent, pré-extraction de routes, etc. Aucune configuration nécessaire.

Next.js vous permet d'exporter votre site Web de manière statique au format HTML ou de le rendre sur le serveur. Il divise automatiquement votre code, ce qui réduit la taille de votre bundle et rend votre application rapide, car, à la fin, seul le JavaScript nécessaire sera chargé sur le navigateur.

Next.js active le routage dans votre application à l'aide du routage basé sur le système de fichiers. Il utilisera automatiquement les fichiers situés dans le dossier pages comme route, ce qui signifie que vous n'avez même pas besoin d'ajouter une bibliothèque supplémentaire pour créer une application multi-pages avec Next.

Le framework Next.js fournit une solution simple pour créer votre API à l'aide de routes API. Vous pouvez créer l'intégralité de votre API avec GraphQL, Express ou votre framework préféré, puis la connecter à une base de données à l'aide de routes API. Next.js traite les fichiers du répertoire pages/api comme des points de terminaison d'API.

Contrairement à React, Next a un support intégré pour Styled JSX, Sass, les modules CSS, etc., ce qui rend l'application Next.js facile à styliser.

Créer une application Next.js

Une application Next.js peut être créée manuellement ou avec Create Next App. Nous opterons pour ce dernier car c'est la méthode recommandée, et il mettra tout en place automatiquement pour nous.

Alors, ouvrez votre interface de ligne de commande (CLI) et exécutez la commande suivante:

  npx create-next-app my-app

Une fois le projet créé, explorons maintenant la structure des fichiers:

Structure des fichiers

├── pages
|  ├── api
|  |  └── hello.js
|  ├── index.js
|  └── _app.js
├── styles
|  ├── globals.css
|  └── Home.module.css
├── package.json
└── yarn.lock
├── README.md

Comme je l'ai mentionné précédemment, Next.js utilise le système de fichiers pour activer le routage dans l'application. Ici, le fichier index.js est la page d'accueil du projet. Si vous ajoutez un nouveau fichier dans le dossier pages, il sera traité comme une route.

Create Next App est fourni par défaut avec le dossier api, ce qui signifie que le fichier hello.js est un point de terminaison d'API. Si vous cliquez sur la route API http://localhost:3000/api/hello, vous obtiendrez une réponse du serveur.

Next.js utilise le composant App pour initialiser les pages. Le fichier _app.js vous permet de remplacer le comportement par défaut du composant. Si vous avez des styles ou des données globaux qui doivent être partagés entre vos composants, placez-les ici. Au passage, le symbole de soulignement (_) indique à Next.js de ne pas utiliser le fichier comme route.

Avec cela en place, nous pouvons maintenant prévisualiser le projet en exécutant cette commande sur le terminal:

  yarn dev

Ou pour npm

  npm run dev

Visite sur le navigateur http://localhost:3000

Génial! Nous avons maintenant terminé avec l'introduction à Next.js. Nous plongerons dans le routage statique et dynamique avec Next.js dans la prochaine partie de la série.

Merci d'avoir lu et à la prochaine.