Next JS: Implémenter une page web responsive avec Tailwind

Project Next JS Table des matières

• Installation
• Navigation & Routage
• Page web responsive

A présent nous allons crée une page responsive avec Tailwind et Next JS.

Sur cette page nous allons mettre deux sections pour illustrer comment faire. Une section présentera le but du site, la proposition principale de la page. C’est ce qu’on appelle une “Hero Section”. Nous créerons également une section qui présente des fonctionnalités.

Si vous avez suivi le projet avec Next JS, nous allons nous rendre sur le fichier index.tsx à la racine du dossier pages. Juste à l’intérieur du <main>on va remplacer notre H1 par un élément <section>, et on va lui attribuer un className="hero".

Ici à l’intérieur nous allons créer une nouvelle <div>, à laquelle on va attribuer un className="hero-content"

<main>
  <section className="hero">
    <div className="hero-content">
    </div>
  </section>
<main>

Et à présent on va remplir tout ça. On va commencer par créer un h1. Il faut savoir que de base un h1n’a pas de style particulier qui lui est appliqué, et c’est complètement volontaire. Le h1sert surtout pour des raisons de référencement. Et du coup ici la présentation est découplée de la sémantique.

Ici il se trouve que le <h1>correspond bien à notre titre, donc dans le classNamedu <h1>on va ajouter text-5xlqui détermine la taille du texte, et on va changer l’épaisseur de texte avec un font-bold. Tout ca ce sont des classes atomiques de Tailwind. Comme vous pouvez voir si vous inspectez ce qui sort, ces classes définissent chacune une valeur en CSS.

Dans ce <h1> on va mettre un texte simple, par example: “Have fun tracking your goals using OKR”. On peut évidemment faire beaucoup mieux. On va rajouter un sous-titre avec un h2, par exemple: “OKR is a proven methodology used by Intel and Google to exceed expectations.” Et pour finir on va rajouter un bouton.

Ici on va simplement créer un <span>dans lequel on va écrire “Learn more”. Et DaisyUI dispo aussi de composant Bouton simple à utiliser et bien documenté. Ici pour donner une apparence de bouton à notre <span>, on lui rajoute un className="btn btn-primary"puisqu’on veut que notre bouton prenne la couleur primaire de notre site.

Nous allons à présent mettre en place l’image, mais tout d’abord il nous manque une petite étape. Il nous faut créer une <div>qui englobe les trois éléments que nous avons codés. Cette <div>nous permettra de positionner ensemble les trois éléments.

 <div>
   <h1 className="text-5xl font-bold">
     Have fun tracking your goals using OKR
   </h1>
   <h2>
     OKR is a proven methology used by Intel and Google to beat
     expectations
    </h2>
    <span className="btn btn-primary">
      Learn more
    </span>
</div>

Passons à présent à l’image

Alors je ne suis pas particulièrement doué en graphisme, donc j’ai fabriqué une image avec MidJourney qui pouvait correspondre à ce que j'avais besoin. On va simplement mettre cette image dans le dossier public, et l’appeler mountain_climb. Il se trouve que MidJourney nous a fourni des fichiers PNG donc mon image s’appelle mountain_climb.png_.

Bon il faut savoir que le format PNG est rarement optimal, et si on veut que notre site web se charge vite il faut optimiser les images qui s’y trouvent. Heureusement dans Next JS on dispose d’un composant qui fait le travail pour nous. Ce composant s’appelle <Image>, et il imite la syntaxe de l’élément HTML <img>.

Pour bien fonctionner ce composant a besoin de connaître les dimensions de l’image d’origine. Rien de plus simple, on peut aller les lire via notre OS; ici sur Mac en inspectant l’image. Sur PC il faut regarder les propriétés. C’est important de souligner qu’il s’agit ici des dimensions du fichier image, pas des dimensions qu’on souhaite afficher à l’écran.

Ici dans mon cas l’image fait 768 pixels de large et 512 pixels de haut.

Nous sommes donc armés pour commencer à mettre en place l’image. On va donc commencer par taper :

<Image src="/mountain_climb.png" />  

On voit que TypeScript se plain qu’il manque l’attribut alt, et c’est vrai qu’en termes de SEO et d’accessibilité il faut toujours mettre un descriptif. Donc on va préciser : alt="man climbing up a mountain. Autrement dit un homme qui escalate une montagne.

Pendant qu’on y est, on va aussi préciser les dimensions de l’image, donc width={768}et height={512}.

<Image src="/mountain_climb.png" width={768} height={512} alt="man climbing up a mountain />  

Voyons ce que ça donne. On a bien l’image à gauche avec notre titre, sous-titre et CTA à droite. En l’état, les titres me semblent trop collés ensemble et le sous-titre me semble un peu petit.

Donc on va rajouter de l’espacement. On va commencer par rajouter un py-3au titre principal en h1. Ensuite, on copie colle les classes du h1sur le h2, et on change la taille de text-5xlà text-3xl

Si on regarde ce que ça donne, il y a plusieurs problèmes. L’espacement est trop gros, et le sous titre prend trop de place. On va donc descendre le text-3xlà juste text-xl. On va aussi enlever font-bold. Et pour ce qui est de l’espace entre le h1et le h2, c’est logique puisque le padding horizontal se met de chaque coté de chaque élément, donc on a un double paddings entre le h1 et le h2. Du coup on va just change le padding du h2à pb-3. Le bsignifie bottomdonc à présent le h2n’a plus un padding au dessus, juste en dessous.

Et si on regarde le résultat final, c’est effectivement bien plus équilibré. Je pense qu’on pourrait aussi rajouter un peu de padding sur l’image, disons un px-3.

Par contre si on s’amuse à changer la largeur du navigateur, on voit que c’est pas du tout adapté pour les écrans mobiles, c’est pas “responsif”. Il faut qu’on corrige tout ça.

Alors c’est l’occasion de parler de comment Tailwind gère la “responsivité”, le fait de gérer les écrans de taille différente. Et ici je veux donc préciser deux choses.

1/ La première chose à dire, c’est que Tailwind, comme tous les autres frameworks CSS dignes de ce nom, et “mobile-first”. Qu’est-ce que ca veut dire ?

Et bien ça signifie que quand on construit la page, on définit le comportement mobile comme étant la règle, et le comportement sur les résolutions plus grandes comme étant l’exception.

Pour prendre le cas de notre “Hero Section” ici, on va dire : on va avoir par défaut une présentation en colonne, avec l’image au dessus, et nos trois éléments textuels en dessous. Et à partir d’une certaine largeur, par exemple sur tablette, on change le comportement pour que ces éléments soient côte à côte.

Donc on définit le comportement mobile comme étant le comportement normal, et la mise en page pour les dimensions plus grandes comme étant l’exception. ET vu qu’au moins 60% du trafic sur internet est via mobile, ça se tient bien.

2/ la deuxième chose que je veux mentionner ici, c’est la nomenclature de Tailwind CSS pour gérer la responsivité. C’est en réalité plus large que ça, c’est la façon dont tailwind gère les variantes des classes.

Et pour appeler ces variantes, dans Tailwind, on rajoute un préfix, et un signe “deux points”. Donc par exemple pour préciser un comportement sur le hover, on va écrire “hover:” puis le nom de la classe qu’on veut activer sur le hover. De la même façon, pour gérer le “dark mode” directement dans Tailwind, il suffit de créer des classes avec le préfix “dark:”.

Maintenant, prenons l’exemple du sujet qui nous intéresse ici, de la gestion de la “responsivité”. Tailwind dispose par défaut de cinq breakpoints, qui sont:

• sm comme Small, qui est à 640 pixels de large
• md comme Medium, qui est à 768 pixels
• lg comme Large qui est à 1024 pixels,
• xl qui est à 1280 pixels, et
• 2xlqui est à 1536 pixels.
  Tout ça étant customisable évidemment.

Dans Tailwind on a les classes w-full, et w-1/2qui signifient une largeur de 100% et de 50%. Imaginons qu’on veuille qu’un élément ait sur mobile une largeur de 100%, et à partir d’une taille d’écran de tablette une largeur de 50%. Dans ce cas on attribue à l’élément les classes w-fullet md:w-1/2. Autrement dit : par défaut une pleine largeur, et à partir du “breakpoint md”, une largeur de 50%. Et c’est ca qu’on va utiliser ici pour rendre le site responsif

Donc, c’est exactement ce qu’on va utiliser sur notre hero section. Donc là on a l'image et le contenu texte. On va raisonner en partant en mobile. En mobile, l’image et le contenu texte font chacun occuper toute la largeur de l’écran, et le texte va se situer en dessous de l’image. Et à partir de la taille d’écran médium, c’est à dire à peu près une tablette, ils vont chacun occuper une demi largeur. Donc on leur applique à chacun les classes w-fullet et md:w-1/2.

  <Image className="w-full md:w-1/2" /*...*/ />
  <div className="w-full md:w-1/2" >
    {/*...*/}
  </div>

Par contre ça ne suffit pas, puisque ces deux éléments sont contenus dans un element qui applique du flex en ligne. Et donc pour avoir un alignement en colonne en mobile, et en ligne en desktop, on applique le meme principe. Autrement dit, va sur l’élément qui a la classe hero-contentset on lui rajoute une classe flex-colpour lui dire de se mettre en colonne par défaut en mobile, et md:flex-rowpour lui dire d’aligner les éléments en ligne à partir du “breakpoint” md.

<>

Section 3 colonnes

A présent ce que nous allons faire, c’est créer une deuxième section qui détaille tous les avantages, et on va utiliser une structure classique sur 3 colonnes.

Pour ça on va commencer par créer un élément section. On va commencer par mettre un titre dans notre section, Cette fois ci, on on va le créer en h3, puisque on a déjà défini notre h1et notre h2. Et dedans on va simplement écrire “Our features”, nos fonctionnalités.

<h3>Our features</h3>

En dessous de ce h3on va créer une <div>qui va contenir nos trois colonnes qui vont vanter les mérites de notre site.

Mais avant de remplir cette div, nous allons changer sa taille du h3 et rajouter un peu d’espace en dessous, donc nous allons lui donner les classes text-xlet pb-3.

Si on regarde ce que ça donne, on voit que tout ça est aligné à gauche. On va donc par dire à notre <section> de centrer le texte qu’elle contient, et pour ca on lui rajoute la classe text-center. Et on lui demande aussi de laisser un peu de marge avec la section précédente, donc on lui donne un mt-4. Au passage si vous vous demandez pourquoi je mets parfois 3, parfois 4.. en réalité pour le moment je prends un peu au hazard et j’ajuste en fonction de ce que donne le résultat, visuellement. Dans la vraie vie c’est le genre de chose qu’on détermine avec un UX designer, mais on va faire sans.

Maintenant passons à nos trois colonnes. Pour voir ce que ça donne nous allons créer trois <div>. Dedans nous allons simplement mettre “Argument 1”, “Argument 2”, et “Argument 3”. On verra plus tard pour mettre quelque chose de plus convainquant.

Si on regarde ce que ça donne, on voit que les 3 colonnes sont pour le moment l’un au dessus de l’autre. Ce n’est pas encore tout à fait le résultat recherché.

La première chose à faire, donc, c’est dire à la <div>qui contient tout ça qu’on souhaite que les éléments intérieurs soient alignés et que la ``

export const FeatureCard:React.FC

export const FeatureCard:React.FC = () => {
}

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

interface FeatureCardInterface {
}

interface FeatureCardInterface {
  title: string;
  description: string; 
  image :string;
}

FeatureCard:React.FC<FeatureCardInterface>

export const FeatureCard:React.FC = ({title, description, image})

<h4>{title}</h4>

<Image src={image} /> 

<Image src={image} alt={title} /> 

<Image src={image} alt={title} width={768} height={512}/> 

import Image from "next/image";

<span>{description}</span>

export const FeatureCard:React.FC<FeatureCardInterface> = ({title, description, image, className}) => {
  return <div>
    <h4>{title}</h4>
    <Image src={image} alt={title} width="512"  />
    <span>{description}</span>
  </div>
}

    <FeatureCard title="Argument 1" description="This is really cool" image="/mountain_climb.png" />

import { FeatureCard } from '@/components/FeatureCard'

<FeatureCard title="Argument 1" description="This is really cool" image="/mountain_climb.png" />
<FeatureCard title="Argument 2" description="This is really cool" image="/mountain_climb.png" />
<FeatureCard title="Argument 3" description="This is really cool" image="/mountain_climb.png" />

<FeatureCard className="w-1/4" /*...*/ />

interface FeatureCardInterface {
  /* ... */
  className?: string
}

 export const FeatureCard:React.FC<FeatureCardInterface> =  ({title, description, image, className}) => {
/* ...*/
}

<div className={`flex flex-col`}>

<div className={`flex flex-col ${className}`}>

<div className={`flex flex-col ${className || ''}`}>

<FeatureCard className="w-full md:w-1/4" /*...*/ />