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?

Regroupement des Composants pour les Chargeurs

Qu'en est-il des composants Card, devons-nous ajouter le chargeur pour chaque carte ou comment gérer ce composant.

Lors de la récupération des données pour les composants <Card> individuels, un problème potentiel se pose - charger chaque carte séparément peut provoquer un effet de pop lorsqu'elles se chargent. Ce changement visuel soudain peut être déconcertant pour les utilisateurs.

Pour atténuer ce problème, envisagez les étapes suivantes dans le fichier page.tsx.

Retour au projet

Supprimez les composants <Card>;
Supprimez la fonction fetchCardData();
Importez un nouveau composant wrapper appelé <CardWrapper />;
Importez un nouveau composant squelette appelé <CardsSkeleton />;
Enveloppez <CardWrapper /> dans Suspense.

Naviguez vers app/ui/dashboard/cards.tsx;
Importez fetchCardData();
Invoquez fetchCardData() à l'intérieur du composant <CardWrapper/>;
Décommentez le code nécessaire.

En Pratique

Tout était clair ?

Merci pour vos commentaires !

Section 5. Chapitre 8

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?

Regroupement des Composants pour les Chargeurs

Qu'en est-il des composants Card, devons-nous ajouter le chargeur pour chaque carte ou comment gérer ce composant.

Lors de la récupération des données pour les composants <Card> individuels, un problème potentiel se pose - charger chaque carte séparément peut provoquer un effet de pop lorsqu'elles se chargent. Ce changement visuel soudain peut être déconcertant pour les utilisateurs.

Pour atténuer ce problème, envisagez les étapes suivantes dans le fichier page.tsx.

Retour au projet

Supprimez les composants <Card>;
Supprimez la fonction fetchCardData();
Importez un nouveau composant wrapper appelé <CardWrapper />;
Importez un nouveau composant squelette appelé <CardsSkeleton />;
Enveloppez <CardWrapper /> dans Suspense.

Naviguez vers app/ui/dashboard/cards.tsx;
Importez fetchCardData();
Invoquez fetchCardData() à l'intérieur du composant <CardWrapper/>;
Décommentez le code nécessaire.

En Pratique

Tout était clair ?

Merci pour vos commentaires !

Section 5. Chapitre 8

some-alt