Comparaison des méthodes de style dans Next.js
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:
- Global CSS
- SASS / SCSS
- Component-Level SASS / SCSS
- Component-Level CSS (Modules CSS)
- Styled-Components
- Styled JSX
- Emotion .
Prerequisite
Avant de commencer notre visite de style, il y a Voici quelques nuances suivantes dont vous devez vous familiariser.
_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._document.js
Comme_app.js
_document.js
est un composant personnalisé que Next.js utilise pour augmenter vos applicationset
tags. Ceci est nécessaire car les pages Next.js ignorent la définition du balisage du document environnant.
_. 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
.
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 à:
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.
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.
Si vous avez cloné et exécuté le référentiel de démonstration voici à quoi votre page devrait ressembler:
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
danspages / _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.
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
.
- Installez le package Sass .
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
etstyles / 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
etstyles / sass / booktwo.sass
– danspages / _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.
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
danscomponents / 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.
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. Importezstyles / emotion / StyledBookFour.js
danscomponents / BookFour.js
et appliquez le composantStyledBookFour
.
// 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é.
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
.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.
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
etstyled-components
.
yarn add babel-plugin-styled- components styled-components
- Créez un fichier
.babelrc
à la racine de votre application et un fichierpages / _document.js
comme indiqué dans l'avant (à gauche) et après (à droite) image ci-dessous.
- Mettez à jour le fichier
.babelrc
pour inclure le préréglagenext / babel
et inclure le pluginstyled-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
incomponents / 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:
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.
- Tailwind CSS
- Modules CSS
- Less
- Stylus
- Tailwind CSS with Emotion
- Styletron
- Glamour
- CXS
- Aphrodite
- Fela
- Styled-JSX
Source link