Next.jsの開発環境で自動的にブラウザを開く設定方法
私はNext.Jsとtailwindcssを使用し、フロントエンド開発を行っている初心者です。
普段のNext.js開発で、yarn dev実行後にターミナルのURLをコントロールクリックするのが面倒だと感じていました。この問題を解決するため、いくつかの方法を調べてみました。
今回は、その中から開発サーバー起動と同時にブラウザを自動で開く設定方法についてまとめます。
目次
はじめに
通常のNext.js開発では、以下の手順を毎回行っています。
- ターミナルで
yarn devを実行 - 表示されたURLをコントロールクリック、もしくは
- 手動でブラウザを開いて
localhost:3000にアクセス
この手順を1つのコマンドで自動化する方法です。
必要なパッケージ
以下の2つのパッケージを開発環境にインストールします。
npm
npm install -D concurrently open-cli
yarn
yarn add -D concurrently open-cli
各パッケージの役割
- concurrently: 複数のコマンドを並行して実行できるツール
- open-cli: コマンドラインからブラウザを開くためのツール
設定方法
package.jsonのscriptsセクションを以下のように編集します。
{
"scripts": {
"dev": "concurrently \"next dev\" \"open-cli http://localhost:3000\"",
"dev:delay": "concurrently \"next dev\" \"sleep 3 && open-cli http://localhost:3000\"",
"dev:port": "concurrently \"next dev -p 3001\" \"open-cli http://localhost:3001\""
}
}
クイックコピー用スクリプト
以下のスクリプトをそのままコピーしてpackage.jsonのscriptsセクションに貼り付けることができます。
"dev": "concurrently \"next dev\" \"open-cli http://localhost:3000\"",
"dev:delay": "concurrently \"next dev\" \"sleep 3 && open-cli http://localhost:3000\"",
"dev:port": "concurrently \"next dev -p 3001\" \"open-cli http://localhost:3001\"",
各スクリプトの説明
-
dev: 標準的な開発環境の起動 -
dev:delay: 3秒の遅延後にブラウザを開く -
dev:port: ポート3001で起動する場合
必要なスクリプトだけを選んでご利用ください。
動作の仕組み
このスクリプトは以下の2つのコマンドを同時に実行します。
-
next dev: Next.jsの開発サーバーを起動 -
open-cli http://localhost:3000: デフォルトブラウザで開発サーバーのURLを開く
使用方法
いつも通り以下のコマンドを実行するだけです。
yarn dev
すると、
- 開発サーバーが起動
- 自動的にデフォルトブラウザが開く
-
localhost:3000が表示される
という一連の動作が自動的に実行されます。
トラブルシューティング
ブラウザが早すぎて開く場合
開発サーバーの起動前にブラウザが開いてしまう場合は、遅延を追加したdev:delayスクリプトを使用します。
yarn dev:delay
ポート3000が使用中の場合
別のアプリケーションがポート3000を使用している場合は、dev:portスクリプトを使用して別のポートで起動できます。
yarn dev:port
Windows環境での注意点
Windowsユーザーの場合、open-cliの代わりにstartコマンドを使用することもできます。
{
"scripts": {
"dev:win": "concurrently \"next dev\" \"start http://localhost:3000\""
}
}
発展的な使用方法
環境変数に応じたポート変更
{
"scripts": {
"dev:env": "concurrently \"next dev -p $PORT\" \"open-cli http://localhost:${PORT:-3000}\""
}
}
特定のブラウザで開く
Mac OS
{
"scripts": {
"dev:chrome": "concurrently \"next dev\" \"open -a 'Google Chrome' http://localhost:3000\"",
"dev:firefox": "concurrently \"next dev\" \"open -a 'Firefox' http://localhost:3000\""
"dev:edge": "concurrently \"next dev\" \"open -a 'Microsoft Edge' http://localhost:3000\""
}
}
Windows
{
"scripts": {
"dev:chrome": "concurrently \"next dev\" \"start chrome http://localhost:3000\"",
"dev:firefox": "concurrently \"next dev\" \"start firefox http://localhost:3000\"",
"dev:edge": "concurrently \"next dev\" \"start msedge http://localhost:3000\""
}
}
リロードの自動化
nodemonを追加することで、ファイル変更時に自動でサーバーを再起動できます。
{
"scripts": {
"dev:watch": "concurrently \"nodemon --exec 'next dev'\" \"open-cli http://localhost:3000\""
}
}
補足
メリット
- 開発開始時の手間が減る
- チーム内で同じ手順を共有できる
- 新規参画メンバーの環境構築手順が簡略化
- 異なる環境や要件に対応できる柔軟性
注意点
- デフォルトブラウザが自動で開くため、別のブラウザを使用したい場合は手動で開く必要があります
- 開発サーバーの起動前にブラウザが開いてしまう可能性があるため、その場合は手動でリロードしてください
- チームで使用する場合は、使用するスクリプトを統一することを推奨します
まとめ
小さな設定ですが、日々の開発での手間を1ステップ省くことができます。特にチーム開発において、統一された開発環境のセットアップに役立つと思います。
また、今回紹介した発展的な使用方法を活用することで、より柔軟な開発環境を構築することができます。チームの要件や個人の好みに合わせてカスタマイズしていくことをお勧めします。
もし記事の内容に間違いがあれば、コメントでご指摘いただけますと幸いです。また、より良い方法や代替手段をご存知の方がいらっしゃいましたら、ぜひ共有していただければと存じます。例えば、VS Codeの拡張機能や他のツールを使用した方法など、様々なアプローチがあるかもしれません。