Optimisation des polices

Expliquer comment optimiser les polices dans une application Next.js

//Path: src/app/Card/page.js

import { Poppins } from "next/font/google";
const poppins = Poppins({
    subsets: ["latin"],
    weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
});
const page = () => {
    return (
        <>
            <h1 className={poppins.className}>Poppins Font Styling</h1>
            <p>this is paragraph</p>
            <button>Click me</button>
        </>
    )
}

export default page

• J’importe la police Poppins via le module next/font/google de Next.js depuis Google Fonts.
• Configurer la police : créez une variable Poppins et attribuez-lui la configuration de la police Poppins, y compris les sous-ensembles et les épaisseurs.
• Enfin, appliquez le style de police Poppins à l’élément
  

  en utilisant le className généré par poppins.className.

Avec cette configuration, Next.js gère automatiquement l’intégration des polices pendant le processus de construction, optimisant ainsi le chargement des polices pour votre application Next.js.

Optimisation des images

Next.js exploite le composant next/image pour fournir une optimisation automatique des images prête à l’emploi. Ce composant optimise les images pour différents appareils et tailles d’écran, fournissant le format et la taille d’image les plus appropriés en fonction des capacités de l’appareil.

Comment utiliser le composant next/image pour l’optimisation d’image dans une application Next.js ?

• Nous devons importer le composant Image du module next/image.
• Ce composant est spécifiquement conçu pour l’optimisation des images dans les applications Next.js.
• L’image est spécifiée en fournissant le chemin (src) vers le fichier image et un attribut alt pour l’accessibilité.
• De plus, les attributs width et height définissent les dimensions auxquelles l’image doit être affichée.
• Dans l’ensemble, ce code montre comment restituer une image optimisée dans un composant React de manière concise.

//Path: src/app/Card/page.js
import { Poppins } from "next/font/google";
import Image from 'next/image';
const poppins = Poppins({
    subsets: ["latin"],
    weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
});
const page = () => {
    return (
        <>
            <h1 className={`${poppins.className} text-base`}>Poppins Font Styling</h1>
            <p className="py-2">this is paragraph</p>
            <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">Click me</button>
            <Image
                src="https://blogs.perficient.com/nextjs.png"
                alt="Description of the image"
                width={200}
                height={400}
                className="py-2"
            />
            <Image
                src="../next.svg"
                alt="Description of the image"
                width={200}
                height={400}
                className="py-2"
            />

        </>

    )
}
export default page

Sortir

Chargement paresseux des images dans Next.js

Voici un exemple de la façon dont vous pouvez implémenter le « chargement paresseux » et les images réactives dans une application Next.js :

import Image from 'next/image';

const LazyLoadedImage = () => {
  return (
    <div>
      {/* Lazy-loaded image*/}
      <Image
        src="https://blogs.perficient.com/2024/03/13/next-js-font-image-optimization-guide/./next.svg"
        alt="Description of the image"
        width={200}
        height={300}
        layout="responsive"
        loading="lazy" // Enable lazy loading
      />
        <img
        src="/vercel.svg"
        alt="Description of the image"
        width={800}
        height={600}
        loading="lazy" // Enable lazy loading
      />
    </div>
  );
};

export default LazyLoadedImage;

• J’importe le composant Image depuis next/image.
• À l’intérieur du composant, je restitue une image à l’aide du composant Image.
• Je précise la source de l’image (src), le texte alternatif (alt), la largeur et la hauteur.
• Le chargement = « paresseux » prop permet le chargement paresseux de l’image. Cela indique au navigateur de différer le chargement de l’image jusqu’à ce qu’elle soit sur le point d’entrer dans la fenêtre.

Lorsque l’utilisateur fait défiler la page et que l’image est sur le point d’être visible, le navigateur la charge, améliorant ainsi les performances et l’expérience utilisateur.

Note: Vous pouvez utiliser la balise dans Next.js comme dans n’importe quelle autre application React ou fichier HTML. Cependant, si vous souhaitez profiter des fonctionnalités d’optimisation d’image intégrées de Next.js, il est recommandé d’utiliser le composant next/image pour de meilleures performances et une optimisation automatique.

Conclusion

En conclusion, l’optimisation des polices et des images dans une application Next.js implique d’importer et de configurer les polices avec l’outil ‘suivant/font/google’ module pour l’intégration automatique des polices et l’utilisation du ‘suivant/image’ composant pour l’optimisation automatique de l’image. Le chargement paresseux des images améliore encore les performances et l’expérience utilisateur. Ces techniques améliorent collectivement l’apparence et la vitesse de chargement des applications Next.js, garantissant une expérience de navigation plus fluide.