2 - Installation Next.js
Afin de procéder à l'installation de Next.js, nous allons commencer par préparer notre environnement de développement.
- Installer node.js ou vérifier que vous avez la dernière version (node -v sur votre terminal de commande) :
https://nodejs.org/en/download
- Ajoutez ces extensions sur Visual Studio Code si vous ne les avez pas :
Prettier – code formatter
Javascript and TypeScript
TypeScript React code snippets : permet de faire des raccourcis.
ESlint : pour débuguer le code.
Allez ensuite dans paramètre > settings.
Dans la barre de recherche, tapez « format ».
Dans Editor : default formatter, choisissez « Prettier – code Formatter ».
Cochez également sur cette page :
Editor : Format on save.
- Créer un dossier sur votre pc et ouvrez-le ensuite avec Visual Studio Code (ou l(éditeur de texte que vous utilisez).
Ouvrez ensuite votre terminal de commande (ctrl + ù) et tapez :
npx create-next-app@latest my-project --typescript --esLint
Remplacez 'my-project' par le nom que vous souhaitez donner à votre projet.
Sélectionnez ensuite comme ci-dessous les options (en bleu) :
Positionnez vous ensuite sur votre app en tapant :
cd my-project
Puis l’ouvrir avec Visual Studio Code en tapant :
code .
Architecture de l’application
Le dossier public est le dossier destiné à contenir des fichiers statiques (comme des images, des icônes, etc.) qui seront servis directement par le serveur.
A la racine de votre projet Next.js, vous trouverez quelques fichiers principaux qui jouent des rôles clés dans la configuration et la gestion du projet :
next.config.js : Ce fichier est le cœur de la configuration de Next.js. Il vous permet de personnaliser divers aspects de votre application, tels que les règles de compilation, les redirections, et bien plus encore.
package.json : Ce fichier de configuration npm est essentiel pour votre projet. Il répertorie les dépendances nécessaires, les scripts de démarrage, et d'autres informations importantes.
Initialisation de Tailwind
Tailwind est une bibliothèque CSS.
https://tailwindcss.com/docs/guides/nextjs
Initialisr Tailwind en tapant dans votre terminal :
npx tailwindcss init -p
On indique ensuite où on veut que les dépendance de Tailwind soient configurées
dans le fichier tailwind.config.js, insérez dans 'content: []' la ligne ci-dessous :
"./src/**/*.{js,ts,jsx,tsx,mdx}",
Lancement de l’application
Tapez dans votre terminal :
npm run dev
puis cliquez sur :
http://localhost:3000 (ctrl + click)
Votre application s’ouvre dans votre navigateur.
