StayedCSS を使用して Next.js に CSS を適用する

Next.js App Router のスタイルの問題

Next.js App Router の発表以来、開発者はサーバー コンポーネントとクライアント コンポーネントを分離するパラダイムを受け入れてきました。効率的である一方で、新たな課題も生じます。

課題 1: サーバー側とクライアント側の環境のサポート

Next.js は React に基づいているため、React スタイリング ライブラリをよく使用します。ただし、これらのライブラリの多くは CSR (クライアントサイド レンダリング) 用に最適化されていますが、App Router はデフォルトで SSR (サーバーサイド レンダリング) に設定されています。この不一致により、SSR と CSR の間でスタイルの不一致が生じる可能性があります。

課題 2: スタイルのないコンテンツのフラッシュ (FOUC)

ダーク モードは UX を向上させるための一般的な機能ですが、SSR は通常、HTML をライト モードでレンダリングします。クライアントが後でダーク モードを適用すると、画面がちらつき、ユーザー エクスペリエンスが中断されます。

私自身も開発中にこれらの課題に直面しました。 Next.js の利点にもかかわらず、スタイルの問題が常に邪魔をしていました。私がそれらに対処した方法は次のとおりです。

StayedCSS: Next.js App Router の 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 環境のサーバーおよびクライアント コンポーネントにスタイルをシームレスに適用します。
• さまざまなスタイル オプション: :hover、::after、~ p などのさまざまな CSS スタイルをサポートします。
• メディア クエリ: レスポンシブ デザインの実装を簡素化します。
• ダーク モード: ちらつきのないダーク モード移行を提供します。

はじめに

インストール

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

…

GitHub で表示

これらの問題に対処するために、StayedCSS を作成しました。このライブラリはサーバー環境とクライアント環境の両方をサポートし、ちらつきのないダーク モードと Next.js App Router とのシームレスな互換性を提供します。

StayedCSS が他の開発者がこれらの課題を解決するのに役立つことを願っており、コミュニティと共有できることに興奮しています!

1. サーバーコンポーネントへのスタイルの適用

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

静的 CSS ファイルと一意のクラス名を生成する st 関数を使用してスタイルを定義します。各スタイル オブジェクトは、componentId にリンクされているため、簡単に区別できます。サーバー コンポーネントは、SSR 用に最適化された静的 CSS の恩恵を受けながら、CSS-in-JS のような構文を活用できるようになりました。

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 は、Cookie を使用して遅延やちらつきのないダーク モードを適用することで、SSR の FOUC 問題を解決します。スムーズな遷移のために、一致するコンポーネント ID を使用してライト モードとダーク モードのスタイルを定義します。

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 中国語 Web サイトの他の関連記事を参照してください。