はじめに
この記事では、Next.js でローカルサーバー起動した時に自動でブラウザを開く方法について説明します。
前提
開発環境は以下の通りです。
- Windows11
- VSCode
- Next.js 13.4.4
- React 18.2.0
- Node.js 18.14.0
- open-cli 7.2.0
以下のコマンドでプロジェクトを作成します。
npx create-next-app@latest
方法1. package.json の scripts の変更
package.json の scripts dev を以下のように変更します。
package.json
"scripts": {
"dev": "npm run open-browser && next dev",
"open-browser": "start http://localhost:3000",
}
方法2. open-cli の利用
open-cli というライブラリを利用します。
以下のコマンドでインストールします。
npm install open-cli
次に package.json の scripts dev を以下のように変更します。
package.json
"scripts": {
"dev": "npx open-cli http://localhost:3000 && next dev",
}
これでローカルサーバーを起動した時に自動でブラウザが開くようになりました。