Créer le projet Next.js

Vous allez construire un catalogue de randonnées, mais avant de créer ses pages, vous avez besoin d’une application Next.js qui démarre correctement. Cette première étape sert à préparer un projet adapté aux exemples du cours et à vérifier que votre environnement peut l’exécuter.

Vérifier les prérequis

Next.js s’appuie sur Node.js et npm pour créer et exécuter le projet. Dans un terminal, vérifiez que ces deux commandes sont disponibles avant de continuer. La version de Node.js exigée dépend de la version de Next.js installée ; si l’outil affiche une erreur de version, installez une version de Node.js compatible avec les exigences indiquées par Next.js.

node --version
npm --version

Chaque commande affiche un numéro de version. Si une commande est introuvable, installez Node.js, qui inclut npm, puis ouvrez un nouveau terminal.

Créer le projet

Placez-vous dans le dossier où vous souhaitez conserver le projet, puis lancez l’assistant officiel create-next-app. Le nom sentiers-randonnees devient le dossier du projet. Laissez l’assistant poser ses questions : les choix ci-dessous produisent une base compatible avec les fichiers TypeScript et l’App Router utilisés dans ce cours.

npm create next-app@latest sentiers-randonnees

L’assistant affiche des questions dans le terminal et crée le dossier sentiers-randonnees après validation.

Répondez Yes pour TypeScript et pour l’App Router. Vous pouvez garder ESLint activé. Répondez No à Tailwind CSS, puisque le projet suivra une feuille de style dédiée. Répondez également No à l’option src directory : les fichiers du cours seront directement sous app. Pour les autres questions, conservez les valeurs par défaut proposées, sauf indication contraire.

L’assistant installe les dépendances du projet, notamment Next.js, React et les outils de développement configurés. Cette opération peut prendre un moment et nécessite une connexion réseau. Attendez le message de fin avant de lancer une autre commande ; si l’installation échoue, lisez l’erreur affichée et vérifiez votre connexion ainsi que la version de Node.js.

Démarrer l’application

Une fois le projet créé, entrez dans son dossier. La commande npm run dev lance le serveur de développement défini par le projet. Gardez ce terminal ouvert pendant que vous travaillez : il affiche les messages de démarrage et les éventuelles erreurs.

cd sentiers-randonnees
npm run dev

Le terminal indique que le serveur de développement est prêt et donne généralement l’adresse http://localhost:3000.

Ouvrez l’adresse indiquée dans votre navigateur, généralement http://localhost:3000. Vous devez voir la page de bienvenue générée par le projet. Ce résultat confirme que l’application a été créée, que ses dépendances sont installées et que le serveur répond sur votre ordinateur ; il ne représente pas encore le catalogue de randonnées.

Si la page ne s’affiche pas, contrôlez d’abord le terminal : le serveur doit rester actif sans erreur bloquante. Vérifiez ensuite que vous avez utilisé l’adresse affichée et que le port n’est pas déjà occupé. Si Next.js propose un autre port, utilisez l’adresse correspondante dans le navigateur.

À retenir

• Vérifiez que Node.js et npm sont disponibles avant de créer le projet.
• Utilisez create-next-app pour initialiser sentiers-randonnees.
• Choisissez TypeScript et l’App Router, sans dossier src ni Tailwind CSS.
• Lancez le serveur avec npm run dev et vérifiez la page dans le navigateur.

Dans la prochaine leçon, vous repérerez les fichiers et dossiers générés pour comprendre où placer les éléments du catalogue.