Un guide —

jQuery a bien servi les développeurs pendant de nombreuses années. Cependant, les bibliothèques (comme React) et les frameworks (comme Next.js) nous apportent désormais des fonctionnalités plus modernes pour améliorer les performances et la maintenabilité de notre code. Ce guide vous montrera comment réécrire votre site jQuery utiliser Next.js pour tirer parti de toutes ces nouvelles fonctionnalités, telles que le routage côté client pour des transitions plus fluides et la possibilité de séparer le code en composants pour le rendre plus réutilisable.

Commencer

Le moyen le plus simple de démarrer avec un Next.js consiste à exécuter npx create-next-app. Cette volonté échafauder un projet pour toi. Cependant, pour comprendre ce que fait cette commande, nous allons créer notre application à partir de zéro.

Tout d’abord, nous allons créer notre projet Next.js en utilisant npm init. Vous pouvez continuer avec les paramètres par défaut, car nous les modifierons plus tard. Ensuite, nous voulons installer React et Next.js en utilisant :

npm install react react-dom next

Ensuite, nous pouvons ouvrir le package.json fichier et remplacer la valeur par défaut scripts avec:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

Cela vous permet de courir npm run dev pour démarrer le serveur de développement ; npm run build pour construire votre application ; et npm run start pour démarrer un serveur de cette application construite.

Pour ajouter des pages — comme vous le feriez index.html avec jQuery — créez un répertoire nommé pages et créer un fichier nommé index.jsx dedans. Dans ce fichier, placez le code suivant :

export default function Index() {
  return <h1>Hello World</h1> ;
}

Maintenant, en courant npm run start et naviguer vers localhost:3000vous devriez voir un h1 balise affichée. Le nom de cette fonction n’est pas important, vous pouvez donc l’appeler comme vous voulez. Cependant, n’utilisez pas une fonction de flèche anonyme, car cela empêchera rafraîchissement rapide de travailler.

CSS

Dans jQuery, vous pouvez spécifier CSS par page, en important différentes feuilles de style pour différentes pages. Ceci est également possible dans Next.js en utilisant le next/head composant et un link tag de la même manière que jQuery. Quoi qu’il en soit, il existe des moyens plus performants pour cela dans Next.js.

Feuille de style globale

La première consiste à utiliser une feuille de style globale. Pour ce faire, nous devons créer un fichier personnalisé App en faisant le dossier _app.js à l’intérieur de pages annuaire. Le point de départ de ce fichier est le suivant :

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

En haut de ce fichier, vous pouvez ajouter une déclaration d’importation et importer n’importe quel fichier CSS de votre choix. Par exemple, si vous avez créé un dossier séparé au niveau racine appelé styles et met main.css dedans, alors vous ajouteriez:

import "../styles/main.css"

Maintenant, tout ce que vous mettez dans ce fichier sera appliqué dans toute votre application.

Modules CSS

L’option suivante est les modules CSS – qui vous permettent de spécifier CSS partout dans votre candidature. Ils créeront noms de classe uniques à partir des classes que vous fournissez, vous pouvez donc utiliser un même nom de classe à plusieurs endroits dans le code de votre application.

Développer l’initiale Bonjour le monde exemple, vous pouvez créer un fichier index.module.css dans le même répertoire puis écrivez l’importation :

import styles from "./index.module.css"

Ensuite, si vous deviez définir un heading class dans le fichier CSS, vous pouvez procéder comme suit :

export default function Index() {
  return <h1 className={styles.heading}>Hello World</h1> ;
}

et ces styles ne seront appliqués qu’à cet élément.

Style JSX

La dernière option intégrée est style JSX. Cela ressemble le plus à l’inclusion d’un <style> balise en haut de votre page pour définir certains styles. Ajoutez simplement jsx au <style> balise et utilisez une chaîne de modèle à l’intérieur, comme ceci :

<style jsx>{`
  .heading {
      font-weight: 700
  `}</style>

Cette option a l’avantage d’être modifiable à l’exécution. Par exemple, si vous vouliez fournir le poids de la police dans vos accessoires de composant, vous pourriez faire :

<style jsx>{`
  .heading{
      font-weight: ${props.fontWeight}
  `}</style>

Le seul inconvénient de cette méthode est qu’elle introduit JavaScript d’exécution supplémentaire dans votre application, en augmentant la taille de 12 Ko (3 Ko gzippés).

Événements

Dans jQuery, vous pouvez avoir des événements configurés pour répondre aux éléments DOM. Pour vous donner une idée, vous voudrez peut-être exécuter du code lorsqu’un p tag est cliqué et procédez ainsi :

$( "p" ).click(function() {
    console.log( "You clicked a paragraph!" );
});

Au lieu de cela, React utilise gestionnaires d’événements — que vous avez peut-être vu en HTML — comme onclick. Notez que React utilise camelCase à la place, et donc onclick doit être référencé comme onClick. Par conséquent, la réécriture de ce petit exemple dans React ressemblerait à ceci :

export default function Index() {
  function clickParagraph(){
    console.log("You clicked a paragraph!");
  }
  return <p onClick={clickParagraph}>Hello World</p>;
}

Chaque méthode vient avec ses avantages et ses inconvénients. Dans jQuery, il est facile de faire en sorte que quelque chose se produise tout paragraphes, alors que dans React, vous devez spécifier par paragraphe. Cependant, pour les bases de code plus volumineuses, le fait de devoir spécifier permet de voir facilement ce qui se passera avec l’interaction avec n’importe quel élément, où vous avez peut-être oublié la fonction jQuery.

Effets

Les effets sont utilisés dans jQuery pour afficher et masquer le contenu. Vous avez peut-être déjà quelque chose comme ça :

$( "p" ).hide();

Dans React, ce comportement est implémenté en utilisant rendu conditionnel. Vous pouvez le voir en le combinant avec le remplacement des événements que nous venons de voir :

import {useState} from "react"
export default function Index() {
  const [show, setShow] = useState(true);
  function clickButton(){
    setShow(false)
  }
  return (
    <div>
      <h1>Hello world</h1>
      {show && <button onClick={clickButton}>Click me</button>}
    </div>
  )
}

Lorsque vous cliquez sur ce bouton, la valeur de show à false et donc, la déclaration ne rendra rien. Cela peut être étendu avec l’opérateur conditionnel pour montrer une chose ou une autre, selon la valeur comme ceci :

show ? <p>Show this if show is true</p> : <p>Show this if show is false</p>

Récupération de données

Dans jQuery, Ajax est utilisé pour récupération de données externes sans recharger. Dans React, cela peut être fait en utilisant le useEffect accrocher. Pour cet exemple, nous allons récupérer le taux de change à partir d’une API publique lors du chargement de la page :

import { useState, useEffect } from "react";
export default function Index() {
  const [er, setEr] = useState(true);
  useEffect(async () => {
    const result = await fetch("https://api.exchangerate.host/latest");
    const exchangerate = await result.json();
    setEr(exchangerate.rates["GBP"]);
  }, []);
  return (
    <div>
      <h1>Hello world</h1>
      <p>Exchange rate: {er}</p>
    </div> 
  );
}

useEffect prend une fonction et un tableau de dépendances. La fonction effectue la récupération des données, en utilisant async comme le fetch API de manière asynchrone. Nous pouvons ensuite définir n’importe quel état que nous voulons ici, et il sera mis à jour sur la page. Le tableau de dépendance détermine les changements de valeur qui exécuteront la fonction. Dans ce cas, il est défini sur un tableau vide, ce qui signifie que la fonction ne s’exécutera que lors du premier chargement de la page.

Au-delà de cela, Next.js fournit également options pour récupérer des données sur le serveur ou au moment de la construction. Pour la récupération des données au moment de la construction, la fonction getStaticProps peut être utilisé. Cette fonction améliore les performances car les données peuvent être fournies avec la page, plutôt que d’attendre un service externe. Pour l’utiliser, créez cette fonction dans un page car cela ne fonctionne pas dans les composants.

export async function getStaticProps() {
  return {
    props: {},
  }
}

Vous pouvez effectuer toutes les récupérations de données que vous souhaitez avant le retour, puis transmettre les données à la page sous props – ensuite, les données sont fournies à la page et sont accessibles sous les accessoires.

En remplaçant le nom de la fonction de getStaticProps à getServerSidePropsla fonction sera appelée à chaque demande, vous donnant la possibilité d’utiliser les fonctions Node.js si nécessaire. Il permet également de faire de nombreuses requêtes de données sur le serveur et de les traiter pour réduire la bande passante utilisée par le client.

Vous avez également la possibilité d’un terrain d’entente entre les deux appelé Régénération statique incrémentielle. Cette option générera une page statique de la même manière que getStaticPropsmais il vous permet de spécifier un période de revalidation – qui régénérera la page lorsqu’une demande arrive au plus aussi souvent que la période que vous spécifiez. Pour ce faire, en plus des accessoires, vous devez également inclure un revalidate clé avec le temps en secondes que vous voulez.

Objets en éléments DOM

Avec jQuery, vous devez faire attention à la méthode que vous utilisez pour transformer un objet en éléments DOM. L’exemple le plus courant consiste à créer une liste d’éléments car, avec jQuery, une boucle sur les éléments ajouterait chacun au DOM un par un. Avec React, le DOM virtuel est utilisé pour créer diffs du nouvel état de l’actuel. Cela signifie que malgré l’ajout d’éléments dans une boucle, ils sont ajoutés au vrai DOM en une seule opération.

Cela se fait à l’aide du map fonction en JavaScript, où vous pouvez mapper chaque élément à certains JSX.

export default function Index() {
  const fruits = ["Apple", "Orange", "Pear"];
  return (
    <div>
      <h1>Hello world</h1>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

Notez que l’élément à l’intérieur du map a besoin d’une key soutenir. Ceci est utilisé dans le processus de différenciation décrit ci-dessus, ce qui permet à React de distinguer facilement chaque élément, de sorte que chacun d’eux doit être unique.

Deffereds

L’utilisation de différés dans jQuery peut être remplacée par le JavaScript natif promise Fonctionnalité. La syntaxe des différés a été conçue pour refléter la fonctionnalité des promesses, la syntaxe doit donc être familière et ne pas nécessiter trop de modifications. Un exemple d’endroit où les différés peuvent être utilisés est dans récupération de données. Si vous faites cela avec le fetch méthode en JavaScript, vous pouvez alors ajouter une .then à la fin de la récupération car il renvoie une promesse. Ce code ne s’exécutera que lorsque la récupération sera terminée, et donc les données (ou une erreur) seront présentes. Vous pouvez voir cette fonctionnalité en cours d’utilisation ici :

fetch("example.com")
.then((response) => {
  console.log(response)
})
.catch((error) => {
console.error(error)
})

Cela va chercher example.com et enregistrez la réponse récupérée à moins qu’une erreur ne se produise – dans ce cas, elle sera enregistrée comme une erreur.

En plus de cette syntaxe, la nouvelle async/await La syntaxe peut également être utilisée. Ceux-ci nécessitent une fonction définie comme async, de la même manière que vous pourriez exporter une fonction. Vous pouvez le déclarer ainsi :

async function myFunction(){
  return
}

Dans cette fonction, vous pouvez appeler d’autres fonctions asynchrones en plaçant await devant eux, par exemple :

async function myFunction(){
  const data = await fetch("example.com")
  return data
}

Ce code renverra une promesse qui se résoudra lorsque les données seront récupérées, il doit donc être appelé dans une fonction asynchrone pour attendre le résultat. Cependant, afin d’attraper également les erreurs, vous devrez écrire une condition à vérifier l’état de la réponse – si data.ok n’est pas vrai, une erreur doit être renvoyée. Ensuite, vous pouvez envelopper ces instructions away dans un bloc try catch, plutôt que d’utiliser .catch. Vous pouvez en savoir plus sur ces méthodes dans Cet article.

Améliorations

Routage

Next.js utilise routage du système de fichiersce qui est très similaire à l’utilisation de différents .html pages d’un site Web traditionnel. Cependant, ce système offre également des fonctionnalités au-delà de cela, fournissant des itinéraires dynamiques et permettant d’accéder à une page sous une gamme d’URL.

Par exemple, si vous avez un blog, vous pouvez conserver tous vos fichiers sous /blog/*création d’un fichier [slug].jsx à l’intérieur de blog dossier – qui permettra à ce contenu d’être servi pour toutes les pages sous blog. Ensuite, vous pouvez utiliser le routeur dans Next.js pour trouver la route vers laquelle vous avez navigué, comme ceci :

const router = useRouter()
const { slug } = router.query

Itinéraires d’API

Les routes API vous permettent également d’écrire votre backend dans votre application Next.js. Pour utiliser ces itinéraires, créez un api dossier dans votre pages répertoire – désormais, tous les fichiers créés à l’intérieur de celui-ci s’exécuteront sur le serveur plutôt que sur le client, comme pour le reste des pages.

Pour commencer avec ceux-ci, vous devez exporter une fonction par défaut du fichier, et cela peut prendre deux paramètres. Le premier sera la demande entrante et le second vous permettra de créer la réponse. Une route d’API de base peut être écrite comme ceci :

export default function handler(request, response) {
  response.status(200).json({ magazine: 'Smashing' })
}

Limites

Interface utilisateur jQuery

Vous pouvez utiliser jQuery UI dans votre application pour l’interface utilisateur, mais React ne fournit pas de bibliothèque d’interface utilisateur officielle comme celle-ci. Néanmoins, une gamme d’alternatives a été produite. Deux des plus populaires sont Atteindre l’interface utilisateur et Réagir Aria. Ces deux alternatives se concentrent très fortement sur l’accessibilité, garantissant que le projet que vous créez est utilisable par un plus grand nombre d’utilisateurs.

Animation

Bien que vous puissiez utiliser le rendu conditionnel au lieu d’effets, cela ne fournit pas toutes les mêmes fonctionnalités, car vous ne pouvez pas faire des choses telles que le fondu de contenu. Une bibliothèque qui aide à fournir cette fonctionnalité est Groupe de transition Réagir — qui permet de définir des transitions d’entrée et de sortie.

Conclusion

Passer de jQuery à Next.js est un grande entreprise, en particulier pour les grandes bases de code. Cependant, cette migration vous permet d’utiliser des concepts plus récents (tels que la récupération de données au moment de la construction) et vous permet d’avoir des chemins de migration simples vers les nouvelles versions de React et Next.js, ainsi que les fonctionnalités qu’elles apportent.

React peut vous aider mieux organiser votre code (ce qui est particulièrement important pour les grandes bases de code) et apporte une amélioration substantielle des performances grâce à l’utilisation d’un DOM virtuel. Dans l’ensemble, je pense que la migration de jQuery vers Next.js en vaut la peine, et j’espère que si vous décidez de migrer, vous apprécierez toutes les fonctionnalités que React et Next.js ont à offrir.

Lectures complémentaires sur Smashing Magazine