Next js Vanilla Extract CSS 설치하기 (next.js 14)

zero-runtime css-in-ts인 vanilla-extract는 런타임에 실행되는 css-in-js 방식( styled-components, emotion )과 달리 빌드타임에 실행되어 Next.js의 SSR에서 Hydration을 거치기 전에도 스타일시트를 가져올 수 있다.

TailwindCSS 역시 빌드 타임에 스타일시트를 가져올 수 있지만 가독성이 좋지 않아 새롭게 시작하게 된 프로젝트에 vanilla-extract를 도입하기로 하였다.

 

1. vanilla-extract 설치

// npm 
npm install @vanilla-extract/css
npm install --save-dev @vanilla-extract/next-plugin

// pnpm
pnpm add @vanilla-extract/css
pnpm add --save-dev @vanilla-extract/next-plugin

// yarn
yarn add @vanilla-extract/css
yarn add -D @vanilla-extract/next-plugin

 

 

2. next.config.mjs 수정

공식 문서에는 next.config.js 인 경우로만 작성되어 있다.

.mjs 확장자의 파일에서는 require 문법을 지원하지 않으므로 아래와 같이 작성해줘야 한다.

/** @type {import('next').NextConfig} */
import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";

const withVanillaExtract = createVanillaExtractPlugin();
const nextConfig = {};

export default withVanillaExtract(nextConfig);

 

 

3. styles.css.ts 작성

import { style } from "@vanilla-extract/css";

export const container = style({
  padding: 10,
  color: "red",
});

import { container } from "./styles.css";

export default function Home() {
  return <div className={container}>hello</div>;
}

잘 뜬다 ㅎㅎ

vanilla-extract 정복 가보자고 ... 👊

 

 

 

참고

https://ui.toast.com/weekly-pick/ko_20190805

https://velog.io/@shinhw371/CSS-why-Nextjs-recommand-Tailwind