Next.js
WebStorm は、Next.js(英語) React フレームワークと統合されています。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定で Next.js のサポートプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに Next.js のサポートと入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
新しい Next.js アプリケーションを作成する
新しい Next.js アプリケーションの構築を開始するための推奨される方法は、WebStorm が npx(英語) を使用してダウンロードして実行する create-next-app パッケージです。その結果、開発環境は Next.js を使用するように事前構成されています。
もちろん、自分で create-next-app をダウンロードすることも、空の WebStorm プロジェクトを作成して Next.js をインストールすることもできます。
create-next-app で Next.js アプリケーションを生成する
ウェルカム画面で新規プロジェクトをクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、Next.js を選択します。
右側のペインで:
プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。
create-next-app リストから、npx create-next-app を選択します。
または、npm バージョン 5.1 以前の場合、ターミナル Alt+F12 で
npm install --save-dev next react react-domを実行して、create-next-appパッケージを自分でインストールします。アプリケーションを作成するときに、create-next-appパッケージが保存されているフォルダーを選択します。オプション:
JavaScript の代わりに TypeScript を使用するには、TypeScript テンプレートの使用チェックボックスを選択します。WebStorm は、アプリケーション用の .ts ファイルと tsconfig.json 構成ファイルを生成します。
作成をクリックすると、WebStorm は、必要なすべての構成ファイルを含む Next.js -specific プロジェクトを生成し、必要な依存関係をダウンロードします。WebStorm は、アプリケーションを実行またはデバッグするためのデフォルト設定で、npm スタートおよび JavaScript デバッグ構成も作成します。
空の WebStorm プロジェクトに Next.js をインストールする
この場合、ビルドパイプラインを自分で構成する必要があります。Next.js 公式サイト(英語)からプロジェクトに Next.js を追加する方法については、こちらを参照してください。
空の WebStorm プロジェクトを作成する
ウェルカム画面で新規プロジェクトをクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。
空のプロジェクトに Next.js をインストールする
Next.js を使用する空のプロジェクトを開きます。
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install --save-dev next react react-dom
既存の Next.js アプリケーションから開始する
既存の Next.js アプリケーションの開発を続けるには、それを WebStorm で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面でオープンをクリックするか、メインメニューからを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面でリポジトリのクローンをクリックします。
あるいは、メインメニューから、、を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。
npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。
または、エディターの package.json のコンテキストメニューまたはプロジェクトツールウィンドウ Alt+1 から 'npm install' の実行または実行 'yarn install' を選択します。
プロジェクトのセキュリティ
WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、WebStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
WebStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、WebStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が使用可能になることを意味します。
開かない : この場合、WebStorm はプロジェクトを開きません。
プロジェクトのセキュリティの詳細を参照してください。
Next.js アプリケーションの実行とデバッグ
WebStorm を使用すると、次の 2 つの方法でアプリケーションを実行し、デバッグセッションを開始できます。
エディターから - package.json またはターミナルから
next devコマンドをスクリプトとして実行します。その後、実行ツールウィンドウまたはターミナルでアプリケーション URL をクリックしてデバッグセッションを開始します。
エディターから実行とデバッグを開始する
Next Dev でアプリケーションを実行する
package.json の
devスクリプトの横にあるガターで
をクリックするか、ターミナル Alt+F12 で next devコマンドを実行するか、npm ツールウィンドウ () でdevタスクをダブルクリックします。
アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトの URL は http://localhost:3000 です。
このリンクをクリックすると、ブラウザーでアプリケーションが表示されます。
実行ツールウィンドウまたはターミナルからデバッグセッションを開始する
必要に応じてブレークポイントの設定。
package.json の
devスクリプトの横にあるガターで をクリックするか、ターミナル Alt+F12 で next devコマンドを実行するか、npm ツールウィンドウ () でdevタスクをダブルクリックします。アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトの URL は http://localhost:3000 です。
Ctrl+Shift を押しながらリンクをクリックします。
アプリケーションがブラウザーで開いたら、プログラムの実行をトリガーするアクション（たとえば、リンクをクリックするなど）を実行します。フォーカスはデバッグツールウィンドウが開いた状態で WebStorm に切り替わります。
通常どおりに進めます。プログラムをステップ実行し、プログラムの実行を停止および再開し、中断されたときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示するなどします。
実行 / デバッグ構成を使用して Next.js アプリケーションを実行およびデバッグする
ルート package.json に依存関係として next パッケージがリストされている単一リポジトリプロジェクトを開くと、WebStorm によって 2 つの実行 / デバッグ構成が自動的に生成されます。
npm タイプの Next.js: server-side。この構成は、開発サーバーを起動し、アプリケーションを開発モードで実行する
next devコマンドを実行します。ブラウザーでアプリケーションをデバッグするには、タイプ JavaScript デバッグの Next.js: クライアント側のデバッグを使用します。
実行 / デバッグ構成の作成
に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから npm を選択します。開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。
コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの
devスクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。
オプション:
ブラウザーでアプリケーションを開くには、次のように構成を更新します。ブラウザー / Live Edit タブで、起動後チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。
npm 実行 / デバッグ構成を使用して開発モードでアプリケーションを実行する
ツールバーの実行ウィジェットのリストから、npm タイプの実行構成を選択します。これは、自動生成された Next.js: server-side 構成、または上記のように自分で作成したカスタム構成にすることができます。
をクリックします。アプリケーションがコンパイルされ、開発サーバーの準備が完了すると、実行ツールウィンドウにアプリケーションが実行されている URL が表示されます。デフォルトの URL は http://localhost:3000 ですが、デフォルトポート
3000がすでに使用中の場合、サーバーは最も近い空きポートで起動を試みます。
アプリケーションを表示するには、このリンクをクリックしてください。
または、上記のように、 WebStorm が起動時にアプリケーションを開くようにします。
JavaScript デバッグ構成でデバッグを開始する
必要に応じてブレークポイントの設定。
アプリケーションを開発モード npm 実行 / デバッグ構成または
next devとで実行します。アプリケーションがコンパイルされ、開発サーバーの準備が完了すると、実行ツールウィンドウにアプリケーションが実行されている URL が表示されます。デフォルトの URL は http://localhost:3000 ですが、デフォルトポート
3000がすでに使用中の場合、サーバーは最も近い空きポートで起動を試みます。ツールバーの実行ウィジェットのリストから、JavaScript デバッグタイプの実行構成を選択します。これは、自動生成された Next.js: デバッグクライアント構成、または前述のように自分で作成したカスタム構成のいずれかになります。
をクリックします。アプリケーションがブラウザーで開いたら、プログラムの実行をトリガーするアクション（たとえば、リンクをクリックするなど）を実行します。フォーカスはデバッグツールウィンドウが開いた状態で WebStorm に切り替わります。
通常どおりに進めます。プログラムをステップ実行し、プログラムの実行を停止および再開し、中断されたときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示するなどします。
React アプリケーションを実行するおよび React アプリケーションをデバッグするを参照してください。
関連ページ：
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
新規プロジェクトの作成ダイアログ
このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。ロケーションフィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジ...
GitHub でホストされているプロジェクトを管理する
プロジェクトをチェックアウトする (クローン)：WebStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...
npm、pnpm、Yarn
WebStorm は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定...
プロジェクトのセキュリティ
潜在的なセキュリティリスクを防ぐために、WebStorm では、プロジェクトのソースが不明な場合にプロジェクトをどのように操作するかを決定できます。WebStorm では、実行されるタスク、File Watchers、または webpack 構成について警告し、信頼できるソースを構成できます。不明なソースからプロジェクトを開く：WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定でき...
プロジェクトを作成
WebStorm では、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCS からソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべてのパッケージと構成ですでにブートストラップされています。WebStorm はまたあらゆるプロジェクトの設定、ファイルおよびホールダーを保存し、新しいプロジェクトを作成するときテンプレートとして使用す...