Summary  
This chapter explains how to import and configure a custom Google Font using a font-module API—specifying weights and subsets—and have it automatically optimized and bundled at build time. It then shows applying the generated font class to the root layout so the font is used across the entire application.

General domain of usage  
Web development (frontend styling)

Concentrons-nous sur les polices à utiliser dans l'application.

Les polices de l'application sont automatiquement optimisées lorsque nous utilisons le module `next/font` avec Next.js. Les fichiers de polices sont téléchargés au moment de la construction et hébergés avec vos autres ressources statiques. En conséquence, lorsqu'un utilisateur visite votre application, il n'y a pas de requêtes réseau supplémentaires pour les polices, ce qui aide à améliorer les performances.

## Retour au projet
Ajoutons la police Google Poppins personnalisée pour notre application.

1. Créez un nouveau fichier appelé `fonts.ts` dans le dossier `app/ui`;
2. Importez la police `Poppins` depuis le module `next/font/google`;
3. Nous devrions également spécifier le `weight` et les `subsets` de la police.

Nous sommes prêts à utiliser la police `Poppins` dans l'application. Appliquons-la à l'élément `body` dans le fichier `app/layout.tsx`.

En conséquence, l'ensemble de l'application utilise la police `Poppins`.

Dans le prochain chapitre, incluons des polices supplémentaires.

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.

Polices Google Personnalisées

Retour au projet

En Pratique

Awesome!

Polices Google Personnalisées

Retour au projet

En Pratique