Premiers pas

Création d’un nouveau projet

Nous recommandons d’utiliser pnpm comme gestionnaire de paquets, car il est plus rapide et plus efficace que npm ou yarn. Si vous n’avez pas pnpm installé, vous pouvez l’installer globalement en exécutant :

npm install -g pnpm

Pour créer une application Next.js, ouvrez votre terminal, naviguez avec cd dans le dossier où vous souhaitez conserver votre projet, et exécutez la commande suivante :

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

Cette commande utilise create-next-app, un outil en ligne de commande (CLI) qui configure une application Next.js pour vous. Dans la commande ci-dessus, vous utilisez également le drapeau --example avec l’exemple de démarrage pour ce cours.

Exploration du projet

Contrairement aux tutoriels où vous écrivez le code à partir de zéro, une grande partie du code pour ce cours est déjà écrite pour vous. Cela reflète mieux le développement dans le monde réel, où vous travaillerez probablement avec des bases de code existantes.

Notre objectif est de vous aider à vous concentrer sur l’apprentissage des principales fonctionnalités de Next.js, sans avoir à écrire tout le code de l’application.

Après l’installation, ouvrez le projet dans votre éditeur de code et naviguez vers nextjs-dashboard.

cd nextjs-dashboard

Passons un peu de temps à explorer le projet.

Structure des dossiers

Vous remarquerez que le projet a la structure de dossiers suivante :

• /app : Contient toutes les routes, composants et la logique de votre application, c’est ici que vous travaillerez principalement.
• /app/lib : Contient les fonctions utilisées dans votre application, comme les fonctions utilitaires réutilisables et les fonctions de récupération de données.
• /app/ui : Contient tous les composants d’interface utilisateur pour votre application, comme les cartes, tableaux et formulaires. Pour gagner du temps, nous avons pré-stylisé ces composants pour vous.
• /public : Contient toutes les ressources statiques de votre application, comme les images.
• Fichiers de configuration : Vous remarquerez également des fichiers de configuration comme next.config.ts à la racine de votre application. La plupart de ces fichiers sont créés et pré-configurés lorsque vous démarrez un nouveau projet avec create-next-app. Vous n’aurez pas besoin de les modifier dans ce cours.

N’hésitez pas à explorer ces dossiers, et ne vous inquiétez pas si vous ne comprenez pas encore tout ce que fait le code.

Données de substitution

Lorsque vous construisez des interfaces utilisateur, il est utile d’avoir des données de substitution. Si une base de données ou une API n’est pas encore disponible, vous pouvez :

• Utiliser des données de substitution au format JSON ou comme objets JavaScript.
• Utiliser un service tiers comme mockAPI.

Pour ce projet, nous avons fourni des données de substitution dans app/lib/placeholder-data.ts. Chaque objet JavaScript dans le fichier représente une table dans votre base de données. Par exemple, pour la table des factures :

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

Dans le chapitre sur la configuration de votre base de données, vous utiliserez ces données pour peupler votre base de données (la remplir avec des données initiales).

TypeScript

Vous remarquerez peut-être aussi que la plupart des fichiers ont un suffixe .ts ou .tsx. C’est parce que le projet est écrit en TypeScript. Nous voulions créer un cours qui reflète le paysage moderne du web.

Ce n’est pas grave si vous ne connaissez pas TypeScript - nous fournirons les extraits de code TypeScript lorsque nécessaire.

Pour l’instant, jetez un œil au fichier /app/lib/definitions.ts. Ici, nous définissons manuellement les types qui seront retournés par la base de données. Par exemple, la table des factures a les types suivants :

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // En TypeScript, cela s’appelle un type union de chaînes.
  // Cela signifie que la propriété "status" ne peut être que l’une des deux chaînes : 'pending' ou 'paid'.
  status: 'pending' | 'paid';
};

En utilisant TypeScript, vous pouvez vous assurer de ne pas passer accidentellement un mauvais format de données à vos composants ou à votre base de données, comme passer une string au lieu d’un number pour le amount d’une facture.

Si vous êtes un développeur TypeScript :

• Nous déclarons manuellement les types de données, mais pour une meilleure sécurité de type, nous recommandons Prisma ou Drizzle, qui génèrent automatiquement les types en fonction de votre schéma de base de données.
• Next.js détecte si votre projet utilise TypeScript et installe automatiquement les paquets et la configuration nécessaires. Next.js est également livré avec un plugin TypeScript pour votre éditeur de code, pour aider avec l’auto-complétion et la sécurité de type.

Lancement du serveur de développement

Exécutez pnpm i pour installer les paquets du projet.

pnpm i

Puis pnpm dev pour démarrer le serveur de développement.

pnpm dev

pnpm dev démarre votre serveur de développement Next.js sur le port 3000. Vérifions si cela fonctionne.

Ouvrez http://localhost:3000 dans votre navigateur. Votre page d’accueil devrait ressembler à ceci, qui est intentionnellement non stylisé :