Next.js × TypeScript × Kaze Styleのセットアップ方法

前回、最強のCSS-in-JS！Kaze Styleの紹介！という記事を書きました。
しかし、その際にセットアップの仕方を書くのを忘れていたので、今回改めて書いていこうと思います！

プロジェクトの作成

まずはNext.jsのプロジェクトの作成から

yarn create next-app [プロジェクト名] --typescript

これでTypeScript付きのNext.jsのプロジェクトが作成できたはず

現在のpackage.jsonはこんな感じ

{
  "name": "kaze-style-setup",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.8.3",
    "@types/react": "18.0.21",
    "@types/react-dom": "18.0.6",
    "eslint": "8.25.0",
    "eslint-config-next": "12.3.1",
    "typescript": "4.8.4"
  }
}

Kaze Styleのインストール

それでは早速Kaze Styleをインストールしましょう！

yarn add @kaze-style/react @kaze-style/themes
yarn add -D @kaze-style/next-plugin

インストールが終わったら、事前ビルドの設定をします！
と言ってもめちゃくちゃ簡単です

// next.config.js
const { withKazeStyle } = require("@kaze-style/next-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = withKazeStyle(nextConfig)

以上です！これで事前ビルドができるようになってます！

試しに適当に使ってみましょう

本当に動くか確認

// pages/app.tsx
import type { AppProps } from "next/app";
import { createGlobalStyle } from "@kaze-style/react";
import { resetStyle } from "@kaze-style/themes";

createGlobalStyle(resetStyle);

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

// pages/index.tsx
import { createStyle } from "@kaze-style/react";
import type { NextPage } from "next";

const classes = createStyle({
  container: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "100vh",
  },
  button: {
    fontWeight: 600,
    fontSize: "14.5px",
    padding: 0,
    borderRadius: "7px",
    height: "36px",
    width: "92px",
    backgroundColor: "#3ea8ff",
    color: "white",
    display: "inline-flex",
    justifyContent: "center",
    alignItems: "center",
    "&:active": {
      transform: "translateY(1px)",
    },
  },
});

const Home: NextPage = () => {
  return (
    <div className={classes.container}>
      <button className={classes.button}>ボタン</button>
    </div>
  );
};

export default Home;

おそらくこのようにするとこんな感じになると思います

分かりにくいかもしれませんが、Zennっぽいボタンを実装してみました

それではビルドして、事前生成できているのか、確認しましょう！

yarn build

すると.next/static/cssに

*,:after,:before{box-sizing:border-box;border-width:0;border-style:solid}...

というリセットCSSと

._j4nnmr{display:flex}._ykg2w6{justify-content:center}._1avrv1d{align-items:center}

こんな感じのCSSファイルが出力されていると確認できると思います！

まとめ

Kaze Style、めちゃくちゃ簡単に事前生成までできるのすごすぎますね...
きっとすぐドキュメントも作られると思うので、それまではこの記事を見ながら環境構築してもらえばいいと思います！

みなさんもぜひ使ってみてください！