Gunakan CSS dalam Next.js dengan StayedCSS

Isu Penggayaan dalam Penghala Apl Next.js

Sejak pelancaran Next.js App Router, pembangun telah menerima paradigma yang memisahkan komponen pelayan dan klien. Walaupun cekap, ia memperkenalkan cabaran baharu.

Cabaran 1: Menyokong persekitaran sisi pelayan dan sisi pelanggan

Next.js sering menggunakan perpustakaan penggayaan React, kerana ia berdasarkan React. Walau bagaimanapun, kebanyakan pustaka ini dioptimumkan untuk CSR (Penyebaran Sisi Pelanggan), manakala Penghala Apl secara lalai kepada SSR (Penyerahan Sisi Pelayan). Ketidakpadanan ini boleh menyebabkan gaya tidak konsisten antara SSR dan CSR.

Cabaran 2: Kilatan Kandungan Tidak Digayakan (FOUC)

Mod gelap ialah ciri biasa untuk UX yang lebih baik, tetapi SSR biasanya memaparkan HTML dalam mod terang. Pelanggan menggunakan mod gelap kemudian, menyebabkan skrin berkelip yang mengganggu pengalaman pengguna.

Saya sendiri telah menghadapi cabaran ini semasa pembangunan. Walaupun terdapat kelebihan Next.js, masalah penggayaan terus menghalang. Begini cara saya menangani mereka.

StayedCSS: Pustaka CSS untuk Penghala Apl Next.js

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

Untuk menangani isu ini, saya mencipta StayedCSS. Pustaka ini menyokong kedua-dua pelayan dan persekitaran pelanggan, menawarkan mod gelap tanpa kelipan dan keserasian lancar dengan Penghala Aplikasi Next.js.

Saya harap StayedCSS membantu pembangun lain menyelesaikan cabaran ini dan saya teruja untuk berkongsi dengan komuniti!

1. Menggunakan Gaya pada Komponen Pelayan

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

Tentukan gaya menggunakan fungsi st, yang menjana fail CSS statik dan nama kelas yang unik. Setiap objek gaya dipautkan kepada componentId, memastikan pembezaan mudah. Komponen pelayan kini boleh memanfaatkan sintaks seperti CSS-dalam-JS sambil mendapat manfaat daripada CSS statik yang dioptimumkan untuk SSR.

2. Menggunakan Gaya pada Komponen Pelanggan

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

Untuk komponen klien, gunakan fungsi stClient untuk menentukan gaya. Sama seperti komponen pelayan, ia menjana fail CSS statik dan nama kelas unik berdasarkan componentId. Kedua-dua komponen pelayan dan pelanggan berkongsi pendekatan penggayaan mudah yang sama.

3. Mod Gelap tanpa Berkelip

'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 menyelesaikan isu FOUC dalam SSR dengan menggunakan kuki untuk menggunakan mod gelap tanpa berlengah atau berkelip. Tentukan gaya mod terang dan gelap dengan padanan componentId untuk peralihan yang lancar.

4. Halaman Responsif dengan kaedah Mudah

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 menjadikan pertanyaan media mudah dengan kata kunci seperti mudah alih, tablet dan desktop. Isytihar gaya responsif terus dalam objek gaya untuk reka bentuk yang bersih dan mudah suai merentas saiz skrin.

5. Mengambilnya Lebih Lanjut dengan CSS Lanjutan

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

Ciri yang disokong termasuk pseudo-classes :hover, pseudo-elements ::before dan combinators ~. Tulis sintaks CSS yang biasa dan StayedCSS mengoptimumkannya menjadi fail statik, membolehkan penggayaan berprestasi tinggi merentas pelayan dan komponen klien.

Untuk contoh terperinci, lawati halaman Dokumen.

StayedCSS berada di sini untuk memudahkan penggayaan dalam persekitaran Penghala Aplikasi Next.js. Daripada keserasian pelayan-pelanggan kepada ciri CSS lanjutan, ia direka untuk pengalaman penggayaan yang lebih baik. Cubalah hari ini dan kongsi pendapat anda — saya ingin mendengar maklum balas anda! ?

Atas ialah kandungan terperinci Gunakan CSS dalam Next.js dengan StayedCSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!