Next13×PandaCSSのセットアップ #Next.js

最近話題のゼロランタイムの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が使えるようになりました。