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