Next JS : L'Installation

Project Next JS Table des matières

• Installation
• Navigation & Routage
• Page web responsive

Bonjour, nous allons explorer ensemble comment créer des sites web avec Next JS (et bien sûr, React) en utilisant Tailwind, Typescript et plus encore.

Je crois fermement à l'apprentissage par la pratique, et nous allons donc passer par une série de projets qui nous permettront d'explorer les différents aspects de la création d'un site web à l'aide de Next JS. Nous aborderons des sujets comme l'authentification, l'interaction avec les bases de données, la création d'une biographie et d'un portfolio, et l'utilisation de React pour l'interactivité.

Pour pouvoir suivre, vous devrez comprendre les bases du JavaScript, du HTML et du CSS. Des choses comme : qu'est-ce qu'un <div> en HTML ? Qu'est-ce qu'une fonction ou une variable en JavaScript ? Cependant, vous n'avez pas besoin de connaître React, TypeScript ou Tailwind. Nous couvrirons ce dont vous avez besoin en cours de route.

Dans cette vidéo, nous allons passer en revue quatre points :

Premièrement, nous examinerons les **prérequis de base ** dont vous avez besoin pour commencer : le logiciel et les outils que vous devez avoir installés.

Deuxièmement, nous allons installer le logiciel** Next JS sur notre ordinateur**, et le configurer avec Tailwind et TypeScript.

Troisièmement, nous allons voir la façon dont Next JS est structuré, à quoi servent les différents dossiers. Quels fichiers vont où ?

Enfin, nous verrons comment fonctionne le routage dans Next JS**, et nous créerons quelques pages de base simples pour illustrer le fonctionnement du routage.

Pré-requis de base

Node JS

Avant de commencer, il y a deux outils que nous devons installer si vous ne les avez pas déjà.

Le premier outil dont vous avez besoin est Node.JS. Node.js est essentiellement le moteur JavaScript du navigateur Chrome qui a été empaqueté dans un serveur autonome. Vous pouvez l'installer en utilisant le site web de Node JS, la méthode exacte d'installation dépendra du système d'exploitation que vous utilisez.

Pour vérifier si vous l'avez déjà installé, il vous suffit d'ouvrir un terminal et de taper :

node -v

Si la console répond par un nombre, c'est bon. Si le nombre de réponses est inférieur à 14, vous devrez peut-être installer une version mise à jour.

Pendant que vous êtes dans la console, vous pouvez également vérifier que le gestionnaire de paquets Node (NPM) est également installé :

npm -v

Il est généralement installé par Node, donc si NPM n'est pas installé, vous devrez réinstaller Node.

Visual Studio Code

L'autre outil dont vous avez besoin est un éditeur de texte. Je recommande d'utiliser Visual Studio Code, qui est gratuit et fournit de nombreux outils utiles. L'enquête Stack Overflow de 2022 indique qu'il est utilisé par 75 % des personnes interrogées.

L'un des principaux atouts de Visual Studio Code est son extensibilité. Visual Studio Code n'offre pas de support intégré pour Tailwind. Mais il existe une extension officielle de Tailwind Labs qui fournit IntelliSense pour TailWInd CSS, alors allons-y et installons-la si vous ne l'avez pas encore.

Vous pouvez également installer l'extension ESLInt car nous l'utiliserons également.

Nous ajouterons d'autres extensions au fur et à mesure.

Next JS & tailwind setup

Maintenant, commençons à installer Next JS. Il faut donner un nom à notre projet, nous allons l’appeler “kodaps-fullstack”. Nous allons donc d'abord ouvrir une console. Comme nous voulons utiliser le TypeScript et la librairie ESLint, nous allons taper :

npx create-next-app@latest kodaps-fullstack --typescript --eslint

Maintenant, entrons dans le dossier en utilisant cd et le nom du dossier, dans ma base :

cd kodaps-fullstack

La première chose à faire est d'installer Tailwind CSS. Pour ce faire, nous lançons :

npm install -D tailwindcss postcss autoprefixer

Ceci installe Tailwind CSS et les bibliothèques appropriées comme dépendances, d'où le -D. Dans la plupart des cas, vous n'avez pas besoin de Tailwind comme dépendance de production. Bien que Tailwind génère les classes CSS à partir de votre code, il est préférable qu'il le fasse au moment de la construction et non à la volée.

Une fois l'installation terminée, nous voulons initialiser tailwind à l'intérieur du dossier, et pour ce faire nous allons taper :

npx tailwindcss init -p 

Cela créera un fichier de configuration pour postCSS et un autre pour Tailwind.

Avant de l'éditer, nous avons encore deux modules à installer. Nous allons démarrer l'installation et pendant qu'elle se déroule, je vais expliquer à quoi ils servent.

Tapons donc :

npm install @tailwindcss/typographie daisyui -D

Le plugin Tailwind Typography fournit des valeurs par défaut raisonnables pour l'affichage du texte, en particulier pour les articles de blog. En gros, la taille des en-têtes est comparée à celle du texte.

Le deuxième module que nous installons est Daisy UI. Il fournit des composants d'interface utilisateur de base pour Tailwind CSS et un système de thèmes.

Maintenant que tout cela est installé, nous devons finir de configurer Tailwind. Pour ce faire, nous commencerons par taper "code ." afin de lancer Visual Studio Code avec ce dossier.

Une fois Visual Studio Code ouvert, nous pouvons ouvrir tailwind.config.js.

Et nous allons faire deux changements là-dedans.

Le premier se trouve dans la section "content". Ici, nous voulons spécifier le chemin vers nos chemins pour permettre à tailwind de purger les styles inutilisés.

Donc ici nous lui disons d'aller dans le dossier src, puis de regarder dans tous ses sous-dossiers, et de vérifier chaque fichier qui a une extension qui est soit js, ts, jsx ou `tsx.

content : [
 "./src/**/*.{js,ts,jsx,tsx}",
],

La deuxième section est celle des plugins. Ici nous lui disons d'abord de requérir @tailwindcss/typography et ensuite daisyUI. Daisy UI dépend de Typography donc typography vient en premier.

Il y a maintenant une dernière chose à faire, et c'est de se rendre au fichier globals.css qui se trouve dans le dossier styles.

Ici, nous voulons supprimer tout ce qui se trouve dans le fichier et ajouter :

@tailwind base ;
@tailwind components ;
@tailwind utilities ;

Structure JS suivante

Maintenant, faisons connaissance avec Next JS. Pour l'instant, nous avons édité les fichiers dans src/styles.

Nous pouvons voir qu'il y a aussi un dossier public. C'est là que se trouvent les fichiers accessibles au public. Dans la plupart des cas, il s'agit de fichiers d'images et d'autres éléments statiques similaires.

Le dossier src/ a également un dossier "pages", et c'est là que Next JS ira pour faire correspondre une URL donnée à un composant.

Ainsi, par exemple, la racine de l'URL, la page d'accueil, sera servie par le fichier index dans la racine du dossier pages.

Avant d'ouvrir cette application, nous pouvons voir qu'il y a deux autres fichiers. _app.tsx et _document.tsx.

Il n'y a pas grand chose à dire sur app.tsx pour l'instant, mais si nous ouvrons _document.tsx vous pouvez voir qu'il fournit en fait une mise en page commune pour nos pages.

Nous y reviendrons plus tard.

Tout d'abord, allons à index.tsx et nettoyons tout ce qui s'y trouve à l'exception de <main>. Ensuite, écrivons un <h1>qui dit "Hello world" : <h1>Bonjour le monde</h1>

Ouvrons maintenant un terminal et tapons :

npm run dev 

Cela démarre le serveur et nous dit d'ouvrir localhost 3000.

Si nous l'ouvrons, nous pouvons voir la page que nous venons d'éditer.

Parlons maintenant un peu de routage. Le routage est la façon dont Next JS sait quel composant doit être rendu pour quelle URL.

Créons un dossier appelé blog dans pages.

Et créons un fichier appelé index.tsx.

Dans ce fichier, nous allons créer un composant simple. Tapons-le :

const BlogIndex

Nous allons définir ceci comme une NextPage, et ce sera juste une fonction qui renvoie un <h1> qui dit "blog index" :

const BlogIndex:NextPage = () => {
  return <h1>Index du blog</h1> ;
}

Enfin, nous devons ajouter export default, parce que Next JS utilise l'export par défaut du fichier pour savoir quoi rendre.

export default const BlogIndex:NextPage = () => {
  return <h1>Index du blog</h1> ;
}

Maintenant, si nous nous rendons sur http://localhost 3000/blog, nous voyons : "blog index".

Maintenant, créons un nouveau fichier à côté de l'index et appelons-le "article 1", et ce sera en fait une copie de l'index, mais il indiquera "article 1" à la place.

Et maintenant, si nous nous rendons à l'adresse appelée slash blog slash article 1, nous pouvons voir notre contenu s'afficher.

Cela vous donne une idée de la façon dont Next JS gère le routage. Il y a un moyen d'utiliser les paramètres pour avoir un paramètre slug dans la route.

Pendant que nous parcourons les dossiers, ici, nous pouvons voir un dossier API qui contient un fichier ts. Il s'agit d'une API de base côté serveur, nous y reviendrons plus tard.

Pendant que nous sommes ici, à côté des pages, créons un dossier composants.

Et dans ce dossier, créons un fichier "Header.tsx".

Dans ce fichier, nous allons simplement écrire

export const Header

Puis nous le définissons comme un React.FC.

Et nous allons simplement retourner une div qui dit header, pour l'instant.

export const Header:React.FC = () => {
	return <div>header</div>
}

Maintenant, dirigeons-nous vers le fichier document.tsx qui vit à côté de l'index, et avant le composant principal, ajoutons le composant "header" que nous venons de créer.

Jetons à nouveau un coup d'œil à nos différentes pages. Comme vous pouvez le voir, l'en-tête apparaît sur chacune d'entre elles.

Revenons à notre page d'index, et ajoutons quelques classes tailwind à mon en-tête. Tapons className avec text-5xl et font-bold.

Il y a plusieurs choses à souligner ici : La première est que nous utilisons classNames et non class, car class est un mot-clé réservé en JavaScript et nous ne pouvons donc pas l'utiliser directement dans le code.

La deuxième chose à souligner est que la page a été rafraîchie automatiquement. C'est ce qui est agréable avec next js. Il offre une expérience de développement vraiment fluide.

La dernière chose est qu'il s'agit de classes tailwind. Si vous vous rendez sur le site CSS de Tailwind, vous en découvrirez bien d'autres. Mais la façon dont Tailwind fonctionne est qu'il "élague" les classes inutilisées. Par exemple, inspectons le code HTML et changeons la classe en text-3xl.

Ici, nous pouvons voir qu'il n'y a pas de classe, pas de style appliqué. C'est parce que Tailwind et Next JS travaillent ensemble pour ne produire que des classes CSS qui sont réellement utilisées dans le code.

Maintenant, ce que je veux faire, c'est m'arrêter ici parce que ce sera un bon point de départ pour d'autres projets.

La prochaine chose que nous allons faire est de mettre en place une page d’accueil simple, avec un en-tête, une section de héros et une section de caractéristiques.

Pour cela, nous utiliserons les composants de l'interface utilisateur de Daisy, et nous lui appliquerons un thème visuel. Nous verrons également comment passer du mode clair au mode foncé.