Les images jouent un rôle important dans l'apparence visuelle de tout site web. Concentrons-nous sur la façon de les ajouter dans Next.js.

Le composant `<Image>` est une version avancée de la balise HTML `<img>` conventionnelle qui offre une gamme d'optimisations automatiques. Il a été conçu pour répondre aux complexités de la conception web moderne et assure une expérience utilisateur visuellement stable en atténuant les décalages de mise en page pendant la phase de chargement. Le composant redimensionne également intelligemment les images, ce qui réduit la consommation de bande passante sur les appareils avec des affichages plus petits, optimisant ainsi la livraison de contenu.

Voyons comment intégrer des images dans notre projet. Dans le dossier `public`, vous trouverez `hero-desktop.png` et `hero-mobile.png`. Il est temps de les inclure dans notre fichier `app/page.tsx` en utilisant le composant `Image` de `next/image`.

En naviguant vers la page d'accueil de l'application, l'image devrait être visible.

Pour la version mobile, ajoutez une autre image avec une largeur de `560px` et une hauteur de `620px`. Si vous rencontrez des problèmes, consultez la solution fournie ci-dessous.

Next.js est un framework React conçu pour créer des applications web full-stack. Avec Next.js, vous utilisez React pour construire des interfaces utilisateur tout en bénéficiant de fonctionnalités supplémentaires et d'optimisations fournies par le framework.

Discutons de ce que vous devez apprendre avant de plonger dans le framework Next.js, de ce à quoi vous pouvez vous attendre de ce cours, et de ce que vous allez construire.

Nous allons configurer le projet, examiner les moyens d'ajouter du style à notre application et couvrir les aspects visuels tels que les images, les polices, les pages et les mises en page.

Apprenez à créer et gérer facilement une nouvelle vue pour votre application et à naviguer sans effort à travers toutes les pages grâce à un système de routage intégré.

Déployez l'application Next.js en utilisant des comptes GitHub et Vercel. De plus, établissez une base de données pour fournir à l'application les données nécessaires.

Considérez comment obtenir et afficher les données à l'utilisateur de manière claire et efficace.

Découvrez comment implémenter des fonctionnalités web modernes telles que la pagination, les opérations CRUD, la recherche globale, la validation de formulaire, et plus encore.

Mise en œuvre de l'authentification dans Next.js.

Next.js 14

Images

Retour au projet

En Pratique