Next.js 14

Contenu du cours

Next.js 14

Next.js 14

1. Introduction

Bienvenue Aperçu du Projet Prérequis du Cours Comment Fonctionne le Cours

2. Concepts de Base

Configuration du Projet Structure des Fichiers-Dossiers du Projet Approches de Style Ajouter le Fichier CSS Global Stylisation Tailwind Modules CSS Appliquer des Styles Conditionnellement Polices Google Personnalisées Défi : Ajouter une Police Google Personnalisée Images

3. Pages et Mises en Page

Comment Fonctionne le Routage Défi : Création de Page Créer une Mise en Page Commune Optimisation de la Navigation Création de Liens Actifs

4. Déploiement et Base de Données

Configuration des Comptes Déploiement du Projet Base de Données du Projet Population de Données

5. Travailler avec les Données

Comment Récupérer des Données Travailler Avec la Page du Tableau de Bord Pratique et Défi : Récupération de Données Rendu Dynamique vs Statique Chargeurs Chargeurs de Parties Spécifiques Défi : Chargeur de Squelette Regroupement des Composants pour les Chargeurs

6. Fonctionnalités Avancées

Page des Factures Fonctionnalité de Recherche Pagination Actions Serveur Création d'Élément Mise à Jour de l'Élément Suppression d'Élément Défi : Validation de Formulaire

7. Authentification

Comprendre l'Authentification Route de Connexion NextAuth.js Configuration d'Authentification et Protection des Routes Hachage de Mot de Passe et Identifiants Fonctionnalité de Connexion Connexion de l'Interface Utilisateur et des Fonctionnalités Fonctionnalité de Déconnexion Et Après?

Défi : Ajouter une Police Google Personnalisée

Nous continuons notre travail dans le fichier fonts.ts. Importons la police Rubik avec un poids de 400 et des sous-ensembles latin. Appliquez cette police à l'élément p dans le fichier app/page.tsx.

Pour finaliser l'utilisation des polices, décommentez le composant TradeHubLogo dans le fichier app/page.tsx, et vérifiez la page en direct.

Nous devrions être en mesure de voir la vue suivante de notre application.

En Pratique

Tout était clair ?

Merci pour vos commentaires !

Section 2. Chapitre 9

Demandez à l'IA

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Contenu du cours

Next.js 14

Next.js 14

1. Introduction

Bienvenue Aperçu du Projet Prérequis du Cours Comment Fonctionne le Cours

2. Concepts de Base

Configuration du Projet Structure des Fichiers-Dossiers du Projet Approches de Style Ajouter le Fichier CSS Global Stylisation Tailwind Modules CSS Appliquer des Styles Conditionnellement Polices Google Personnalisées Défi : Ajouter une Police Google Personnalisée Images

3. Pages et Mises en Page

Comment Fonctionne le Routage Défi : Création de Page Créer une Mise en Page Commune Optimisation de la Navigation Création de Liens Actifs

4. Déploiement et Base de Données

Configuration des Comptes Déploiement du Projet Base de Données du Projet Population de Données

5. Travailler avec les Données

Comment Récupérer des Données Travailler Avec la Page du Tableau de Bord Pratique et Défi : Récupération de Données Rendu Dynamique vs Statique Chargeurs Chargeurs de Parties Spécifiques Défi : Chargeur de Squelette Regroupement des Composants pour les Chargeurs

6. Fonctionnalités Avancées

Page des Factures Fonctionnalité de Recherche Pagination Actions Serveur Création d'Élément Mise à Jour de l'Élément Suppression d'Élément Défi : Validation de Formulaire

7. Authentification

Comprendre l'Authentification Route de Connexion NextAuth.js Configuration d'Authentification et Protection des Routes Hachage de Mot de Passe et Identifiants Fonctionnalité de Connexion Connexion de l'Interface Utilisateur et des Fonctionnalités Fonctionnalité de Déconnexion Et Après?

Défi : Ajouter une Police Google Personnalisée

Nous continuons notre travail dans le fichier fonts.ts. Importons la police Rubik avec un poids de 400 et des sous-ensembles latin. Appliquez cette police à l'élément p dans le fichier app/page.tsx.

Pour finaliser l'utilisation des polices, décommentez le composant TradeHubLogo dans le fichier app/page.tsx, et vérifiez la page en direct.

Nous devrions être en mesure de voir la vue suivante de notre application.

En Pratique

Tout était clair ?

Merci pour vos commentaires !

Section 2. Chapitre 9

some-alt