Fermer

septembre 26, 2020

Comparaison des méthodes de style dans Next.js


À propos de l'auteur

Adebiyi Adedotun Lukman est un ingénieur UI / Frontend basé à Lagos, au Nigeria, qui adore également UI / UX Design par amour des grands logiciels. Quand …
En savoir plus sur
Adebiyi

Entre autres, Next.js s'est surnommé: The React Framework for Static Websites . Mais comme tout autre framework dont l'objectif est de vous aider à créer ce qui compte en résumant les tâches courantes 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 à son API, et c'est l'objet de ce tutoriel.

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 l'opinion des auteurs du framework.

Next.js est l'un des chaînes d'outils recommandées lors de la création d'une nouvelle application React. Des outils tels que 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, Data Fetching…), on oublie souvent le Styling.

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.

Le but de cet article est de vous aider à comprendre comment définir 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. Global CSS
  2. SASS / SCSS
  3. Component-Level SASS / SCSS
  4. Component-Level CSS (Modules CSS)
  5. Styled-Components
  6. Styled JSX
  7. Emotion .

Prerequisite

Avant de commencer notre visite de style, il y a Voici quelques nuances suivantes dont vous devez vous familiariser.

  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 tags. Ceci 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 étendez-le.

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

Création d'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 // Installe create-next-app globalement 
  • Crée une nouvelle application Next nommée styling-in-next .
 create-next-app styling-in-next // Crée une nouvelle application Next nommée styling-in-next 
  • Remplacez le répertoire par le nouveau site.
 cd styling-in-next // Bascule le répertoire dans le nouveau Nex t app 
 yarn dev -p 3000 // Demande à Next de s'exécuter sur le 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 s'exécuter 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 allons construire une bibliothèque artificielle en appliquant différentes méthodes de style à chaque livre . Le résultat final ressemblera à:

 Une capture d'écran de la version démo finale de Bookshelf
Final style Bookshelf. ( 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 dépôt GitHub que vous pourrez suivre. Vous pouvez le récupérer ici .

Certaines modifications ont également été apportées au démarreur par défaut généré par create-next-app . Des dossiers tels que emotion global modules styled-components etc. ont été ajoutés au dossier styles – avec leurs fichiers de style correspondants – ainsi qu'un répertoire components 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 styles et des composants Dossiers. ( Grand aperçu )

Le fichier index.js a été modifié en import et render les composants nécessaires et chacun des composants a une structure similaire à celle illustrée ci-dessous.

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

Si vous avez cloné et exécuté le référentiel de démonstration voici à quoi votre page devrait ressembler:

 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

Une des choses courantes que vous faites normalement lorsque vous démarrez un nouveau projet Web est de réinitialiser ou 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 de .

 / * styles / global / globals.css * /
html {
  box-dimensionnement: border-box;
  taille de la police: 16px;
  famille de polices: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
*,
*:avant,
*:après {
  taille de la boîte: hériter;
}
corps,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  marge: 0;
  rembourrage: 0;
  poids de la police: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  poids de la police: gras;
}

ol,
ul {
  style liste: aucun;
}

img {
  largeur max: 100%;
  hauteur: auto;
}

une {
  couleur: hériter;
  texte-décoration: aucun;
} 
  • 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}) {
  retour ;
}

exporter MyApp par défaut; 

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

À ce stade, nous n'avons pas beaucoup de changements visuels à notre Bibliothèque puisque nous n'avons fait que changements de normalisation . 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 démo Bookshelf 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 l'extension .sass ou .scss . L'installation de Sass est obligatoire. Tout comme les styles globaux, ils ne peuvent être importés que dans les pages / _app.js .

 yarn add sass 
  • Update styles / scss / bookshelf.scss .
 // styles / scss / bookshelf.scss
.La bibliothèque {
  largeur: 100vw;
  hauteur: 100vh;
  couleur de fond: # e3e3e3;
  affichage: flex;
  justify-content: centre;
  align-items: centre;

  .bookshelf-wrap {
    > .bookshelf {
      boîte-ombre: encart 0-20px # 7b5019;
      rembourrage en bas: 20px;
      affichage: flex;
      align-items: flex-end;
    }

    [class*="book"] {
      taille de la police: 32px;
      espacement des lettres: -0,045em;
      affichage: flex;
      transition: 0,2 s;

      &: hover {
        transformer: aucun;
      }
    }

    .book-info {
      text-transform: majuscule;
      écriture-mode: sideways-rl;
      affichage: flex;
      justify-content: espace autour;
      flex: 1;
      align-items: centre;
      poids de la police: gras;
      rembourrage: 16px 0;

      .Titre {
        font-weight: hériter;
        taille de la police: 20px;
      }

      .auteur {
        font-weight: hériter;
        taille de la police: 15px;
      }
    }
  }
} 
  • Mettez également à jour styles / sass / bookone.sass et styles / sass / booktwo.sass comme ceci:
 // styles / sass / bookone.sass
  .book-one
    couleur: # f00
    largeur: 78px
    hauteur: 350px
    transformation: rotation (-4deg)
    marge gauche: 16 px
    marge droite: 23px
    couleur de fond: noir 
 // styles / sass / booktwo.sass
.book-deux
  couleur: # 781e0b
  largeur: 38px
  hauteur: 448px
  marge droite: 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}) {
  retour ;
}

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 à l'étagère 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 l'extension .module.css . Il est également possible d'utiliser des modules CSS avec SASS / SCSS avec l'extension .module.sass ou .module.scss .

Stylisons les composants / BookThree. js avec.

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

/ * styles / modules / BookThree.module.css * /
.book-trois {
  couleur: # df66c3;
  largeur: 106px;
  hauteur: 448px;
  marge droite: 23px;
  couleur de fond: # 153086;
  transformation: rotation (-4deg);
} 
  • Importez styles / modules / BookThree.module.css dans components / BookThree.js et appliquez la classe .book-three .
 ] // composants / BookThree.js
importer BookThreeStyles depuis "../styles/modules/BookThree.module.css";

Exporter la fonction par défaut BookThree () {
  revenir (
    

la révolte du public

Martin Gurri

); }

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

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

 Une capture d'écran du changement de 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 )

Emotion

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

Stylisons avec lui le composant components / BookFour.js .

  • Installez les packages: @ emotion / core @ emotion / styled , emotion emotion-server .
 yarn add @ emotion / core @ emotion / styled emotion emotion-server 
  • Update styles / emotion / StyledBookFour.js .
 // styles / emotion / StyledBookFour.js
importer le style de "@ emotion / styled";

export const StyledBookFour = styled.div`
  Couleur blanche;
  largeur: 38px;
  hauteur: 400px;
  marge gauche: 20px;
  marge droite: 10px;
  couleur de fond: # 2faad2;
  transformation: rotation (4deg);
`; 

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

En savoir plus sur la fonction de style emotion.

  • L'utilisation de est similaire à l'utilisation de tout autre composant React. Importez styles / emotion / StyledBookFour.js dans components / BookFour.js et appliquez le composant StyledBookFour .
 // components / BookFour.js
import {StyledBookFour} de "../styles/emotion/StyledBookFour";

Exporter la fonction par défaut BookFour () {
  revenir (
    
      

l'homme est mort

wole soyinka

); }

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

 Une capture d'écran du changement de la bibliothèque de démonstration après avoir stylisé le quatrième livre avec Emotion
BookFour stylisé avec Émotion. ( Grand aperçu )

Styled 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 aussi l'offre de Vercel d'un CSS à base de composants, les mêmes créateurs de Next.js.

Stylisons les composants / BookFive.js .

Pour simplifier les choses, nous utilisons ici le mode interne de styled-jsx. En passant le prop jsx au composant

nous pouvons écrire autant de CSS que nous le voulons comme nous l'avons fait avec .book-five avec l'avantage supplémentaire du style localisé dans le composant .
 // components / BookFive.js
Exporter la fonction par défaut BookFive () {
  revenir (
    

il y avait un pays

Chinua Achebe

); }

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

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

Styled Components

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éez un fichier .babelrc à la racine de votre application et un fichier pages / _document.js comme indiqué dans l'avant (à gauche) et après (à droite) image 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 )
  • Mettez à jour le fichier .babelrc pour inclure le préréglage next / babel et inclure le plugin styled-components , avec le rendu côté serveur (ssr) activé.
 // .babelrc
{
  "préréglages": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true
      }
    ]
  ]
} 
  • Mettez à jour pages / _document.js en injectant les styles de rendu côté serveur dans le .

Gardez à l'esprit l'extrait ci-dessous ( pages / _document .js ) est une logique requise pour que les composants stylisés fonctionnent avec Next.js. Vous n'avez presque rien à faire mais copier la logique comme indiqué dans la documentation des styled-components .

 // pages / _document.js
importer le document de "suivant / document";
importer {ServerStyleSheet} à partir de "styled-components";

exporter la classe par défaut MyDocument étend le document {
  getInitialProps statique asynchrone (ctx) {
    feuille const = new ServerStyleSheet ();
    const originalRenderPage = ctx.renderPage;

    essayez {
      ctx.renderPage = () =>
        originalRenderPage ({
          EnhancerApp: (App) => (accessoires) =>
            sheet.collectStyles (),
        });

      const initialProps = attendre Document.getInitialProps (ctx);
      revenir {
        ... initialProps,
        modes: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement ()}
          >
        ),
      };
    } enfin {
      feuille.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. est, et, peut être utilisé comme n'importe quel autre composant React.

 // styles / StyledBookSix.js
import stylisé à partir de "styled-components";

const StyledBookSix = styled.div`
  couleur: #fff;
  largeur: 106px;
  hauteur: 448px;
  marge droite: 23px;
  couleur de fond: rebeccapurple;
`;

export default StyledBookSix; 

En savoir plus sur Comment utiliser Styled-Components dans React .

  • Import styles / styled-components / StyledBookSix.js in components / BookSix.js en utilisant les composants de style importés .
 // components / BookSix.js
importer StyledBookSix depuis "../styles/styled-components/StyledBookSix";

Exporter la fonction par défaut BookSix () {
  revenir (
    
      

hibiscus pourpre

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 Styled Components
BookSix stylisé avec Styled Composants. ( Grand aperçu )

Voilà.

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 crois 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'y a pas de meilleur endroit que sa documentation officielle

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

  1. Tailwind CSS
  2. Modules CSS
  3. Less
  4. Stylus
  5. Tailwind CSS with Emotion
  6. Styletron
  7. Glamour
  8. CXS
  9. Aphrodite
  10. Fela
  11. Styled-JSX
 Smashing Editorial (ks, ra, yk, il)




Source link