使用 StayedCSS 在 Next.js 中應用 CSS

Next.js App Router 中的樣式問題

自從 Next.js App Router 推出以來，開發人員已經接受了一種分離伺服器和客戶端元件的範例。雖然高效，但它帶來了新的挑戰。

挑戰一：支援伺服器端與客戶端環境

Next.js 經常使用 React 樣式庫，因為它是基於 React。但是，其中許多程式庫都針對 CSR（客戶端渲染）進行了最佳化，而 App Router 預設為 SSR（伺服器端渲染）。這種不匹配可能會導致 SSR 和 CSR 之間的樣式不一致。

挑戰 2：無風格內容的閃光 (FOUC)

深色模式是改善使用者體驗的常見功能，但 SSR 通常在淺色模式下渲染 HTML。用戶端稍後套用深色模式，導致螢幕閃爍，影響使用者體驗。

我自己在開發過程中也面臨過這些挑戰。儘管 Next.js 具有強大的優勢，但樣式問題仍然存在。以下是我如何應對他們的。

StayedCSS：Next.js 應用程式路由器的 CSS 函式庫

向量dxy / 呆CSS

✨ 用於 Next.js App Router 的輕量級 CSS 函式庫，支援伺服器和用戶端元件。

StayedCSS：Next.js App Router 的 CSS 函式庫

簡介

StayedCSS - 測試版

StayedCSS 是一個專為 Next.js App Router 設計的靜態 CSS 函式庫，為伺服器和用戶端元件提供全面支援。它具有類似於基本 CSS 的簡單語法，可實現高效的樣式設置，旨在成為 Next.js App Router 的下一代 CSS 庫。

目前處於測試版本，StayedCSS 在最佳化和穩定性方面正在快速改進。它將繼續發展，為您的專案提供更好的造型體驗。

主要特點

• 伺服器和客戶端元件支援：將樣式無縫套用到 Next.js App Router 環境中的伺服器和用戶端元件。
• 各種樣式選項：支援各種 CSS 樣式，例如 :hover、::after 和 ~ p。
• 媒體查詢：簡化響應式設計實作。
• 深色模式：提供無閃爍的深色模式轉場。

開始使用

安裝

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

…

在 GitHub 上查看

為了解決這些問題，我創建了 StayedCSS。此程式庫支援伺服器和用戶端環境，提供無閃爍暗模式並與 Next.js App Router 無縫相容。

我希望 StayedCSS 能幫助其他開發者解決這些挑戰，我很高興與社群分享！

1. 將樣式應用到伺服器元件

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

使用 st 函數定義樣式，該函數會產生靜態 CSS 檔案和唯一的類別名稱。每個樣式物件都連結到一個 componentId，確保輕鬆區分。伺服器元件現在可以利用類似 CSS-in-JS 的語法，同時受益於針對 SSR 最佳化的靜態 CSS。

2. 將樣式應用到客戶端元件

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

對於客戶端元件，使用 stClient 函數來定義樣式。與伺服器元件類似，它根據 componentId 產生靜態 CSS 檔案和唯一的類別名稱。伺服器和客戶端元件共用相同的簡單樣式方法。

3.深色模式不閃爍

'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 透過使用 cookies 應用深色模式，解決了 SSR 中的 FOUC 問題，沒有延遲或閃爍。使用匹配的 componentId 定義淺色和深色模式樣式以實現平滑過渡。

4.簡單方法的響應式頁面

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 透過行動裝置、平板電腦和桌面等關鍵字輕鬆進行媒體查詢。直接在樣式物件中聲明響應式樣式，以實現跨螢幕尺寸的簡潔和自適應設計。

5. 使用高階 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%",
    },
  },
});

支援的功能包括偽類 :hover、偽元素 ::before 和組合器 ~。編寫熟悉的 CSS 語法，StayedCSS 將其最佳化為靜態文件，從而實現跨伺服器和客戶端元件的高效能樣式。

有關詳細範例，請造訪文件頁面。

---

StayedCSS 旨在簡化 Next.js App Router 環境中的樣式。從伺服器-客戶端相容性到高級 CSS 功能，它旨在提供更好的樣式體驗。今天就嘗試並分享您的想法 - 我很想聽聽您的回饋！ ？

以上是使用 StayedCSS 在 Next.js 中應用 CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！