Images et polices Next.js

Next.js fournit des fonctionnalités intégrées d'optimisation des images et des polices conçues pour améliorer les performances des applications et l'expérience utilisateur.

Les fonctionnalités d'optimisation des images et des polices de Next.js offrent aux développeurs des outils puissants pour aider à créer des applications web hautes performances avec une excellente expérience utilisateur.

FonctionnalitéDescription
Optimisation des imagesUtilise le<Image>composant, prend en charge les images locales et distantes, optimise automatiquement la taille et les performances de chargement.
Optimisation des policesUtilise lenext/fontmodule, prend en charge Google Fonts et les polices locales, héberge et optimise automatiquement le chargement.
Gestion des ressources statiquesPlacez les ressources statiques dans lepublicrépertoire, et accédez-y via/filenamedirectement.

Gestion des ressources statiques

Next.js permet de stocker des ressources statiques (telles que des images, des polices, etc.) dans le répertoire public.

Ces ressources sont accessibles directement via /filename.

Exemple de structure de répertoire :

my-next-app/
├── app/
├── public/
│   ├── images/
│   │   └── logo.png
│   └── fonts/
│       └── my-font.woff2
├── package.json
└── next.config.js

public/images/logo.pngAccessible via/images/logo.png.

Optimisation des images

Next.js fournit le<Image>composant pour optimiser le chargement des images. Il étend l'élément HTML<img>et fournit les fonctionnalités suivantes :

  • Optimisation de la taille: Fournit automatiquement des images correctement dimensionnées pour différents appareils et prend en charge les formats d'image modernes (tels que WebP).

  • Stabilité visuelle: Empêche le décalage de mise en page pendant le chargement des images.

  • Chargement plus rapide: Utilise le chargement différé natif du navigateur, en chargeant uniquement lorsque l'image entre dans la zone d'affichage.

  • Flexibilité des ressources: Prend en charge le redimensionnement d'images à la demande, même pour les images distantes.

Utilisation<Image>Composants

fromnext/imageImportez le<Image>composant et utilisez-le dans votre composant.

Exemple

import Image from 'next/image';

export default function Page() {
  return <Image src="/images/logo.png" alt="Logo" width={500} height={300} />;
}

Images locales

Les images locales peuvent être référencées directement depuis le dossier public.

Exemple

import Image from 'next/image';
import profilePic from './me.png';

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Photo de l'auteur"
      // width et height sont automatiquement obtenus à partir du fichier image
      // blurDataURL et placeholder sont optionnels
    />
  );
}

Images distantes

Les images distantes nécessitent de spécifier manuellement width et height pour éviter un décalage de mise en page.

Exemple

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Photo de l'auteur"
      width={500}
      height={500}
    />
  );
}

Configuration des images distantes

Configurez les domaines d'images distantes autorisés dans next.config.js.

Exemple

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
};

export default nextConfig;

Optimisation des polices

Next.js fournit lenext/fontmodule pour optimiser le chargement des polices. Il prend en charge l'hébergement automatique des fichiers de police, ce qui améliore la confidentialité et les performances.

Utilisation de Google Fonts

Importez des polices depuis next/font/google et appliquez-les aux éléments HTML.

Exemple

import { Geist } from 'next/font/google';

const geist = Geist({
  subsets: ['latin'],
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  );
}

Si vous utilisez des polices non variables, vous devez spécifier le poids :

Exemple

import { Roboto } from 'next/font/google';

const roboto = Roboto({
  graisse: '400',
  subsets: ['latin'],
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  );
}

Utilisation de polices locales

Importer des fichiers de police locaux depuis next/font/local.

Exemple

import localFont from 'next/font/local';

const myFont = localFont({
  src: './my-font.woff2',
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  );
}

Si vous utilisez plusieurs fichiers de police :

Exemple

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      graisse: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      graisse: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      graisse: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      graisse: '700',
      style: 'italic',
    },
  ],
});
Autres extensions