💻
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、めちゃくちゃ簡単に事前生成までできるのすごすぎますね...
きっとすぐドキュメントも作られると思うので、それまではこの記事を見ながら環境構築してもらえばいいと思います!
みなさんもぜひ使ってみてください!
Discussion