Next.js est un framework open source conçu pour fonctionner avec React. Il est utilisé pour créer des pages de destination, des sites Web optimisés pour le référencement, des boutiques de commerce électronique et toutes sortes d'applications Web nécessitant des temps de chargement rapides et performants. D'autre part, Tapez Script est un langage de programmation basé sur JavaScript, supporté par Next.js. Ces deux éléments combinés offrent une meilleure expérience à la fois pour l'utilisateur et pour le développeur.
Next.js et TypeScript sont principalement classés dans la catégorie des frameworks complets, des langages de création de modèles et des outils d'extensions, respectivement, mais regardons quoi et comment les deux sont appliqués et comment ils peuvent travailler ensemble, y compris des exemples de son application.
Next.js est un framework open source créé par Vercel. Il prétend être le kit de développement logiciel du Web avec tous les outils nécessaires « pour créer le Web ». Plus vite » (sic). Découvrez les fonctionnalités de Next.js avec React et ses applications ici.
Next.js permet aux moteurs de recherche d'optimiser facilement les applications React sans aucune configuration. Une application React traditionnelle est rendue côté client où le navigateur commence par une coque de page HTML dépourvue de contenu rendu. À partir de là, le navigateur récupère le fichier JavaScript contenant le code React pour afficher le contenu de la page et la rendre interactive. Cependant, il existe deux principaux inconvénients du rendu côté client:
1. Le contenu n'est pas indexé de manière fiable par tous les moteurs de recherche ou lu par des robots de réseaux sociaux ;
2. L'accès à la première page contenant du contenu peut prendre plus de temps lorsqu'un utilisateur accède pour la première fois à la page Web.
Next.js est un framework qui vous permet de créer une application React mais rendre le contenu à l'avance sur le serveur Ainsi, la première chose qu'un utilisateur ou un robot de recherche voit est le code HTML entièrement rendu. Après avoir reçu cette page initiale, le rendu côté client prend le relais et fonctionne comme une application React traditionnelle. C'est le meilleur des deux mondes : un contenu entièrement rendu pour les robots et un contenu hautement interactif pour les utilisateurs.
La vraie magie entre en jeu lorsque nous parlons de récupération de données car Next.js peut exécuter plusieurs stratégies de rendu de serveur à partir d'un seul projet. La récupération de données côté client est utile lorsque votre page ne nécessite pas d'indexation SEO, lorsque vous n'avez pas besoin de pré-afficher vos données ou lorsque le contenu de vos pages doit être mis à jour fréquemment. La génération statique ou le pré-rendu vous permet de rendre vos pages au moment de la création. Consultez l'exemple ci-dessous.
Il est possible de voir dans l'extrait de code précédent un exemple de récupération de données côté client à l'aide du Effet d'utilisation hook de React.
Tout d'abord, nous avons initialisé des constantes pour vérifier si la récupération est toujours en attente et pour enregistrer les données résultant du processus de récupération. Ensuite, nous appelons Effet d'utilisation hook avec 2 arguments différents :
TypeScript est un langage de programmation développé et maintenu par Microsoft, et il s'agit d'un sur-ensemble strict de JavaScript. Il prend en charge le typage statique et dynamique et fournit en outre des fonctionnalités d'héritage, des classes, des étendues de visibilité, des espaces de noms, des interfaces, des unions et d'autres fonctionnalités modernes. TS a été conçu pour gérer des projets de plus grande envergure car il est plus facile de refactoriser le code. Apprenez-en plus sur ses fonctionnalités grâce à une comparaison approfondie avec JavaScript.
Il existe de nombreuses raisons pour lesquelles un développeur JavaScript envisage d'utiliser TypeScript :
Voici un guide étape par étape pour installer TypeScript dans une application Next.js :
1. Créer un projet de base - commande : Exemple d'application suivante npx create-next-app.
Créez un projet à l'aide d'un modèle de base.
2. Ajouter tsconfig.json à la racine du projet pour activer TypeScript.
3. Structurez le projet dans le formulaire.
4. Création de types TypeScript dans Next.js
Vous pouvez créer des types pour n'importe quel élément de votre application, y compris les types d'accessoires, les réponses d'API, les arguments des fonctions, etc.
Nous créons d'abord un type pour notre todos:
5. Création de composants dans Next.js
Maintenant que nous avons notre ITODO type, nous pouvons créer le À DO.tsx composant.
Comme vous pouvez le voir, nous commençons par importer le type précédent que nous avons créé et en créons un autre appelé accessoires, qui reflétera les accessoires reçus en tant que paramètres par le composant.
Ce composant est chargé d'afficher à Do objet. Ce composant reçoit le à Do objet, un Mark Todo fonction, et une Supprimer Todo fonctionnent comme des accessoires. Notez que cet argument doit correspondre au type d'accessoires pour satisfaire Typescript.
Créons maintenant notre FormTodo.tsx composant, responsable de l'ajout Tous dans notre application.
Notre composant accepte les Ajouter à faire en tant que paramètre. Il gère la soumission d'un nouveau Todo. Si la valeur n'est pas vide, nous appelons le Ajouter à faire fonction sur ce texte de tâche, puis définissez à nouveau la valeur du formulaire pour qu'elle soit vide. Ce composant renvoie un formulaire qui accepte les tâches et comporte un bouton d'envoi. En cliquant sur ce bouton, nous ajoutons la tâche à la liste des tâches.
6. Créez notre page afin d'utiliser nos composants de réaction.
Nous allons commencer par importer les composants et les types que nous avons créés précédemment.
Après avoir importé les composants et les types, nous avons importé Type de props statiques Inferget, qui est fourni par Next.js, ce qui nous permet de définir le type sur la méthode getStaticProps.
Après cela, nous avons initialisé notre Liste de To-Do à l'aide du État américain hook, en passant en argument nos tâches initiales fournies par le Obtenez des accessoires statiques.
Enfin, nous avons déclaré nos principales fonctions qui implémentent notre logique :
Ajouter à faire - permet d'ajouter un todo dans notre listeSupprimer Todo - permet de supprimer une chose à faire dans notre listeMark Todo - permet de définir une tâche comme terminée dans notre liste
À la fin, nous renvoyons une liste de nos todos, en utilisant nos composants.
Un spécialiste du marketing de croissance polyvalent et axé sur les données, doté d'une connaissance approfondie des affaires et informé des derniers développements dans le paysage du marketing numérique.
Un développeur jeune et passionné qui cherche à faire une différence dans la façon dont les gens mènent leur vie quotidienne.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
