Table des matières[Cacher][Montrer]
Lors du choix d'une bibliothèque de logiciels ou d'un framework, l'expérience du développeur est généralement prise en compte.
Lorsque je parle d'« expérience de développeur », je fais référence à la façon dont les développeurs font réellement le travail. Les développeurs choisissent des bibliothèques ou des frameworks agréables à utiliser.
C'est l'une des principales raisons pour lesquelles nous avons maintenant les bibliothèques et les frameworks les plus populaires. En tant que développeurs, nous n'avons pas à repartir de zéro lorsqu'il existe des outils créés pour nous aider dans nos tâches.
Les frameworks sont des logiciels créés et utilisés par les développeurs pour construire des applications, et NextJS en fait partie.
Dans cet article, nous passerons en revue Nextjs, ses principales fonctionnalités et comment nous pouvons l'utiliser pour créer une application. Allons droit au but.
Qu'est-ce que Next.js ?
Next.js est un framework JavaScript permettant de créer rapidement et facilement des pages Web statiques et des applications en ligne basées sur React. Il vous permet de concevoir d'excellentes applications Web pour une variété de plates-formes, notamment Windows, Linux et Mac.
Vous devez être familiarisé avec le framework Next.js si vous avez une connaissance minimale de la réaction et que vous souhaitez en savoir plus sur l'écosystème de réaction.
Même si Next.js est livré avec tout ce dont vous avez besoin pour démarrer, vous pouvez choisir entre NPM et Yarn, JavaScript et TypeScript, CSS et SCSS, l'exportation statique et le déploiement sans serveur.
Fonctionnalités:
- Le routage se fait automatiquement - Vous n'avez rien à configurer car toute URL est mappée au système de fichiers, aux fichiers du dossier pages (vous avez bien sûr des options de personnalisation).
- Composants d'un fichier unique - Il est simple d'ajouter des styles au composant à l'aide de styled-jsx, qui est totalement intégré et produit par la même équipe.
- Rechargement d'un code à chaud - Lorsque Next.js détecte une modification enregistrée sur le disque, il recharge la page.
- Composants dynamiques - Vous pouvez charger dynamiquement des modules JavaScript et des composants React.
- Exportations statiques - Next.js vous permet d'exporter un site complètement statique à partir de votre application avec la prochaine commande d'exportation.
- Compatibilité avec l'environnement - Next.js s'intègre de manière transparente aux écosystèmes JavaScript, Node et React.
- Fractionnement automatique des codes – Seuls les bibliothèques et JavaScript nécessaires sont utilisés pour afficher les pages. Au lieu de créer un seul fichier JavaScript contenant tout le code de l'application, Next.js divise intelligemment l'application en plusieurs ressources.
Comment créer une application next.js ?
Installation
Vous pouvez utiliser la commande node npx pour installer et créer un projet Next.js.
Cela générera un dossier et tous les fichiers, configurations et autres éléments requis pour exécuter un projet Next.js.
Vous pouvez lancer l'application une fois qu'elle a été générée.
Pages et routage
Pour gérer les routes avec Next.js, nous n'avons pas besoin d'utiliser un framework de routage. Le routage avec Next.js est un jeu d'enfant à configurer. Lorsque vous utilisez la commande create-next-app pour créer une nouvelle application Next.js, l'application crée un dossier appelé « pages » par défaut.
Ce dossier 'pages' est l'endroit où vous gérez vos routes. Par conséquent, chaque fichier de composants de réaction dans le sous-répertoire sera traité comme une route distincte.
Par exemple, si le dossier contient ces fichiers :
- index.js
- à propos de.js
- aricles.js
Ce fichier sera automatiquement transformé de trois manières :
- La page d'index localhost/index
- La page à propos localhost/about
- La page de blog localhost/articles
Un exemple de page about.js est présenté ci-dessous. Rien n'est fourni sur la page, comme vous pouvez le voir. Il s'agit simplement d'un composant fonctionnel standard de React.
Routes
Pour créer des itinéraires imbriqués, vous devez d'abord créer un sous-dossier. Par exemple : pages/articles. Créez votre composant de réaction 'contact.js' dans ce dossier, et il générera la page localhost/articles/contact.
Si vous mettez un fichier dans pages/articles.js et un autre dans pages/articles/index.js. Les deux reflètent le même chemin localhost/blog. Dans cette situation, Next.js rendra simplement le fichier article.js. Qu'en est-il des routes dynamiques, dans lesquelles chaque article de blog a son propre chemin :
- localhost/blog/premier-article
- localhost/blog/-second-article
À l'aide de la notation entre crochets, vous pouvez définir une route dynamique dans Next.js. Par exemple : pages/article/[slug].js
Itinéraires de liaison
Vous avez maintenant terminé votre premier itinéraire. Je suppose que vous demandez comment connecter des pages à ces itinéraires. Vous aurez besoin de 'suivant/lien' pour le faire.
Voici un exemple de page d'accueil incluant un lien vers la page À propos :
Si vous souhaitez styliser le lien, utilisez la syntaxe suivante :
Rediriger les itinéraires
Que faire si vous avez besoin de forcer une redirection vers une certaine page ? Par exemple, lorsqu'un bouton est enfoncé ? Vous pouvez accomplir cela en utilisant 'router.push' :
SEO
Les pages des applications Web nécessitent des éléments meta (head) en plus des données dans le corps HTML. Cela nécessitera l'installation d'une exigence supplémentaire nommée React Helmet dans une application React.
Nous pouvons utiliser le composant Head de next/head in Next pour ajouter facilement des métadonnées à nos pages Web qui seront affichées dans les résultats de recherche et intégrer :
Composantes
Vous aurez fréquemment besoin de développer des composants ou un fichier de mise en page. Par exemple, un composant qui affiche la barre de navigation. Nous venons d'utiliser le dossier pages jusqu'à présent. Que se passe-t-il si votre composant n'est pas censé être une page de routage ?
Vous ne voulez pas que l'utilisateur accède à une page telle qu'un localhost/navbar. Si vous placez le composant Navbar.js dans le dossier pages, c'est ce qui se passera. Que devez-vous faire dans la situation?
Stockez simplement tous vos composants "pas une page" dans un dossier séparé. La plupart des projets Next.js utilisent le surnom "components" et ce dossier est généré dans le dossier racine de votre projet.
Composant de tête
Le chargement initial de la page est rendu par Next.js côté serveur. Il le fait en modifiant le code HTML de votre page. La section d'en-tête est incluse.
Le composant Next.js Head est utilisé pour donner des balises de section d'en-tête telles que title et meta. Le composant Head est utilisé dans cet exemple de composant Layout.
Créer une page 404 introuvable
Il est possible de créer votre propre page d'erreur 404. Vous souhaiterez peut-être personnaliser le message ou ajouter votre propre conception de page. Dans le dossier pages, créez le fichier 404.js.
Lorsqu'une erreur 404 se produit, Next.js redirige automatiquement vers cette page. Voici un exemple de page 404 personnalisée :
Récupération de données côté serveur
Au lieu de télécharger des données côté client, Next.js vous permet d'effectuer une première population de données, ce qui implique d'envoyer la page avec les données déjà remplies depuis le serveur.
Vous avez deux choix pour mettre en œuvre la récupération de données côté serveur :
- Les données doivent être récupérées à chaque requête.
- N'obtenez les données qu'une seule fois tout au long du processus de construction (site statique)
Récupérer des données à chaque requête
La méthode getServerSideProps est utilisée pour rendre chaque requête côté serveur. Cette fonction peut être incluse à la fin de votre fichier composant. Next.js remplira automatiquement vos accessoires de composant avec l'objet getServerSideProps si cette fonction est présente dans votre fichier de composant.
Récupérer les données au moment de la construction
La méthode getStaticProps est utilisée pour rendre le côté serveur au moment de la construction. Cette fonction peut être incluse à la fin de votre fichier composant. Cette méthode exécute le code du serveur et envoie une requête GET au serveur, mais une seule fois lorsque notre projet est terminé.
Pourquoi devriez-vous apprendre Next.js ?
L'une des raisons en est que Next.js est construit sur React, une boîte à outils de développement frontale pour création d'interfaces utilisateur qui sont mon choix préféré pour la conception d'applications Web.
Mais ce ne serait pas suffisant si Next.js n'était pas bon dans ce qu'il faisait… n'est-ce pas ?
Alors, que fait-il exactement?
Nous devons d'abord définir quelques concepts afin de le comprendre. Next.js a gagné en popularité car il a résolu un problème rencontré par de nombreux développeurs Web avec les applications Web côté client (dans le navigateur). Ces applications à page unique (SPA) offraient une meilleure expérience car elles n'avaient pas besoin que l'utilisateur recharge la page et permettaient plus d'interactivité.
Cependant, étant donné que la majeure partie du contenu d'une application comme celle-ci ne devient visible que lorsqu'elle est exécutée dans le navigateur, les robots d'exploration Web ont du mal à comprendre le contenu textuel d'une telle application.
En conséquence, malgré leur popularité, de nombreux SPA sont restés largement anonymes pour les grands moteurs de recherche tels que Google. Next.js inclut désormais un mécanisme intégré plus robuste pour le rendu côté serveur (SSR) des composants React.
Next.js permet aux développeurs de construire du code JavaScript sur le serveur pendant le processus de construction et de fournir du code HTML de base indexable à l'utilisateur.
Avantages
- Idéal pour l'expérience utilisateur
- Idéal pour le référencement
- Créez un site Web statique ultra-rapide qui se comporte comme un site Web dynamique
- Flexibilité dans la construction de l'UI et de l'UX.
- De nombreux avantages de développement
- Excellent soutien communautaire
Inconvénients
- Les sites Web ou les applications ont un certain temps pour se construire ou se développer.
- Pour certaines tâches, Next.js est inadéquat. Les développeurs doivent être capables de construire des routes dynamiques à l'aide des outils Node.js.
Conclusion
Comme vous pouvez le constater, Next.js simplifie le développement d'applications React et vous permet de vous concentrer sur ce qui compte le plus : la logique de votre application et l'interface utilisateur. Il comprend tout le nécessaire pour créer des applications contemporaines, riches en interface et alimentées par des API.
Il convient également aux projets de contenu uniquement, tels que les blogs et les sites Web d'entreprise, en raison de sa capacité à créer des pages HTML statiques.
Avec les éditions actuelles, Next.js maintient non seulement un haut niveau d'expérience de développement, mais fournit également des outils pour augmenter les performances visuelles et l'expérience utilisateur, assurant un avenir radieux à ce framework.
Soyez sympa! Laissez un commentaire