PRNext 0.1.17: 開発者ツールと永続的なキャッシュ

#ページ内の開発ツール

フローティング PRNext ロゴのメニューから、コンソールと検査ツールにアクセスできます。クライアントとサーバーのメッセージは、ソースとレベルでフィルターできるビューを共有します。リクエスト、ルート、コンパイルの測定は、更新の遅さやページの失敗を調査するのに役立ちます。

携帯電話とタブレットのプレビューでは、アプリケーションに対応するビューポートの寸法が与えられます。独自のメディア クエリによってレイアウトが決定されます。表示されているセッションを再作成せずに方向を変更したり、ポインターをドラッグしてサポートされているコンテンツをスクロールしたりできます。

パネルはオンデマンドでロードされますが、メッセージのキャプチャは起動ログを保持するのに十分な早めに開始されます。インジケーターを別の隅に移動したり、コンソールとデバイスのプレビューを別のウィンドウで開いたりすることができます。

#アシスタントにコンポーネントのコンテキストを与える

[AI の要素を選択] を選択し、ページ上の要素を選択します。インスペクターはコード内のその場所を見つけて、ファイル、行、関連するコード、計算されたスタイル、およびスクリーンショットをリクエストに添付できます。アシスタントには、必要な変更を理解するのに役立つ特定のコンポーネントがあります。

ツールによって提供される MCP 構成を使用して、Codex、Cursor、Claude、または別の互換性のあるクライアントを接続します。パネルから送信されると、アシスタントが開発セッションからコンテキストを取得できるようになります。構成をコピーすると、接続が準備されます。コンテキストを交換して変更を確認するには、アクティブな接続が必要です。

変更を加えた後、アシスタントはブラウザーが実際に新しいコンパイルを表示していることを確認できます。結果によって、観察された修正と失敗したチェックまたは決定的でないチェックが区別されます。プロジェクトの権限は、この作業全体を通じて引き続き適用されます。

#開いたルートをコンパイルする

大規模なプロジェクトには、少数のページしか使用しない場合でも、多数のページが含まれる可能性があります。 PRNext は、要求されたルートをそのレイアウト、エラー コンポーネント、依存関係とともにコンパイルします。 Rust の逆インデックスは、変更されたファイルを、そのファイルに依存する開いているルートに接続します。

開いている 2 つのページがヘッダーを共有している場合、そのヘッダーを編集すると、両方のページの影響を受ける部分が再コンパイルされます。まだ開かれていないページは、最初の訪問まで待つことができます。ミドルウェア、カスタム ハンドラー、および不確実な依存関係では、依然として完全なコンパイルが使用されます。

永続的な変換では、再起動後に有効な作業を繰り返すことも避けられます。開発ビルドと運用ビルドでは個別のキャッシュが保持されます。再利用はコンテンツとコンパイル設定によって異なります。欠落しているエントリまたは無効なエントリは単純に再コンパイルされます。これらのキャッシュには、パーソナライズされたアプリケーションの応答ではなく、コンパイラの作業が保存されます。

#ページの状態を維持しながらスタイルを調整する

すでに入力したフォームの周囲の間隔、色、またはタイポグラフィを調整できます。互換性のある CSS の変更により、JavaScript を再構築したり、アプリケーション ワーカーを再起動したりせずに、新しいスタイルが公開されます。ブラウザーは、ドキュメントと React を適用している間、その状態を保持します。

各世代のスタイルシート ファイルは不変のままであるため、タブは内容が途中で変更されることなくアセットの読み込みを完了できます。 CSS モジュールのエクスポート、Sass、またはカスタム処理への変更は、より多くの依存関係に影響を及ぼし、完全なコンパイラーに戻る可能性があります。

#Rust エンジンでの作業の繰り返しが少なくなる

インデックス付き動的ルーティングと pstart プロキシにより、アプリケーション ワーカーの作業が軽減されます。 HTTP 接続が受け入れられると、小さなパケットの遅延が無効になります。永続的な接続は引き続きストリーミングをサポートし、進行中のリクエストを終了できます。

アセットは、検証された gzip ファイルと Brotli ファイルを再利用します。圧縮キャッシュ インデックスにより、ファイルがパブリッシュされるたびにディレクトリ全体を再スキャンする必要がなくなり、バンドル分析では既知の圧縮サイズを再利用できます。

独立した生産ルートを事前レンダリングすると、限られた数のワーカーが使用されます。これにより、リクエストの分離、確定的な出力、エラー ページに必要な順序が維持されながら、ページごとにプロセスを作成することなく、いくつかのルートが準備されます。

#コンパイル中に次のワーカーを準備する

次の開発作業者は、コンパイルの進行中に準備を開始できます。準備が完了すると、準備状況チェックと認証されたハンドオフが行われ、引き継がれます。前の作業者には進行中の作業を終了する時間があります。

コンパイラのリサイクルは、メモリ不足、持続的な増加、セッション制限に対応します。これは、24 コンパイルごとの自動再起動を置き換えます。早期のワーカーの準備が利用できない場合は、通常の起動パスが使用されます。

#互換性と診断

React サーバーまたはクライアント ディレクティブを運ぶ TypeScript モジュールには .ts または .tsx を使用します。サポートされていない .mts および .cts 境界は、ソース コード内およびローダーによる変換後の両方で、ビルドがアクティブ化される前に拒否されます。通常の TypeScript ヘルパーは引き続きサポートされます。

更新の問題を調査するために、prnext dev --safe は新しいコンパイラで完全なコンパイルを使用します。互換性のある高速リフレッシュを維持しながら、永続的な変換と早期のワーカーの準備を無効にします。診断では、ルートのオープン、コードの編集、構成の変更、CSS の更新など、作業のきっかけとなったものを特定します。

Next.js の互換性は部分的なままです。運用ビルドのアプリケーションに固有のページ、フォーム、サーバー アクション、および統合を確認してください。

#新しいツールを更新して試してみる

バージョン 0.1.17-alpha は npm で利用できます。 PRNext プロジェクト ディレクトリからパッケージを更新し、開発サーバーを再起動します。

npm install @thomas.f/prnext
npx --no-install prnext dev .

ターミナルに表示されているアドレスを開き、浮いている PRNext ロゴのメニューを開きます。 [クライアント コンソール] を選択してメッセージを調べたり、[ページ情報を検査] を選択したり、電話またはタブレットのプレビューを選択してレイアウトをテストしたりできます。

アシスタントを使用するには、[AI の要素を選択] を選択し、コンポーネントを選択して、クライアントの構成を開きます。提供された MCP 設定をクライアントにコピーし、開発サーバーを実行したままにして、ツールが接続を確認するまで待ちます。パネルの変更を説明し、[コンテキストを AI に送信] を選択して、その PRNext コンテキストを使用するようにアシスタントに依頼します。