Next.js
IntelliJ IDEA は、 Next.js(英語) React フレームワークと統合されています。
始める前に
新しい Next.js アプリケーションを作成する
新しい Next.js アプリケーションを構築するための推奨される方法は、IntelliJ IDEA が npx を使用してダウンロードおよび実行する create-next-app パッケージです。 その結果、開発環境は Next.js を使用するように事前構成されています。
もちろん、自分で create-next-app をダウンロードすることも、空の IntelliJ IDEA プロジェクトを作成して Next.js をインストールすることもできます。
create-next-app で Next.js アプリケーションを生成する
メインメニューから を選択するか、 ようこそ 画面の 新規プロジェクト ボタンをクリックします。
新規プロジェクト ダイアログで、左側のペインで React を選択します。
ウィザードの右側で、プロジェクト名と作成先のフォルダーを指定します。
プロジェクトタイプ 領域で、 Next.js を選択します。
Node runtime フィールドで、使用する 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 テンプレートの使用 チェックボックスを選択します。 IntelliJ IDEA は、アプリケーション用の .ts ファイルと tsconfig.json 構成ファイルを生成します。
作成 をクリックすると、IntelliJ IDEA は、必要なすべての構成ファイルを含む Next.js-specific プロジェクトを生成し、必要な依存関係をダウンロードします。 IntelliJ IDEA は、アプリケーションを実行またはデバッグするためのデフォルト設定で、 npm スタートおよび JavaScript デバッグ構成も作成します。
空の IntelliJ IDEA プロジェクトに Next.js をインストールする.
この場合、ビルドパイプラインを自分で構成する必要があります。 Next.js 公式サイト(英語)からプロジェクトに Next.js を追加する方法については、こちらを参照してください。
空の IntelliJ IDEA プロジェクトを作成する.
メインメニューから を選択するか、 ようこそ 画面の 新規プロジェクト ボタンをクリックします。
新規プロジェクト ダイアログで、左側のペインで 新規プロジェクト を選択します。
右側のペインで、 言語 領域の JavaScript を選択します。
新しいプロジェクトに名前を付け、必要に応じてその場所を変更してから、 作成 をクリックします。
空のプロジェクトに Next.js をインストールする
Next.js を使用する空のプロジェクトを開きます。
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install --save-dev next react react-dom
既存の Next.js アプリケーションから開始する
既存の Next.js アプリケーションの開発を続けるには、それを IntelliJ IDEA で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ようこそ 画面で 開くまたはインポート をクリックするか、メインメニューから を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ようこそ 画面で リポジトリのクローン をクリックします。
あるいは、メインメニューから 、 、 を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例： Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする (クローン) を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' の実行 または 実行 'yarn install' をクリックします。
npm(英語)、 Yarn 1(英語) 、または Yarn 2(英語) を使用できます。詳細については、 npm および Yarn を参照してください。
または、エディターの package.json のコンテキストメニューや プロジェクト ツールウィンドウ (Alt+1) から 'npm install' の実行 または 実行 'yarn install' を選択します。
プロジェクトのセキュリティ
IntelliJ IDEA の外部で作成され、そこにインポートされたプロジェクトを開くと、IntelliJ IDEA は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー: この場合、IntelliJ IDEA はプロジェクトをプレビューモードで開きます。 これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
IntelliJ IDEA はエディター領域の上部に通知を表示し、 プロジェクトを信頼する… リンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼: この場合、IntelliJ IDEA はプロジェクトを開いてロードします。 これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての IntelliJ IDEA 機能が使用可能になることを意味します。
開かない: この場合、IntelliJ IDEA はプロジェクトを開きません。
プロジェクトのセキュリティ の詳細を参照してください。
Next.js アプリケーションを実行する
アプリケーションを実行するには、 next dev コマンドをスクリプトとして起動し、 実行 ツールウィンドウまたは ターミナル でアプリケーションの URL をクリックします。
package.json から、または ターミナル で、 エディターからアプリケーションを実行する に記載のとおり、あるいは 実行/デバッグ構成を介して、 next dev コマンドをスクリプトとして起動できます。
エディターからアプリケーションを実行する
package.json の
devスクリプトの横にあるガターで
をクリックするか、 ターミナル Alt+F12 で next devコマンドを実行するか、 npm ツールウィンドウ （ ）でdevタスクをダブルクリックします。
アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。デフォルトの URL は http://localhost:3000 です。
このリンクをクリックすると、ブラウザーでアプリケーションが表示されます。
実行/デバッグ構成を介してアプリケーションを実行する
ルート package.json に依存関係として next パッケージがリストされている単一リポジトリプロジェクトを開くと、IntelliJ IDEA は、型 npm の Next.js: server-side 実行/デバッグ構成を自動的に生成します。 この構成は、開発サーバーを起動し、アプリケーションを開発モードで実行する next dev コマンドを実行します。
ツールバーの 実行 ウィジェットのリストから、 すでに npm タイプの実行構成を選択します。 これは、自動生成された Next.js: server-side 構成でも、 以下のとおり自分で作成したカスタム構成でもかまいません。
をクリックします。アプリケーションがコンパイルされ、開発サーバーの準備が完了すると、 実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。 デフォルトの URL は http://localhost:3000 ですが、デフォルトポート
3000がすでに使用中の場合、サーバーは最も近い空きポートで起動を試みます。このリンクをクリックすると、ブラウザーでアプリケーションが表示されます。
Next.js アプリケーションのクライアント側をデバッグする
IntelliJ IDEA を使用すると、次の 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 ですが、デフォルトポート
3000がすでに使用中の場合、サーバーは最も近い空きポートで起動を試みます。
Ctrl+Shift を押しながらリンクをクリックします。
アプリケーションがブラウザーで開いたら、プログラムの実行をトリガーするアクション（たとえば、リンクをクリックするなど）を実行します。 フォーカスは デバッグツールウィンドウ が開いた状態で IntelliJ IDEA に切り替わります。
通常どおり続行します： プログラムをステップ実行し、 プログラムの実行を停止して再開し、 中断時にそれを調べ 、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示します。
実行/デバッグ構成を介してデバッグを開始する
ルート package.json に依存関係として next パッケージがリストされている単一リポジトリプロジェクトを開くと、IntelliJ IDEA によって 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がすでに使用中の場合、サーバーは最も近い空きポートで起動を試みます。
アプリケーションを表示するには、このリンクをクリックしてください。
または、 上記のように、 IntelliJ IDEA が起動時にアプリケーションを開くようにします。
JavaScript デバッグ構成でデバッグを開始する
必要に応じて ブレークポイントの設定。
アプリケーションを開発モード npm 実行 / デバッグ構成または
next devとで実行します。アプリケーションがコンパイルされ、開発サーバーの準備が完了すると、 実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。 デフォルトの URL は http://localhost:3000 ですが、デフォルトポート
3000がすでに使用中の場合、サーバーは最も近い空きポートで起動を試みます。ツールバーの 実行 ウィジェットのリストから、 JavaScript デバッグ タイプの実行構成を選択します。 これは、自動生成された Next.js: デバッグクライアント 構成、または 前述のように自分で作成したカスタム構成のいずれかになります。
をクリックします。アプリケーションがブラウザーで開いたら、プログラムの実行をトリガーするアクション（たとえば、リンクをクリックするなど）を実行します。 フォーカスは デバッグツールウィンドウ が開いた状態で IntelliJ IDEA に切り替わります。
通常どおり続行します： プログラムをステップ実行し、 プログラムの実行を停止して再開し、 中断時にそれを調べ 、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示します。
React アプリケーションを実行するおよび React アプリケーションをデバッグするを参照してください。
Next.js アプリケーションのサーバー側コンポーネントをデバッグする
ルート package.json に依存関係として next パッケージがリストされている単一リポジトリプロジェクトを開くと、IntelliJ IDEA は、型 npm の Next.js: server-side 実行/デバッグ構成を自動的に生成します。 この構成は、開発サーバーを起動し、アプリケーションを開発モードで実行する next dev コマンドを実行します。
必要に応じてサーバー側コードにブレークポイントを設定します。
ツールバーの 実行 ウィジェットのリストから、 すでに npm タイプの実行構成を選択します。 これは、自動生成された Next.js: server-side 構成、または 前述のように自分で作成したカスタム構成のいずれかになります。
をクリックします。プログラムの実行をトリガーするアクション（たとえば、リンクをクリックするなど）を実行します。 フォーカスは デバッグツールウィンドウ が開いた状態で IntelliJ IDEA に切り替わります。
通常どおり続行します： プログラムをステップ実行し、 プログラムの実行を停止して再開し、 中断時にそれを調べ 、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示します。