Next.js

1. ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトダイアログが開きます。

2. 左側のペインで、Next.js を選択します。

3. 右側のペインで:

   1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

   2. Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

   3. 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 パッケージが保存されているフォルダーを選択します。

   4. オプション:

      JavaScript の代わりに TypeScript を使用するには、TypeScript テンプレートの使用チェックボックスを選択します。PhpStorm は、アプリケーション用の .ts ファイルと tsconfig.json 構成ファイルを生成します。

4. 作成をクリックすると、PhpStorm は、必要なすべての構成ファイルを含む Next.js -specific プロジェクトを生成し、必要な依存関係をダウンロードします。PhpStorm は、アプリケーションを実行またはデバッグするためのデフォルト設定で、npm スタートおよび JavaScript デバッグ構成も作成します。

空の PhpStorm プロジェクトを作成する

1. ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトダイアログが開きます。

2. 左側のペインで、PHP 空プロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。

空のプロジェクトに Next.js をインストールする

1. Next.js を使用する空のプロジェクトを開きます。

2. 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

   npm install --save-dev next react react-dom

Next Dev でアプリケーションを実行する

1. package.json の dev スクリプトの横にあるガターで をクリックするか、ターミナル Alt+F12 で next dev コマンドを実行するか、npm ツールウィンドウ ( 表示 | ツールウィンドウ | npm) で dev タスクをダブルクリックします。

   

2. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

   実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトの URL は http://localhost:3000 です。

   

   このリンクをクリックすると、ブラウザーでアプリケーションが表示されます。

実行ツールウィンドウまたはターミナルからデバッグセッションを開始する

1. 必要に応じてブレークポイントの設定。

2. package.json の dev スクリプトの横にあるガターで をクリックするか、ターミナル Alt+F12 で next dev コマンドを実行するか、npm ツールウィンドウ ( 表示 | ツールウィンドウ | npm) で dev タスクをダブルクリックします。

3. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

   実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトの URL は http://localhost:3000 です。

   

   Ctrl+Shift を押しながらリンクをクリックします。

4. アプリケーションがブラウザーで開いたら、プログラムの実行をトリガーするアクション（たとえば、リンクをクリックするなど）を実行します。フォーカスはデバッグツールウィンドウが開いた状態で PhpStorm に切り替わります。

   

   通常どおりに進めます。プログラムをステップ実行し、プログラムの実行を一時停止および再開し、中断されたときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示するなどします。

実行 / デバッグ構成の作成

1. 実行 | 実行構成の編集に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。

   

   開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから npm を選択します。

2. 開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。

   コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの dev スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。

   

3. オプション:

   ブラウザーでアプリケーションを開くには、次のように構成を更新します。ブラウザー / Live Edit タブで、起動後チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。

   

npm 実行 / デバッグ構成を使用して開発モードでアプリケーションを実行する

1. ツールバーの実行ウィジェットのリストから、npm タイプの実行構成を選択します。これは、自動生成された Next.js: server-side 構成、または上記のように自分で作成したカスタム構成にすることができます。

   

   をクリックします。

2. アプリケーションがコンパイルされ、開発サーバーの準備が完了すると、実行ツールウィンドウにアプリケーションが実行されている URL が表示されます。デフォルトの URL は http://localhost:3000 ですが、デフォルトポート 3000 がすでに使用中の場合、サーバーは最も近い空きポートで起動を試みます。

   

   アプリケーションを表示するには、このリンクをクリックしてください。

   または、上記のように、 PhpStorm が起動時にアプリケーションを開くようにします。

JavaScript デバッグ構成でデバッグを開始する

1. 必要に応じてブレークポイントの設定。

2. アプリケーションを開発モード npm 実行 / デバッグ構成または next dev とで実行します。

3. アプリケーションがコンパイルされ、開発サーバーの準備が完了すると、実行ツールウィンドウにアプリケーションが実行されている URL が表示されます。デフォルトの URL は http://localhost:3000 ですが、デフォルトポート 3000 がすでに使用中の場合、サーバーは最も近い空きポートで起動を試みます。

4. ツールバーの実行ウィジェットのリストから、JavaScript デバッグタイプの実行構成を選択します。これは、自動生成された Next.js: デバッグクライアント構成、または前述のように自分で作成したカスタム構成のいずれかになります。

   

   をクリックします。

5. アプリケーションがブラウザーで開いたら、プログラムの実行をトリガーするアクション（たとえば、リンクをクリックするなど）を実行します。フォーカスはデバッグツールウィンドウが開いた状態で PhpStorm に切り替わります。

   通常どおりに進めます。プログラムをステップ実行し、プログラムの実行を一時停止および再開し、中断されたときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示するなどします。