Catégories
Plugin et site web

Comparaison des méthodes de style dans Next.js – Smashing Magazine

A propos de l'auteur

Adebiyi Adedotun Lukman est un ingénieur UI / Frontend basé à Lagos, au Nigéria, qui adore également UI / UX Design pour l'amour des grands logiciels. Quand …
Plus à propos
Adebiyi

Entre autres, Next.js s'est surnommé: Le cadre React pour les sites Web statiques. Mais comme tout autre framework dont le but est de vous aider à créer ce qui compte en résumant des tâches communes et redondantes, vous êtes souvent amené à apprendre quelque chose de nouveau et d'opinion. Avec Next.js, l'une des choses que vous devez savoir est comment intégrer différentes méthodes CSS avec son API, et c'est l'objet de ce didacticiel.

Comme vous le savez peut-être, il existe de nombreuses perspectives différentes sur CSS-in-JS, et nous avons tous une opinion sur le sujet d'une manière ou d'une autre qui pourrait être très différente de celle des auteurs du framework.

Next.js est l'une des chaînes d'outils recommandées lors de la création d'une nouvelle application React. Des outils comme Next ont pour objectif simple de supprimer les tâches généralement redondantes lors de l'écriture d'une application React. Cela aide les développeurs à se concentrer davantage sur l'écriture de code que sur la réinvention de la roue. Bien que ce soit généralement une bonne chose, cela peut aussi être un peu fastidieux de commencer. D'une part, il y a un obstacle à franchir en apprenant les abstractions, et bien qu'il y en ait une multitude dans Next (routage, récupération de données…), le style est souvent négligé.

Pour servir un public plus large, Next.js prend en charge une myriade de façons de styliser vos composants. Que vous apparteniez au groupe Utility first ou CSS-in-JS ne préoccupe pas beaucoup Next, sa préoccupation est de savoir comment vous injectez votre choix dans son API.

L'objectif de cet article est de vous aider à comprendre comment configurer le style dans votre application Next. Nous utiliserons différentes méthodes pour gérer la comparaison. Nous allons mettre en œuvre les différents types de style dans une application de livre que j'ai configurée. Les méthodes de style que nous examinerons incluent:

  1. CSS global,
  2. SASS / SCSS,
  3. SASS / SCSS au niveau des composants,
  4. CSS au niveau des composants (modules CSS),
  5. Styled-Components,
  6. Stylé JSX,
  7. Émotion.

Prérequis

Avant de commencer notre visite de style, vous devez vous familiariser avec quelques nuances suivantes.

  1. _app.js
    Il s'agit d'un composant personnalisé qui réside dans le dossier pages. Next.js utilise ce composant pour initialiser les pages.
  2. _document.js
    Comme _app.js, _document.js est un composant personnalisé que Next.js utilise pour augmenter vos applications et Mots clés. Cela est nécessaire car les pages Next.js ignorent la définition du balisage du document environnant.
  3. _.babelrc
    Lorsqu'il est présent, Next.js utilise ce fichier comme source unique de vérité pour certaines configurations internes et vous donne la permission de l'étendre.

Gardez à l'esprit que si votre serveur est en cours d'exécution avant d'ajouter le _app.js fichier, vous devez le redémarrer.

Créer une application suivante avec create-next-app

Créer une application suivante avec create-next-app est aussi simple que de suivre les étapes ci-dessous:

  • Installer create-next-app globalement.
yarn global add create-next-app // Installs create-next-app globally
  • Créer une nouvelle application Next nommée styling-in-next.
create-next-app styling-in-next // Creates a new Next app named styling-in-next
  • Changez de répertoire dans le nouveau site.
cd styling-in-next // Switch directory into the new Next app
yarn dev -p 3000 // Instruct Next to run on port 3000

Reportez-vous à la documentation pour plus d'informations sur la création et l'exécution d'une application Next.

L'application devrait maintenant fonctionner sur http://localhost:3000.

Une capture d'écran de la page d'index de démarrage par défaut de Next.js
Page d'index de démarrage par défaut de Next.js. (Grand aperçu)

Dépôt de démo

Au fur et à mesure, nous construirons un artifice Étagère à livres en appliquant différentes méthodes de style à chacun livres. Le résultat final ressemblera à:

Une capture d'écran de la bibliothèque de style démo finale
Bibliothèque de style final. (Grand aperçu)

L'image ci-dessus montre 6 livres; chaque livre aura ses propres composants, puis nous appliquerons un type de style spécifique à chaque livre spécifique, c'est-à-dire que le livre 1 utilisera un style global tandis que le livre 2 en utilisera un autre. De cette façon, nous verrons comment chacun de ces styles fonctionne et comment ils peuvent être utilisés. Cela vous aidera à prendre une meilleure décision sur l'option à choisir.

Pour simplifier les choses, j'ai créé un référentiel GitHub que vous pourrez suivre. Tu peux l'attraper ici.

Certaines modifications ont également été apportées au démarreur par défaut généré par create-next-app. Dossiers comme émotion, global, modules, composants-stylisés etc. ont été ajoutés au styles dossier – avec leurs fichiers de style correspondants – ainsi qu'un components répertoire avec plusieurs composants.

Une capture d'écran des modifications initiales apportées au répertoire des styles et des composants du référentiel de démonstration
Modifications des dossiers de styles et de composants. (Grand aperçu)

le index.js le fichier a été modifié en import et render le nécessaire components, et chacun des composants a une structure similaire à celle illustrée dans l'image ci-dessous.

Une capture d'écran des modifications initiales apportées à BookTwo.js, BookOne.js et index.js
Modifications des composants individuels et des fichiers d'index. (Grand aperçu)

Si vous avez cloné et exécuté le dépôt de démonstration, voici à quoi devrait ressembler votre page:

Une capture d'écran de la page d'index par défaut du référentiel de démonstration
Page d'index par défaut du dépôt de démonstration. (Grand aperçu)

Avec tout cela à l'écart, passons au style.

Style global

L’une des choses courantes que vous faites normalement lorsque vous démarrez un nouveau projet Web est de réinitialiser ou de normaliser votre CSS afin qu’il y ait une position de départ uniforme parmi les navigateurs. Ceci est un exemple parfait d'utilisation de Global CSS sans se soucier de la portée.

/* styles/global/globals.css */
html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}
  • Importez la réinitialisation CSS styles/global/globals.css dans pages/_app.js.
// pages/_app.js
import "../styles/global/globals.css";

function MyApp({Component, pageProps}) {
  return ;
}

export default MyApp;

Les styles globaux ne peuvent être importés que dans pages/_app.js. C'est directement logique car ces styles s'appliqueront à tous pages et components dans votre application – quel que soit l'endroit où vous les importez – il est donc préférable d'avoir une source unique de vérité (importée) pour garder les choses simples et / ou si quelque chose ne va pas.

À ce stade, nous n'avons pas beaucoup de changements visuels à notre Étagère à livres puisque nous n'avons fait que normalisation changements. Une chose que vous remarquerez peut-être est les changements de police et d'espacement.

Une capture d'écran de la modification apportée à la bibliothèque de démonstration après l'ajout d'une réinitialisation CSS
Modifications de la page d'index après l'ajout d'une réinitialisation CSS. (Grand aperçu)

SASS / SCSS

Next.js permet également de styliser avec SASS avec le .sass ou .scss extension. L'installation de Sass est une exigence. Tout comme les styles globaux, ils ne peuvent être importés que dans pages/_app.js.

  • Installez le package Sass.
yarn add sass
  • Mettre à jour styles/scss/bookshelf.scss.
// styles/scss/bookshelf.scss
.the-bookshelf {
  width: 100vw;
  height: 100vh;
  background-color: #e3e3e3;
  display: flex;
  justify-content: center;
  align-items: center;

  .bookshelf-wrap {
    > .bookshelf {
      box-shadow: inset 0 -20px #7b5019;
      padding-bottom: 20px;
      display: flex;
      align-items: flex-end;
    }

    (class*="book") {
      font-size: 32px;
      letter-spacing: -0.045em;
      display: flex;
      transition: 0.2s;

      &:hover {
        transform: none;
      }
    }

    .book-info {
      text-transform: uppercase;
      writing-mode: sideways-rl;
      display: flex;
      justify-content: space-around;
      flex: 1;
      align-items: center;
      font-weight: bold;
      padding: 16px 0;

      .title {
        font-weight: inherit;
        font-size: 20px;
      }

      .author {
        font-weight: inherit;
        font-size: 15px;
      }
    }
  }
}
  • Mettre à jour également styles/sass/bookone.sass et styles/sass/booktwo.sass ainsi:
// styles/sass/bookone.sass
  .book-one
    color: #f00
    width: 78px
    height: 350px
    transform: rotate(-4deg)
    margin-left: 16px
    margin-right: 23px
    background-color: black
// styles/sass/booktwo.sass
.book-two
  color: #781e0b
  width: 38px
  height: 448px
  margin-right: 23px
  background-color: #ffab44

SASS (.sass) est basé sur l'indentation. Pour faciliter le formatage, vous pouvez installer cette extension VSCode pour le support des fichiers SASS (formatage, coloration syntaxique…)

  • Importez les trois fichiers de style – styles/scss/bookshelf.scss , styles/sass/bookone.sass, et styles/sass/booktwo.sass – dans pages/_app.js.
// pages/_app.js
import "../styles/globals.css";
import "../styles/scss/bookshelf.scss";
import "../styles/sass/bookone.sass";
import "../styles/sass/booktwo.sass";

function MyApp({Component, pageProps}) {
  return ;
}

export default MyApp;

Notre bibliothèque commence à prendre forme. Avec les styles appliqués, le premier et le deuxième livre doivent être stylisés et affichés comme prévu.

Une capture d'écran de la modification apportée à la bibliothèque de démonstration après avoir stylisé le premier et le deuxième livre avec SASS
BookOne et BookTwo stylisés avec SASS. (Grand aperçu)

Modules CSS

Modules CSS est un CSS au niveau du composant, qui est intégré à Next et peut être activé en nommant les fichiers de style avec le .module.css extension. Il est également possible d'utiliser des modules CSS avec SASS / SCSS avec le .module.sass ou .module.scss extension.

Créons le style components/BookThree.js composant avec elle.

  • Mettre à jour styles/modules/BookThree.module.css.

/* styles/modules/BookThree.module.css */
.book-three {
  color: #df66c3;
  width: 106px;
  height: 448px;
  margin-right: 23px;
  background-color: #153086;
  transform: rotate(-4deg);
}
  • Importer styles/modules/BookThree.module.css dans components/BookThree.jset appliquez le .book-three classe.
// components/BookThree.js
import BookThreeStyles from "../styles/modules/BookThree.module.css";

export default function BookThree() {
  return (
    

the revolt of the public

Martin Gurri

); }

L'accès aux noms de classe dans les modules CSS est similaire aux accesseurs de propriété en JavaScript – avec la notation point ou crochet. Ici nous importons BookThreeStyles puis utilisez la notation entre crochets pour appliquer le style que nous avons dans styles/modules/BookThree.module.css fichier.

Si le sélecteur (dans ce cas, le nom de la classe) a été correctement accédé, le troisième livre devrait être stylisé maintenant.

Une capture d'écran de la modification apportée à la bibliothèque de démonstration après avoir stylisé le troisième livre avec des modules CSS
BookThree stylisé avec des modules CSS. (Grand aperçu)

Émotion

Emotion est une bibliothèque CSS-in-JS et, comme tout autre CSS-in-JS, vous permet d'écrire des styles CSS avec JavaScript.

Créons le style components/BookFour.js composant avec elle.

  • Installez les packages: @emotion/core, @emotion/styled, emotion, emotion-server.
yarn add @emotion/core @emotion/styled emotion emotion-server
  • Mettre à jour styles/emotion/StyledBookFour.js.
// styles/emotion/StyledBookFour.js
import styled from "@emotion/styled";

export const StyledBookFour = styled.div`
  color: white;
  width: 38px;
  height: 400px;
  margin-left: 20px;
  margin-right: 10px;
  background-color: #2faad2;
  transform: rotate(4deg);
`;

Après l'importation styled de @emotion/styled, nous exportons le StyledBookFour composant stylisé – à ne pas confondre avec l'autre composant de style CSS-in-JS – amélioré avec le styled méthode d'émotion comme dans styled.div. Ensuite, nous pouvons utiliser comme dans l'étape suivante ci-dessous.

En savoir plus sur la fonction stylistique de l’émotion.

  • En utilisant est similaire à la façon dont vous utiliseriez n'importe quel autre composant React. Importer styles/emotion/StyledBookFour.js dans components/BookFour.jset appliquez le StyledBookFour composant.
// components/BookFour.js
import {StyledBookFour} from "../styles/emotion/StyledBookFour";

export default function BookFour() {
  return (
    
      

the man died

wole soyinka

); }

Avec un dose suffisante d'émotion, le quatrième livre devrait être ainsi stylisé.

Une capture d'écran de la modification apportée à la bibliothèque de démonstration après avoir stylisé le quatrième livre avec Emotion
BookFour stylé avec Emotion. (Grand aperçu)

Stylé JSX

Comme Global CSS et CSS-Modules, Styled-JSX fonctionne avec Next.js sans aucune configuration supplémentaire requise. Si cela aide, Styled-JSX est également l’offre de Vercel d’un CSS à base de composants, les mêmes créateurs de Next.js.

Créons le style components/BookFive.js composant avec elle.

Pour simplifier les choses, nous utilisons ici le mode interne de styled-jsx. En passant le jsx accessoire à la

); }

Et juste comme ça, le cinquième livre prend son style.

Une capture d'écran de la modification apportée à la bibliothèque de démonstration après avoir stylé le cinquième livre avec Styled JSX
BookFive stylisé avec Styled JSX. (Grand aperçu)

Composants stylisés

Styled-Component, tout comme Emotion, est également une bibliothèque CSS-in-JS qui vous permet d'écrire des styles CSS avec JavaScript. L'installation est un peu compliquée.

  • Tout d'abord, installez babel-plugin-styled-components et styled-components.
yarn add babel-plugin-styled-components styled-components
  • Créer un .babelrc fichier à la racine de votre application, et un pages/_document.js fichier, comme indiqué dans l'image avant (gauche) et après (droite) ci-dessous.
<img srcset = "https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b37e5780 -2301-482e-bef0-383fbb7881b7 / nouveaux-fichiers-document-babelrc-added.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b37e5780-2301-482e- bef0-383fbb7881b7 / nouveaux-fichiers-document-babelrc-added.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b37e5780-2301-482e- bef0-383fbb7881b7 / nouveaux-fichiers-document-babelrc-added.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b37e5780-2301-482e- bef0-383fbb7881b7 / nouveaux-fichiers-document-babelrc-added.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b37e5780-2301-482e- bef0-383fbb7881b7 / new-files-document-babelrc-added.png 2000w "src =" https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent. com / assets / 344dbf88-fdf9-42bb-adb4-46f01eedd629 / b37e5780-2301-482e-bef0-383fbb7881b7 / new-files-document-babelrc-added.png "tailles =" 100vw "alt =" Une capture d'écran de la modification de la démo Bookshelf après avoir ajouté deux nouveaux fichiers – _.document.js et .babelrc« />
Nouveaux fichiers ajoutés: _document.js et .babelrc. (Grand aperçu)
  • Mettre à jour le .babelrc fichier pour inclure le next/babel prérégler et inclure le styled-components plugin, avec le rendu côté serveur (ssr) activé.
// .babelrc
{
  "presets": ("next/babel"),
  "plugins": (
    (
      "styled-components",
      {
        "ssr": true
      }
    )
  )
}
  • Mettre à jour pages/_document.js par injecter les styles rendus côté serveur dans le .

Gardez à l'esprit, l'extrait ci-dessous (pages/_document.js) est un obligatoire logique pour que les composants stylisés fonctionnent avec Next.js. Tu dois presque faire rien mais copiez la logique comme indiqué dans la documentation des composants stylisés.

// pages/_document.js
import Document from "next/document";
import {ServerStyleSheet} from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

Après les mises à jour de .babelrc, et pages/_document.js, nous pouvons maintenant commencer à utiliser des composants stylisés.

  • Mettre à jour styles/styled-components/StyledBookSix.js.

styled est une méthode utilitaire interne qui transforme le style de JavaScript en CSS réel. is, et, peut être utilisé comme n'importe quel autre composant React.

// styles/StyledBookSix.js
import styled from "styled-components";

const StyledBookSix = styled.div`
  color: #fff;
  width: 106px;
  height: 448px;
  margin-right: 23px;
  background-color: rebeccapurple;
`;

export default StyledBookSix;

En savoir plus sur l'utilisation des composants stylisés dans React.

  • Importer styles/styled-components/StyledBookSix.js dans components/BookSix.js, en utilisant les composants stylisés importés .
// components/BookSix.js
import StyledBookSix from "../styles/styled-components/StyledBookSix";

export default function BookSix() {
  return (
    
      

purple hibiscus

chimamanda ngozi adichie

); }

Une fois la première à la sixième étape terminée, la sixième doit être stylisée et la bibliothèque terminée:

Une capture d'écran de la modification apportée à la bibliothèque de démonstration après avoir stylisé le sixième livre avec des composants stylisés
BookSix stylisé avec des composants stylisés. (Grand aperçu)

C'est tout.

Si tout s'est bien passé, vous devriez avoir la bibliothèque complète avec les livres en attente de lecture.

Conclusion

Dans mon propre usage avec Next.js, les styles globaux et les composants stylisés ont souvent été suffisants. Mais il ne fait aucun doute que toutes ces méthodes ont leurs avantages et leurs inconvénients. Et lorsque vous décidez de la méthode à utiliser, gardez simplement à l'esprit: à la fin, tout est CSS. À ce stade, je pense que vous pouvez être en mesure de déterminer quel modèle vous convient le mieux dans votre prochain projet.

Ressources

Je trouve que pour apprendre à configurer des méthodes de style avec Next.js, il n’ya pas de meilleur endroit que sa documentation officielle.

Mais il existe également des référentiels spécifiques pour diverses méthodes de style. Vous pouvez parcourir les différents référentiels pour en savoir plus ou rechercher des mises à jour, car les choses peuvent changer en mode incognito.

  1. CSS de Tailwind
  2. Modules CSS
  3. Moins
  4. Style
  5. CSS Tailwind avec Emotion
  6. Styletron
  7. Charme
  8. CXS
  9. Aphrodite
  10. Fela
  11. Stylé-JSX
Éditorial fracassant(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *