StayedCSS を使用して Next.js に CSS を適用する-jsチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-12-19 07:01:13

オリジナル

937 人が閲覧しました

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 ライブラリで、サーバーとクライアントのコンポーネントをサポートします。

Apply CSS in Next.js with StayedCSS

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