2025/01/31

【Windows】BunJsでNext.jsの環境構築してみる

Next.jsBunJS

まずはBunJSをインストールします。

今回はNPMでインストールしてみます。

npm install -g bun

インストールできているか確認します。

bun --version
> 1.x.xx

次にBunを利用してNext.jsをインストールします。

インストール時のオプションはお好みのものを指定してください。

bun create next-app

√ What is your project named? ... bun-next
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes

これだけでインストール完了です!

Bunを使用して立ち上げてみましょう。

cd bun-next

//Bunをサーバーとして利用する場合
bun --bun run dev
$ next dev
   ▲ Next.js 15.1.6
   - Local:        http://localhost:3000
   - Network:      http://192.168.0.83:3000

 ✓ Starting...
 ✓ Ready in 10.3s

//Nodeをサーバーをして利用する場合は--bunを省略します
//bun run dev

表示されたhttp://localhost:3000にアクセスしてみます。

表示されました!

あとは普段通り開発するのみです。

参考にしたサイト

https://bun.sh/docs/installation

https://bun.sh/guides/ecosystem/nextjs

最後に

株式会社Robbitsでは一緒に働く仲間を募集しています!
ご興味のある方は是非一度ホームページをご覧ください!

ホームページを見てみる