Next.js
JetBrains Rider は、Next.js(英語) React フレームワークと統合されています。
始める前に
Node.js をダウンロードしてインストールします。
設定で JavaScript と TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページのマーケットプレースタブに Next.js のサポートプラグインをインストールして有効にします。
新しい Next.js アプリケーションを作成する
新しい Next.js アプリケーションの構築を開始するための推奨される方法は、JetBrains Rider が npx(英語) を使用してダウンロードして実行する create-next-app パッケージです。その結果、開発環境は Next.js を使用するように事前構成されています。
もちろん、自分で create-next-app をダウンロードすることも、空の JetBrains Rider プロジェクトを作成して 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 テンプレートの使用チェックボックスを選択します。JetBrains Rider は、アプリケーション用の .ts ファイルと tsconfig.json 構成ファイルを生成します。
作成をクリックすると、JetBrains Rider は、必要なすべての構成ファイルを含む Next.js -specific プロジェクトを生成し、必要な依存関係をダウンロードします。JetBrains Rider は、アプリケーションを実行またはデバッグするためのデフォルト設定で、npm スタートおよび JavaScript デバッグ構成も作成します。
空の JetBrains Rider プロジェクトに Next.js をインストールする
この場合、ビルドパイプラインを自分で構成する必要があります。Next.js 公式サイト(英語)からプロジェクトに Next.js を追加する方法については、こちらを参照してください。
空の JetBrains Rider プロジェクトを作成する
ウェルカム画面で新規ソリューションをクリックするか、メインメニューからを選択します。新規ソリューションダイアログが開きます。
左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。
空のプロジェクトに Next.js をインストールする
Next.js を使用する空のプロジェクトを開きます。
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install --save-dev next react react-dom
既存の Next.js アプリケーションから開始する
既存の Next.js アプリケーションの開発を続けるには、それを JetBrains Rider で開き、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面で開くをクリックするか、メインメニューからを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面で VCS から取得をクリックします。
または、メインメニューから または を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。
npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。
あるいは、エディターまたはプロジェクトツールウィンドウの package.json のコンテキストメニューから 'npm install' の実行または実行 'yarn install' を選択します。
プロジェクトのセキュリティ
JetBrains Rider の外部で作成され、そこにインポートされたプロジェクトを開くと、JetBrains Rider は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、JetBrains Rider はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
JetBrains Rider はエディター領域の上部に通知を表示し、プロジェクトを信頼…リンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、JetBrains Rider はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての JetBrains Rider 機能が使用可能になることを意味します。
開かない : この場合、JetBrains Rider はプロジェクトを開きません。
Next.js アプリケーションの実行とデバッグ
React アプリケーションを実行するおよび React アプリケーションをデバッグするを参照してください。
関連ページ：
プラグインのインストール
プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...
GitHub でホストされているプロジェクトを管理する
解決策を確認する (クローン)：貢献したいリポジトリを JetBrains Rider から直接複製し、それに基づいて新しいソリューションを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の場合は、...
npm、pnpm、Yarn
JetBrains Rider は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。JetBrains Rider では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。JetBrains Rider は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと...
React
React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイトからライブラリの詳細を参照してください。JetBrains Rider は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインス...
JavaScript のリファクタリング
リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。シンボルの移動リファクタリング：ファイルやフォルダーを移動するだけでなく、JetBrains Rider では JavaScript のトップレベルのシンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュール内のクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押...