Wenden Sie CSS in Next.js mit StayedCSS an

Styling-Probleme im Next.js App Router

Seit der Einführung des Next.js App Routers haben sich Entwickler ein Paradigma zu eigen gemacht, das Server- und Client-Komponenten trennt. Es ist zwar effizient, bringt aber auch neue Herausforderungen mit sich.

Herausforderung 1: Unterstützung serverseitiger und clientseitiger Umgebungen

Next.js verwendet häufig React-Styling-Bibliotheken, da es auf React basiert. Viele dieser Bibliotheken sind jedoch für CSR (Client-Side Rendering) optimiert, während der App Router standardmäßig auf SSR (Server-Side Rendering) setzt. Dieses Missverhältnis kann zu inkonsistenten Stilen zwischen SSR und CSR führen.

Herausforderung 2: Flash of Unstyled Content (FOUC)

Der dunkle Modus ist eine gängige Funktion für eine bessere UX, aber SSR rendert HTML normalerweise im hellen Modus. Der Client wendet später den Dunkelmodus an, was zu einem Bildschirmflackern führt, das das Benutzererlebnis beeinträchtigt.

Ich habe mich während der Entwicklung selbst diesen Herausforderungen gestellt. Trotz der Stärken von Next.js standen immer wieder Styling-Probleme im Weg. So habe ich sie angesprochen.

StayedCSS: Die CSS-Bibliothek für Next.js App Router

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

Um diese Probleme anzugehen, habe ich StayedCSS erstellt. Diese Bibliothek unterstützt sowohl Server- als auch Clientumgebungen und bietet einen flimmerfreien Dunkelmodus und nahtlose Kompatibilität mit dem Next.js App Router.

Ich hoffe, StayedCSS hilft anderen Entwicklern, diese Herausforderungen zu lösen, und ich freue mich, es mit der Community zu teilen!

1. Anwenden von Stilen auf Serverkomponenten

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

Definieren Sie Stile mit der st-Funktion, die statische CSS-Dateien und eindeutige Klassennamen generiert. Jedes Stilobjekt ist mit einer Komponenten-ID verknüpft, was eine einfache Unterscheidung gewährleistet. Serverkomponenten können jetzt CSS-in-JS-ähnliche Syntax nutzen und gleichzeitig von statischem CSS profitieren, das für SSR optimiert ist.

2. Anwenden von Stilen auf Client-Komponenten

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>
  );
}

Für Client-Komponenten verwenden Sie die stClient-Funktion, um Stile zu definieren. Ähnlich wie Serverkomponenten generiert es statische CSS-Dateien und eindeutige Klassennamen basierend auf einer Komponenten-ID. Sowohl Server- als auch Client-Komponenten verwenden denselben einfachen Stilansatz.

3. Dunkler Modus ohne Flackern

'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 löst FOUC-Probleme in SSR durch die Verwendung von Cookies, um den Dunkelmodus ohne Verzögerungen oder Flackern anzuwenden. Definieren Sie helle und dunkle Modusstile mit passender Komponenten-ID für sanfte Übergänge.

4. Responsive Seiten mit einfacher Methode

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 erleichtert Medienabfragen mit Schlüsselwörtern wie Mobilgerät, Tablet und Desktop. Deklarieren Sie responsive Stile direkt im Stilobjekt für klare und anpassungsfähige Designs über alle Bildschirmgrößen hinweg.

5. Mit Advanced CSS einen Schritt weiter gehen

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%",
    },
  },
});

Zu den unterstützten Funktionen gehören Pseudoklassen :hover, Pseudoelemente ::before und Kombinatoren ~. Schreiben Sie vertraute CSS-Syntax, und StayedCSS optimiert sie in statische Dateien und ermöglicht so ein leistungsstarkes Styling für alle Server- und Client-Komponenten.

Ausführliche Beispiele finden Sie auf der Seite „Dokumente“.

StayedCSS soll das Styling in der Next.js App Router-Umgebung vereinfachen. Von der Server-Client-Kompatibilität bis hin zu erweiterten CSS-Funktionen ist es für ein besseres Styling-Erlebnis konzipiert. Probieren Sie es noch heute aus und teilen Sie uns Ihre Meinung mit – ich würde mich über Ihr Feedback freuen! ?

Das obige ist der detaillierte Inhalt vonWenden Sie CSS in Next.js mit StayedCSS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!