logoNext.js Français
DocumentationBlogApprendre

Affinage de la mise en page

Jusqu'à présent, nous n'avons ajouté que du code React et CSS minimal pour illustrer des concepts tels que les Modules CSS. Avant de passer à notre prochaine leçon sur la récupération de données, affinons le style et le code de notre page.

Mise à jour de components/layout.module.css

Premièrement, ouvrez components/layout.module.css et remplacez son contenu par les styles plus affinés suivants pour la mise en page et l'image de profil :

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}
 
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.backToHome {
  margin: 3rem 0 0;
}

Création de styles/utils.module.css

Deuxièmement, créons un ensemble de classes utilitaires CSS (pour les styles de texte) qui peuvent être réutilisées dans plusieurs composants.

Ajoutez un nouveau fichier CSS appelé styles/utils.module.css avec le contenu suivant :

.heading2Xl {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}
 
.headingXl {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}
 
.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}
 
.headingMd {
  font-size: 1.2rem;
  line-height: 1.5;
}
 
.borderCircle {
  border-radius: 9999px;
}
 
.colorInherit {
  color: inherit;
}
 
.padding1px {
  padding-top: 1px;
}
 
.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.listItem {
  margin: 0 0 1.25rem;
}
 
.lightText {
  color: #666;
}

Vous pouvez réutiliser ces classes utilitaires dans toute votre application, et vous pouvez même utiliser des classes utilitaires dans votre fichier global.css. Les classes utilitaires font référence à une approche d'écriture des sélecteurs CSS plutôt qu'à une méthode (par exemple, styles globaux, modules CSS, Sass, etc.). Apprenez-en plus sur le CSS utility-first.

Mise à jour de components/layout.js

Troisièmement, ouvrez components/layout.js et remplacez son contenu par le code suivant, en remplaçant Your Name par un vrai nom :

import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
 
const name = 'Your Name';
export const siteTitle = 'Next.js Sample Website';
 
export default function Layout({ children, home }) {
  return (
    <div className={styles.container}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta
          name="description"
          content="Learn how to build a personal website using Next.js"
        />
        <meta
          property="og:image"
          content={`https://og-image.vercel.app/${encodeURI(
            siteTitle,
          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <header className={styles.header}>
        {home ? (
          <>
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        ) : (
          <>
            <Link href="/">
              <Image
                priority
                src="/images/profile.jpg"
                className={utilStyles.borderCircle}
                height={108}
                width={108}
                alt=""
              />
            </Link>
            <h2 className={utilStyles.headingLg}>
              <Link href="/" className={utilStyles.colorInherit}>
                {name}
              </Link>
            </h2>
          </>
        )}
      </header>
      <main>{children}</main>
      {!home && (
        <div className={styles.backToHome}>
          <Link href="/">← Back to home</Link>
        </div>
      )}
    </div>
  );
}

Voici ce qui est nouveau :

  • Les balises meta (comme og:image), qui sont utilisées pour décrire le contenu d'une page
  • La propriété booléenne home qui ajustera la taille du titre et de l'image
  • Le lien "Back to home" en bas si home est false
  • Ajout d'images avec next/image, qui sont préchargées avec l'attribut priority

Mise à jour de pages/index.js

Enfin, mettons à jour la page d'accueil.

Ouvrez pages/index.js et remplacez son contenu par :

import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
 
export default function Home() {
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p>[Votre auto-présentation]</p>
        <p>
          (Ceci est un site web exemple - vous allez construire un site comme celui-ci dans{' '}
          <a href="https://nextjs.org/learn">notre tutoriel Next.js</a>.)
        </p>
      </section>
    </Layout>
  );
}

Puis remplacez [Votre auto-présentation] par votre propre présentation. Voici un exemple avec le profil de l'auteur :

Exemple

C'est tout ! Nous avons maintenant le code de mise en page affiné et nous sommes prêts à passer aux leçons sur la récupération de données.

Avant de terminer cette leçon, parlons de quelques techniques utiles liées au support CSS de Next.js sur la page suivante.

Styles globaux

Previous Page

Conseils de style

Next Page