最近話題のゼロランタイムのPandaCSSをNext.js13で使えるようにします。
各種パッケージをインストール
Next.jsの最新バージョンとPandaCSSをインストールします。
$ npx create-next-app@latest
$ npm i -D @pandacss/dev
$ npx panda init
panda CSSの設定
package.jsonを更新
{
"scripts": {
++ "prepare": "panda codegen",
}
}
最上位のコンポーネントに``をインポートします。これがないとcssを定義しても適用されません。
app/layout.tsx
import "styled-system/styles.css";
export default function RootLayout({children,}:{children: React.ReactNode;}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
次にpandaCSSをビルドするコマンドを入力する。オプションの--watchをつけると変更があるたびビルドしてくれます。
npx panda
# or
npx panda --watch
pandaCSSを使ってみる
試しにappディレクトリのpage.tsxに書き込んでみましょう。
app/page.tsx
import { css } from "../styled-system/css";
export default function Home() {
return <div className={css({ bg: "red.400" })}>hoge</div>;
}
これでhogeという文字が表示され背景に赤色が当たっていたら問題ありません。
注意
自動で生成されるstyled-systemはGitに上げる必要がないためgitignoreに追加しておいた方が良いです。
gitignore
styled-system
以上でNext.js13でPandaCSSが使えるようになりました。