Next.js with CSS-in-JS

2024. 12. 26. 14:30·Next.js
  1. 순수 css
    별다른 처리가 필요하지 않아 서버컴포넌트에서 호환문제가 발생하지 않는다.
  2. css 전처리기
    sass, less, postcss등 css 전처리기는 빌드타임에 순수css로 컴파일된다.
  3. css modules
    빌드타임에 css가 생성된다.
  4. Tailwind css
    빌드 타임에 css가 생성된다.
  5. CSS-in-JS
    자바스크립트를 사용하여 스타일 정의를 한다. 런타임에 동적으로 스타일이 적용된다.

빌드타임에 css가 완성되냐, 런타임에서 js통해 동적으로 css가 렌더링 되냐 Next.js 서버컴포넌트 호환성을 결정해준다.

'Next.js' 카테고리의 다른 글

Server Component와 Client Component 차이  (3) 2025.07.25
Next 스트리밍 with Suspense  (5) 2025.07.24
persistQueryClient를 활용해 초기렌더링 개선하기  (3) 2025.07.08
Next 13 이후 변경 점  (0) 2024.07.21
NEXT IMAGE TEST  (0) 2023.09.14
'Next.js' 카테고리의 다른 글
  • Next 스트리밍 with Suspense
  • persistQueryClient를 활용해 초기렌더링 개선하기
  • Next 13 이후 변경 점
  • NEXT IMAGE TEST
ssund
ssund
  • ssund
    ssund의 기술블로그
    ssund
  • 전체
    오늘
    어제
    • TECH (82)
      • Next.js (8)
      • React (25)
      • Vite (1)
      • javascript (17)
      • CSS (6)
      • CS (10)
      • AWS (0)
      • Jest (1)
      • CI|CD (0)
      • 알고리즘 (8)
      • Tools (1)
      • Tips (5)
  • 블로그 메뉴

    • 링크

    • 공지사항

    • 인기 글

    • 태그

      call signatures
      타입스크립트
      theme-provider
      TypeScript
      styled-components
      redux
      JavaScript
      커머스프로젝트
      웹브라우저구성
      함수와 메서드차이
      react state management
      서버컴포넌트
      global-style
      app-router
      React
      git배포
      배열요소순서
      nextjs
      reat-head
      Array.sort()
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.0
    ssund
    Next.js with CSS-in-JS
    상단으로

    티스토리툴바