Appliquer CSS dans Next.js avec StayedCSS

Problèmes de style dans le routeur d'application Next.js

Depuis le lancement du Next.js App Router, les développeurs ont adopté un paradigme qui sépare les composants serveur et client. Bien qu'efficace, cela introduit de nouveaux défis.

Défi 1 : Prise en charge des environnements côté serveur et côté client

Next.js utilise souvent les bibliothèques de styles React, car elles sont basées sur React. Cependant, bon nombre de ces bibliothèques sont optimisées pour le CSR (Client-Side Rendering), tandis que l'App Router utilise par défaut le SSR (Server-Side Rendering). Cette inadéquation peut conduire à des styles incohérents entre la RSS et la RSE.

Défi 2 : Flash de contenu non stylé (FOUC)

Le mode sombre est une fonctionnalité courante pour une meilleure UX, mais SSR restitue généralement le HTML en mode clair. Le client applique le mode sombre plus tard, provoquant un scintillement de l'écran qui perturbe l'expérience utilisateur.

J’ai moi-même été confronté à ces défis pendant le développement. Malgré les atouts de Next.js, des problèmes de style continuaient de gêner. Voici comment je leur ai adressé.

StayedCSS : la bibliothèque CSS pour le routeur d'application Next.js

vecteurdxy / restécss

✨ Une bibliothèque CSS légère pour Next.js App Router, prenant en charge les composants serveur et client.

StayedCSS : la bibliothèque CSS pour Next.js App Router

Présentation

StayedCSS - version bêta

StayedCSS est une bibliothèque CSS statique conçue pour Next.js App Router, offrant une prise en charge complète des composants serveur et client. Avec une syntaxe simple similaire au CSS de base, il permet un style efficace et vise à être la bibliothèque CSS de nouvelle génération pour le routeur d'application Next.js.

Actuellement dans sa version bêta, StayedCSS s'améliore rapidement en termes d'optimisation et de stabilité. Il continuera d'évoluer pour offrir une meilleure expérience de style pour vos projets.

Caractéristiques principales

• Prise en charge des composants serveur et client : appliquez des styles de manière transparente aux composants serveur et client dans l'environnement Next.js App Router.
• Diverses options de style : prend en charge divers styles CSS tels que :hover, ::after et ~ p.
• Requêtes multimédias : simplifiez la mise en œuvre du design réactif.
• Mode sombre : offre des transitions en mode sombre sans scintillement.

Démarrage

Installation

npm install stayedcss
<span># or</span>
yarn

…

Voir sur GitHub

Pour résoudre ces problèmes, j'ai créé StayedCSS. Cette bibliothèque prend en charge les environnements serveur et client, offrant un mode sombre sans scintillement et une compatibilité transparente avec le routeur d'applications Next.js.

J'espère que StayedCSS aidera d'autres développeurs à résoudre ces défis, et je suis ravi de le partager avec la communauté !

1. Application de styles aux composants du serveur

npm install stayedcss
<span># or</span>
yarn

Définissez des styles à l'aide de la fonction st, qui génère des fichiers CSS statiques et des noms de classe uniques. Chaque objet de style est lié à un composantId, garantissant une différenciation facile. Les composants serveur peuvent désormais exploiter une syntaxe de type CSS-in-JS tout en bénéficiant d'un CSS statique optimisé pour SSR.

2. Application de styles aux composants clients

import { st } from "stayedcss";

const styles = st({
  componentId: "components/example",
  container: {
    backgroundColor: "white",
    padding: "20px",
  },
});

export default function Example() {
  return (
    <div className={styles.container}>
      <h1>Hello, StayedCSS!</h1>
    </div>
  );
}

Pour les composants clients, utilisez la fonction stClient pour définir des styles. Semblable aux composants serveur, il génère des fichiers CSS statiques et des noms de classe uniques basés sur un identifiant de composant. Les composants serveur et client partagent la même approche de style simple.

3. Mode sombre sans scintillement

'use client'

import { stClient } from "stayedcss/client";

export default function ExampleClient() {
  return (
    <div className={style.container}>
      <div className={style.title}>title</div>
    </div>
  );
}

const style = stClient({
  componentId: "components/example-client",
  container: {
    marginBottom: 60,
  },
  title:{
    fontSize: 27,
  },
});

StayedCSS résout les problèmes FOUC dans SSR en utilisant des cookies pour appliquer le mode sombre sans délai ni scintillement. Définissez les styles des modes clair et sombre avec le composant ID correspondant pour des transitions fluides.

4. Pages réactives avec une méthode simple

import { st, stDark } from "stayedcss";

export default function DarkModeExample() {
  return (
    <div className={style.container}>
      <h1>Hello world!</h1>
    </div>
  );
}

const style = st({
  componentId: "component/darkmode-example",
  container: {
    backgroundColor: "white",
  },
});

stDark({
  componentId: "component/darkmode-example",
  container: {
    backgroundColor: "black",
  },
});

StayedCSS facilite les requêtes multimédias avec des mots-clés tels que mobile, tablette et ordinateur de bureau. Déclarez des styles réactifs directement dans l'objet de style pour des conceptions épurées et adaptatives sur toutes les tailles d'écran.

5. Aller plus loin avec Advanced CSS

const style = st({
  componentId: "components/docs/media-query",
  container: {
    display: "flex",
    justifyContent: "center",
    padding: "20px",
    backgroundColor: "lightgray",
  },
  "@mobile": {
    container: {
      backgroundColor: "pink", 
      padding: "10px",
    },
  },
  "@tablet": {
    container: {
      backgroundColor: "lightblue", 
      padding: "15px",
    },
  },
  "@desktop": {
    container: {
      backgroundColor: "lightgreen",
      width: "50%",
    },
  },
});

Les fonctionnalités prises en charge incluent les pseudo-classes :hover, les pseudo-éléments ::before et les combinateurs ~. Écrivez une syntaxe CSS familière et StayedCSS l'optimise dans des fichiers statiques, permettant un style haute performance sur les composants serveur et client.

Pour des exemples détaillés, visitez la page Docs.

---

StayedCSS est là pour simplifier le style dans l'environnement Next.js App Router. De la compatibilité serveur-client aux fonctionnalités CSS avancées, il est conçu pour une meilleure expérience de style. Essayez-le aujourd’hui et partagez vos réflexions – j’aimerais entendre vos commentaires ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!