StayedCSS를 사용하여 Next.js에 CSS 적용

Next.js 앱 라우터의 스타일 문제

Next.js 앱 라우터 출시 이후 개발자들은 서버와 클라이언트 구성 요소를 분리하는 패러다임을 수용했습니다. 효율적이면서도 새로운 과제를 제시합니다.

과제 1: 서버 측 및 클라이언트 측 환경 지원

Next.js는 React를 기반으로 하기 때문에 React 스타일 라이브러리를 자주 사용합니다. 그러나 이러한 라이브러리 중 다수는 CSR(클라이언트 측 렌더링)에 최적화되어 있는 반면, 앱 라우터는 기본적으로 SSR(서버 측 렌더링)을 사용합니다. 이러한 불일치는 SSR과 CSR 간의 스타일 불일치로 이어질 수 있습니다.

과제 2: 스타일이 지정되지 않은 콘텐츠 플래시(FOUC)

다크 모드는 더 나은 UX를 위한 일반적인 기능이지만 SSR은 일반적으로 라이트 모드에서 HTML을 렌더링합니다. 클라이언트가 나중에 다크 모드를 적용하여 사용자 경험을 방해하는 화면 깜박임을 유발합니다.

저는 개발 과정에서 이러한 어려움에 직면한 적이 있습니다. Next.js의 강점에도 불구하고 스타일 문제가 계속해서 방해가 되었습니다. 제가 그 문제를 해결한 방법은 다음과 같습니다.

StayedCSS: Next.js 앱 라우터용 CSS 라이브러리

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

이러한 문제를 해결하기 위해 StayedCSS를 만들었습니다. 이 라이브러리는 서버와 클라이언트 환경을 모두 지원하여 깜박임 없는 다크 모드와 Next.js 앱 라우터와의 원활한 호환성을 제공합니다.

StayedCSS가 다른 개발자가 이러한 문제를 해결하는 데 도움이 되기를 바라며 이를 커뮤니티와 공유하게 되어 기쁩니다!

1. 서버 구성 요소에 스타일 적용

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

정적 CSS 파일과 고유한 클래스 이름을 생성하는 st 함수를 사용하여 스타일을 정의합니다. 각 스타일 개체는 구성 요소 ID에 연결되어 있어 쉽게 구별할 수 있습니다. 이제 서버 구성요소는 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 함수를 사용하여 스타일을 정의합니다. 서버 구성 요소와 유사하게, 구성 요소 ID를 기반으로 정적 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는 쿠키를 사용하여 지연이나 깜박임 없이 다크 모드를 적용함으로써 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 앱 라우터 환경에서 스타일을 단순화하기 위해 여기에 있습니다. 서버-클라이언트 호환성부터 고급 CSS 기능까지, 더 나은 스타일링 경험을 위해 설계되었습니다. 오늘 사용해 보고 의견을 공유해 주세요. 피드백을 듣고 싶습니다! ?

위 내용은 StayedCSS를 사용하여 Next.js에 CSS 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!