Nextjs pour tout le monde - avec quelques connaissances de base de React

Avec quelques connaissances de base sur React et JavaScript, vous serez sur votre chemin

Next.js est un framework JavaScript créé par Zeit. Il vous permet de créer des rendus côté serveur et des applications Web statiques à l'aide de React. C'est un excellent outil pour créer votre prochain site Web. Il possède de nombreuses fonctionnalités et avantages qui peuvent faire de Nextjs votre première option pour créer votre prochaine application Web.

Vous n'avez besoin d'aucune configuration de webpack ou similaire pour commencer à utiliser Next.js. Il est livré avec sa configuration. Tout ce dont vous avez besoin est d'exécuter npm run devet de commencer à créer votre application?.

Dans cet article, nous allons explorer les excellentes fonctionnalités et astuces de Next.js, et comment commencer à créer votre prochain site Web avec.

Cet article suppose que vous avez des connaissances de base sur React et JavaScript.

Voici quelques excellents sites Web créés avec Next.js:

  • Syntaxe.fm
  • npmjs
  • material-ui.io
  • expo.io
  • codemenitor.io

J'ai même utilisé Nextjs pour créer mon site Web personnel saidhayani.me - vous pouvez obtenir le code source sur GitHub ici.

Premiers pas avec Next.js

Pour commencer avec Next.js, vous devez avoir node.js installé sur votre machine et c'est tout. Next.js est comme n'importe quelle autre application node.js - vous avez besoin de npm ou Yarn pour installer les dépendances.

Commençons et créons un projet Next.js.

Tout d'abord, nous devons créer un dossier et lui donner un nom de notre choix. Je vais l'appeler nextjs-app.

Vous pouvez facilement le faire avec cette ligne de commande:

mkdir nextjs-app

Après avoir créé le dossier nextjs-app, ouvrez-le sur le terminal. Exécutez npm init pour créer le package.json fichier.

Ensuite, nous devons installer nos dépendances.

Installation de Next.js

  • en utilisant Yarn, tapez
yarn add next
  • à l'aide de npm, tapez:
npm i next --save

Ensuite, nous devons installer React car Next.js utilise React. La première ligne ci-dessous utilise Yarn pour l'installation.

yarn add react react-dom
// with npm
npm i react react-dom --save

Après cela, vous devez créer deux dossiers nécessaires: pageset static. Next.js ne fonctionnera pas sans eux !!

mkdir pages static

Vous devez avoir cette structure après avoir exécuté ces commandes:

nextjs-app -pages -static -package.json

Et puis simplement, vous pouvez exécuter npm next devpuis ouvrir //localhost:3000/ dans votre navigateur.

La NotFoundpage s'affichera car nous n'avons pas encore de page!

Alors créons une homepage et un point d'entrée index.js.

touch index.js home.js

Et puis vous pouvez écrire un composant React normal. Comme je l'ai dit ci-dessus, Next.js sert à créer des applications React.

Voici à quoi home.jsressemble notre :

Et voici notre index.jsdossier:

Next.js a une fonction de rechargement en direct. Tout ce que vous avez à faire est simplement de changer et d'enregistrer, et Next.js compilera et rechargera automatiquement l'application pour vous.

Remarque : Next.js est comme tout autre outil de rendu côté serveur dont nous avons besoin pour définir la page par défaut de notre application, dans notre cas index.js.

Vous verrez ce changement dans le navigateur après avoir exécuté npm next dev:

Toutes nos félicitations! Nous venons de créer une application Next.js en quelques étapes simples. Ces instructions pour créer une application Next.js sont décrites dans la documentation officielle de Next.js.

Mon alternative

Je n'utilise généralement pas de cette façon. J'utilise la CLI create-next-app à la place qui fera tout cela pour moi en une seule ligne.

npx create-next-app my-app

Vous pouvez consulter la documentation ici pour explorer plus de fonctionnalités.

Créer des configurations personnalisées pour Next.js

Parfois, vous souhaiterez peut-être ajouter des dépendances ou des packages supplémentaires à votre application Next.js.

Next.js vous offre la possibilité de personnaliser votre configuration à l'aide d'un next-config.jsfichier.

Par exemple, vous souhaiterez peut-être ajouter une prise en charge sass à votre application. Dans ce cas, vous devez utiliser le package next-sass et vous devez l'ajouter au next-config.jsfichier comme dans l'exemple ci-dessous:

Tout d'abord, installez next-sass:

yarn add @zeit/next-sass

Ensuite, incluez-le dans le next-config.jsfichier:

Et puis vous pouvez créer, écrire votre code sass et l'importer dans votre composant:

Importer le fichier sass dans notre composant:

Et voici le résultat:

Wow, n'était-ce pas super facile d'ajouter un support sass à notre application Next.js?

À ce stade, nous venons de couvrir la partie installation et configuration. Parlons maintenant des fonctionnalités de Next.js!

Les caractéristiques

Next.js est livré avec un tas de fonctionnalités intéressantes telles que le rendu côté serveur, les routeurs et le chargement différé.

Rendu côté serveur

Next.js effectue le rendu côté serveur par défaut. Cela rend votre application optimisée pour les moteurs de recherche. En outre, vous pouvez intégrer n'importe quel middleware tel que express.js ou Hapi.js, et vous pouvez exécuter n'importe quelle base de données telle que MongoDB ou MySQL.

En parlant d'optimisation des moteurs de recherche, Next.js est livré avec un Headcomposant qui vous permet d'ajouter et de créer des balises meta dynamiques. C'est ma fonctionnalité préférée - vous pouvez créer des balises meta personnalisées et dynamiques. Ceux-ci permettent à votre site Web d'être indexé par des moteurs de recherche comme Google. Voici un exemple de Headcomposant:

Et vous pouvez importer et utiliser le Headcomposant dans n'importe quelle autre page:

Impressionnant!

Remarque : avec Next.js, vous n'avez pas besoin d'importer React car Next.js le fait pour vous.

Générer un site Web statique avec Next.js

Outre le rendu côté serveur, vous pouvez toujours compiler et exporter votre application en tant que site Web statique HTML et la déployer sur un site Web statique hébergé comme une page GitHub ou Netlify. Vous pouvez en savoir plus sur la création d'un site Web statique avec Next.js ici dans la documentation officielle.

Les routeurs

C'est une autre des fonctionnalités intéressantes de Next.js. Lorsque vous utilisez l'application create-react-app, vous devez généralement installer react-router et créer sa configuration personnalisée.

Next.js est livré avec ses propres routeurs sans configuration. Vous n'avez besoin d'aucune configuration supplémentaire de vos routeurs. Créez simplement votre page dans le pagesdossier et Next.js s'occupera de toute la configuration de routage.

Allons-y et créons une navigation personnalisée pour que tout soit clair!

Pour naviguer entre les pages, Next.js a la Linkméthode pour gérer la navigation.

Créons blog.jset contact.jspages:

blog.js

Et voici la contact.jspage:

Et maintenant, nous devons pouvoir naviguer entre ces pages?

Wow c'est si facile et super génial.

Chargement paresseux

Le chargement différé permet à votre application d'offrir une meilleure expérience utilisateur. Parfois, la page peut prendre du temps à se charger. L'utilisateur peut abandonner votre application si le chargement prend plus de 30 secondes.

Le moyen d'éviter cela est d'utiliser une astuce pour indiquer à l'utilisateur que la page est en cours de chargement, par exemple en affichant un spinner. Le chargement paresseux ou le fractionnement de code est l'une des fonctionnalités qui vous permettent de gérer et de contrôler le chargement lent afin de ne charger que le code nécessaire dans votre page.

Next.js est livré avec sa propre méthode de fractionnement de code. Il nous fournit une méthode, appelée dynamic, pour charger notre composant, comme dans l'exemple ci-dessous:

Vous pouvez trouver le code source de ces exemples sur GitHub

C'est tout. J'espère que cela suffit et j'espère que cet article vous donnera une idée claire de Next.js et de ses fonctionnalités. Vous pouvez en savoir plus sur les autres fonctionnalités dans la documentation officielle.

Si vous avez d'autres ajouts à ce message, vous pouvez laisser un commentaire ci-dessous et si vous aimez ce message, appuyez sur applaudir? et partager.

Discuter sur Twitter ?.

En passant, j'ai récemment travaillé avec un groupe d'ingénieurs logiciels pour l'une de mes applications mobiles. L'organisation était formidable et le produit a été livré très rapidement, beaucoup plus rapidement que les autres entreprises et indépendants avec lesquels j'ai travaillé, et je pense que je peux honnêtement les recommander pour d'autres projets. Envoyez-moi un e-mail si vous souhaitez me contacter - [email protected]