mars 13, 2024

Maîtriser Next.js pour des interfaces utilisateur époustouflantes / Blogs / Perficient

Dans le développement Web, il est essentiel de donner une belle apparence aux interfaces. Next.js, un framework React populaire, nécessite de maîtriser les techniques de style pour atteindre l’excellence.

Dans ce blog, nous plongerons dans le monde du style dans Next.js, en nous concentrant sur l’importation de styles globaux, l’ajout de styles au niveau des composants, l’exploitation de la prise en charge SASS et l’utilisation de CSS-in-JS.

Styles globaux

Importez simplement des styles globaux dans différentes parties de votre application, telles que les mises en page, les pages et les composants. Cela garantit une apparence cohérente tout au long de votre projet Next.js.

Pour importer des styles globaux, créez un fichier CSS (par exemple, ‘global.css’) et importez-le dans votre ‘layout.js’ fichier dans le répertoire « app ».

Une illustration de l’utilisation de global.css

//Path: src/app/global.css

/* global.css */
body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

h1, h2, h3,h4,h5,h6 {
  margin: 0;
}

a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

input {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
}

Dans le fichier de mise en page racine (app/layout.js), apportez le feuille de style global.css pour étendre les styles sur toutes les routes de votre application :

//Path: src/app/layout.js

import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Tous les styles définis dans ‘global.css’ sera appliqué sur toutes les pages.

Composants de style

Apporter du style au niveau individuel

Les styles globaux préservent la cohérence, mais les styles au niveau des composants offrent un contrôle précis sur les éléments individuels.

Dans Next.js, vous pouvez appliquer des styles aux composants à l’aide de styles en ligne, de feuilles de style externes ou tirer parti des bibliothèques CSS-in-JS.

Une illustration de l’utilisation de module.css à l’aide de styles en ligne

//Path: src/app/Product/page.js

const Page () => {
const cardWrapper = {
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
flexWrap: 'wrap',
background: '#f2f2f2',
};
return
<>
<div className="cardWrapper" style={cardWrapper}> </div>
};
export default Page;

Une illustration de l’utilisation de module.css à l’aide de styles externes

Structure des dossiers

//Path: src/app/Product/Style/Product.module.css

.card-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    background: #f2f2f2;
}
.card {
    border: 1px solid #dadada;
    background-color: #fff;
    border-radius: 16px;
    flex: 1 1;
    padding: 20px;
    width: 45%;
    margin: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}
.image .thumbnail {
    width: 300px;
    height: 250px;
  }
  
  .info {
    padding: 20px;
  }
  .info h1 {
    margin: 0 0 10px;
  }
  .info p {
    margin: 0 0 5px;
  }/*# sourceMappingURL=ProductCard.module.css.map */

//Path: src/app/Product/page.js

"use client"
// Importing the style module into the Product component
import style from './Style/Product.module.css';

const Page = () => {

    return (
        <>
            <div className={style['card-wrapper']}>
                <div className={style['card']}>
                    <div className={style['image']}>
                        <img className={style['thumbnail']} src="https://cdn.dummyjson.com/product-images/1/thumbnail.jpg" alt="Product Thumbnail" />
                    </div>
                    <div className={style['info']}>
                        <h1 className={style['title']}>iPhone</h1>
                        <p className={style['description']}>An apple mobile which is nothing like apple</p>
                        <p className={style['price']}>Price: $549 <span className={style['discount']}>Discount: 12.96%</span></p>
                        <p className={style['rating']}>Rating: 4.69</p>
                        <p className={style['stock']}>Stock: 10</p>
                        <p className={style['category']}>Category: Smartphones</p>
                        <p className={style['brand']}>Brand: Apple</p>
                    </div>
                </div>
            </div>
        </>
    );
};

export default Page;

Assurez-vous que le chemin dans l’instruction d’importation est correct en fonction de l’emplacement de votre fichier Product.module.css.

Sortir

Lorsque vous créez votre projet, les modules CSS combinent et organisent vos styles dans des fichiers compacts et séparés. De cette façon, vous pouvez charger uniquement les styles nécessaires pour un composant ou une page spécifique, améliorant ainsi les performances en réduisant les charges de style inutiles.

Prise en charge du SASS

SASS mondial

Vous pouvez créer des fichiers SASS globaux dans votre projet, tels que styles/global.scss. Ces fichiers appliqueront des styles à l’ensemble de votre application.

SASS au niveau des composants

Si vous souhaitez étendre les styles à un composant spécifique, vous pouvez utiliser les modules SASS. Ces fichiers doivent être nommés avec le .module.scss ou .module.sass extension. Par exemple, app/Produit/Style/Product.module.scss.

Installation du package SASS

Avant d’utiliser SASS dans votre projet Next.js, vous devez installer le package SASS. Vous pouvez le faire en utilisant npm :

npm install sass

Configuration

La modification du fichier next.config.js permet de personnaliser le comportement du compilateur SASS. Par exemple, vous pouvez inclure les chemins d’accès à vos fichiers SASS. Ceci est utile si vous disposez d’une structure de répertoires spécifique pour vos styles.

/** @type (import('next'). NextConfig} */
const path = require('path');
const nextConfig = {
sassOptions: {
},
includePaths: [path.join(__dirname, 'styles')],
};
module.exports = nextConfig;

Dans cet exemple, l’option includePaths spécifie des répertoires supplémentaires à inclure lors de la compilation de SASS. Cette option vous aide à organiser et gérer vos fichiers SASS.

N’oubliez pas de redémarrer votre serveur de développement Next.js après avoir modifié la configuration.

Avec cette configuration, vous pouvez tirer parti de la puissance de SASS pour écrire des styles plus maintenables et structurés pour votre application Next.js.

CSS-en-JS

Next.js adopte des solutions CSS-in-JS telles que des composants stylisés ou des émotions, vous permettant d’écrire des styles directement dans vos fichiers JavaScript pour une approche de style modulaire et basée sur les composants.

Installer une bibliothèque CSS-in-JS

Choisissez une bibliothèque CSS-in-JS qui correspond à vos préférences. Certaines options populaires sont les composants stylisés, l’émotion et @emotion/styled. Installez la bibliothèque en utilisant npm ou fil.

//Example with styled-components
npm install styled-components

Créer un composant stylisé

Créez un nouveau fichier pour votre composant stylisé, tel que app/Styled/StyledButton.js. Importez la bibliothèque CSS-in-JS et utilisez-la pour créer votre composant stylisé.

Structure des dossiers

//Path: app/Styled/StyledButton.js
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

export default StyledButton;

Utilisez le composant stylisé dans vos composants

J’ai incorporé un bouton dans le composant Produit et importé un composant stylisé. Maintenant, j’utilise ce composant stylisé dans diverses pages et composants.

//Path: src/app/Product/page.js

"use client"
// Importing the style module into the Product component
import style from './Style/Product.module.css';
// Import and use your styled component in your pages or components
import StyledButton from '../Styled/StyledButton';

const Page = () => {

    return (
        <>
            <div className={style['card-wrapper']}>
                <div className={style['card']}>
                    <div className={style['image']}>
                        <img className={style['thumbnail']} src="https://cdn.dummyjson.com/product-images/1/thumbnail.jpg" alt="Product Thumbnail" />
                    </div>
                    <div className={style['info']}>
                        <h1 className={style['title']}>iPhone</h1>
                        <p className={style['description']}>An apple mobile which is nothing like apple</p>
                        <p className={style['price']}>Price: $549 <span className={style['discount']}>Discount: 12.96%</span></p>
                        <p className={style['rating']}>Rating: 4.69</p>
                        <p className={style['stock']}>Stock: 10</p>
                        <p className={style['category']}>Category: Smartphones</p>
                        <p className={style['brand']}>Brand: Apple</p>
                    </div>
                </div>
                <StyledButton>Click me</StyledButton>
            </div>
        </>
    );
};

export default Page;

Sortir

CSS vent arrière

1. Installez Tailwind CSS

Installer Tailwind CSS et les dépendances entre pairs

//Run the following npm command in your project directory

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Après avoir installé Tailwind CSS et ses dépendances homologues, exécutez la commande init pour générer les fichiers de configuration :
Cette commande génère à la fois les fichiers tailwind.config.js et postcss.config.js dans le répertoire de votre projet.

C’est ça! Vous avez installé avec succès Tailwind CSS et initialisé ses fichiers de configuration dans votre projet. Vous pouvez maintenant commencer à utiliser Tailwind CSS dans votre projet.

2. Ajustez la configuration du chemin de votre modèle :

Une fois l’installation terminée, vous trouverez un « tailwind.config.js » fichier dans le répertoire de votre projet. Vous pouvez ouvrir ce fichier et remplacer son contenu par la configuration suivante. Après avoir apporté les modifications, enregistrez le fichier.

//Path: tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Incorporez les directives Tailwind dans votre code CSS :

Ajoutez les directives @tailwind pour chacune des couches de Tailwind à votre « globals.css” déposer.
Ouvrez le fichier global.css et collez les trois lignes en haut de ce fichier.

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Lancez votre processus de construction

Après cela, redémarrez notre serveur de développement en exécutant- npm exécuter le développement

Après avoir implémenté Tailwind CSS, la capture d’écran affichera un style différent de celui « Optimisation des polices » capture d’écran. Tailwind supprime tous les styles par défaut, offrant un contrôle complet sur la personnalisation.

5. Commencez à intégrer Tailwind dans votre projet

Incorporons les classes CSS Tailwind pour styliser la balise

et l’élément

Blog ARC Optimizer

mars 13, 2024

Maîtriser Next.js pour des interfaces utilisateur époustouflantes / Blogs / Perficient

Styles globaux

Une illustration de l’utilisation de global.css

Composants de style

Apporter du style au niveau individuel

Une illustration de l’utilisation de module.css à l’aide de styles en ligne

Une illustration de l’utilisation de module.css à l’aide de styles externes

Prise en charge du SASS

SASS mondial

SASS au niveau des composants

Installation du package SASS

Configuration

CSS-en-JS

Installer une bibliothèque CSS-in-JS

Créer un composant stylisé

Utilisez le composant stylisé dans vos composants

CSS vent arrière

1. Installez Tailwind CSS

2. Ajustez la configuration du chemin de votre modèle :

3. Incorporez les directives Tailwind dans votre code CSS :

4. Lancez votre processus de construction

5. Commencez à intégrer Tailwind dans votre projet

et l’élément

, j’ai ajouté la classe font-size.

Conclusion

Articles similaires

Blog ARC Optimizer

Styles globaux

Une illustration de l’utilisation de global.css

Composants de style

Apporter du style au niveau individuel

Une illustration de l’utilisation de module.css à l’aide de styles en ligne

Une illustration de l’utilisation de module.css à l’aide de styles externes

Prise en charge du SASS

SASS mondial

SASS au niveau des composants

Installation du package SASS

Configuration

CSS-en-JS

Installer une bibliothèque CSS-in-JS

Créer un composant stylisé

Utilisez le composant stylisé dans vos composants

CSS vent arrière

1. Installez Tailwind CSS

2. Ajustez la configuration du chemin de votre modèle :

3. Incorporez les directives Tailwind dans votre code CSS :

4. Lancez votre processus de construction

5. Commencez à intégrer Tailwind dans votre projet

, j’ai ajouté la classe font-size.

Conclusion

Partager :

Articles similaires