Devbox + Bun + Next.js（Panda CSSを添えて）
爆速開発環境を共に目指そう。
| Package | Version |
|---|---|
| Devbox | 0.8.4 |
| Bun | 1.0.14 |
| Next.js | 14.0.4 |
| Panda CSS | 0.21.0 |
※ 本記事はM2 Mac環境を前提にしています。
Devbox
雰囲気が似ている Microsoft Dev Box ではなく、ローカル環境を分離してくれる方のDevboxです。
Instalation
公式ガイドに従ってインストールします。
curl -fsSL https://get.jetpack.io/devbox | bash
Create Environment
インストール後、プロジェクトを作成しDevbox環境を初期設定します。
mkdir devbox-example
cd devbox-example
devbox init
実行後devbox.jsonが作成されます。初期設定はこのような内容になってます。
{
"packages": [],
"shell": {
"init_hook": [
"echo 'Welcome to devbox!' > /dev/null"
],
"scripts": {
"test": [
"echo \"Error: no test specified\" && exit 1"
]
}
}
}
packagesがDevbox環境に含められるパッケージのリストを示します。
shell.init_hookは、後述するdevbox shell時に実行されるフック。scriptsはdevbox shellせずに直接実行できるスクリプトです。この場合devbox run testで実行できます。
試しにdevbox addでBunを追加してみます。
devbox add bun
devbox.jsonが更新されます。
"packages": ["bun@latest"],
@以下がご想像の通りバージョンの指定部分になります。
追加できるパッケージはdevbox searchで検索可能です。
試しにgitを検索してみます。
devbox search git
Found 24+ results for "git":
* git (2.42.0, 2.41.0, 2.40.1, 2.40.0, 2.39.2, 2.39.1, 2.39.0, 2.38.1, 2.38.0, 2.37.3)
* gita (0.16.6.1, 0.11.9)
* gitg (41, 3.32.1)
* gitea (1.21.1, 1.20.5, 1.20.4, 1.20.3, 1.20.2, 1.20.1, 1.20.0, 1.19.4, 1.19.3, 1.19.2)
* gitfs (0.5.2)
* gitin (0.2.3)
* gitit (0.15.1.1, 0.15.1.0, 0.15.0.0, 0.13.0.0)
* gitls (1.0.4, 1.0.3)
* gitnr (0.1.3, 0.1.1, 0.1.0)
* gitrs
Warning: Showing top 10 results and truncated versions. Use --show-all to show all.
awscli, vscodeなんかもあるので便利です。
Launch
作成した環境を立ち上げてみましょう。
devbox shell
初回実行時はNixosなどの依存関係が解決されるため、少し時間がかかります。
アクセスできたらBunがインストールされているか確認します。
bun -v
1.0.14
Devbox環境から抜けるときはdevbox exitです。
Bun + Next.js
そのままdevbox shell環境にてNextjsプロジェクトを初期化していきます。
Bunの公式ガイドを参照します。
bun create next-app
✔ What is your project named? … devbox-example
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No
LinterはBiomeを使う予定なので、ESLintは除外します。
プロジェクトの初期化すらDevboxでやってしまった罪で、ディレクトリが深くなってしまいます。
ls
devbox-example devbox.json devbox.lock
とりあえずdevbox-exampleの中身をカレントディレクトリに移動しました。
mv devbox-example/* .
rm -rf devbox-example
Running
さっそくDev環境を立ち上げてみます。
bun dev
え、マジでいけた。すげえ。
Panda CSS
PostCSSであるPanda CSSを導入してみます。
言わずもがな公式ガイドに従います。
bun add -D @pandacss/dev
bun panda init --postcss
pacage.jsonにスクリプトを追加します。
{
"scripts": {
+ "prepare": "panda codegen",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
Next.js初期化時AppRouterを選択したため、コンポーネントはappディレクトリにあります。
panda.config.tsのincludeを修正しましょう。
include: ["./app/**/*.{ts,tsx,js,jsx}"],
app/globals.cssを修正します。
@layer reset, base, tokens, recipes, utilities;
試しにapp/page.tsxを適当に修正します。
import { css } from '@/styled-system/css'
export default function Home() {
return (
<main>
<div>
<div className={css({ fontSize: "6xl", fontWeight: 'bold' })}>Hello 🐼!</div>
</div>
</main>
)
}
実行します。
bun dev
でかパンダが表示されたら完了です。
おわりに
Devbox
簡単すぎて拍子抜けでした。分離環境もローカルと全く変わらない速度で動作しました。
開発環境としては申し分ない性能をしています。
なにかとDockerと比較されがちなDevboxですが、Dockerの代替ではなく、asdfなどのパッケージマネージャーの代替と捉えるほうがメリットがわかりやすいかと思います。
asdfの特徴を考えてみます。
- 複数のパッケージを一元管理できる
- プロジェクト単位で利用するパッケージを管理できる
Devboxは上記の特徴に加えてさらに以下のメリットがあります。
- ローカル環境を汚さない
- 必要ならDevContainerも使える
- windowsでもOK
よくない？
意外と雑に使える技術という感想。チームでDevboxを統一しなくちゃならない、なんてことはなくて、ローカル環境に依存してます村で自分だけ正気を保つために導入するっていう選択ができます。
devbox.jsonをリポジトリに含められないなら、別の場所に作ってinit_hookで目的のプロジェクトにcdするというトリックも使えます。
Bun, Next.js, Panda CSS
何もいうことない...。
公式のテンプレートに沿うだけで完璧に仕上がります。bun testのおかげでjestの環境設定もいらないっていう。
手癖でemotionにしようかと思ったんですが、Themeの設定がきつくてPanda CSSにした経緯があります。
デフォルトで熟成されたデザイントークンが含まれて、デザイントークンと完璧に統合されているPanda CSSは使いやすいです。Panda CSSもなにか書きたい。
いい時代になった。
Discussion