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)

Portons maintenant notre attention 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 police sont téléchargés lors de la phase de build et hébergés avec vos autres ressources statiques. Ainsi, lorsqu'un utilisateur visite votre application, aucune requête réseau supplémentaire n'est nécessaire pour les polices, ce qui améliore les performances.

## Retour au projet
Ajout de la police Google personnalisée Poppins pour l'application.

1. Création d'un nouveau fichier nommé `fonts.ts` dans le dossier `app/ui` ;
2. Importation de la police `Poppins` depuis le module `next/font/google` ;
3. Spécification du `weight` et des `subsets` de la police.

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

Ainsi, l'ensemble de l'application utilise la police `Poppins`.

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

Apprenez à créer des applications web modernes et performantes avec Next.js. Configurez des projets avec des structures de mise en page, de la gestion du style et du routage pour une navigation fluide. Récupérez et affichez les données efficacement tout en optimisant le rendu et les performances. Mettez en œuvre des fonctionnalités avancées telles que la pagination, les opérations CRUD et la recherche globale pour des applications web dynamiques. Déployez vos projets Next.js, connectez-les à des bases de données et ajoutez une authentification pour protéger les données des utilisateurs.

Présentation des connaissances préalables nécessaires avant d’aborder le framework Next.js, aperçu des attentes du cours et description des projets à réaliser.

Nous allons configurer le projet, examiner les méthodes d’ajout de styles à notre application et aborder les aspects visuels tels que les images, les polices, les pages et les mises en page.

Découvrez comment créer et gérer facilement une nouvelle vue pour votre application et naviguer entre toutes les pages de manière fluide grâce à un système de routage intégré.

Déployer l'application Next.js en utilisant des comptes GitHub et Vercel. Établir également une base de données pour fournir à l'application les données nécessaires.

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

Découvrez comment mettre en œuvre des fonctionnalités web modernes telles que la pagination, les opérations CRUD, la recherche globale, la validation de formulaires, et plus encore.

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

Ajout de Polices Google Personnalisées

Retour au projet

En pratique

Awesome!

Ajout de Polices Google Personnalisées

Retour au projet

En pratique