Next.js の Laravel デバッグバー

Next.js の Laravel デバッグバー

Next.js をフロントエンドとして、Laravel をバックエンドとして使用して、クエリを最適化するか、少なくとも Queryfi を作成して実装した後の速度で何が起こっているのかをよりよく理解したいと考えていました。

これ以上の苦労はせずに、Next.js 用の Laravel Debugbar の上に構築された Debugbar 統合を紹介します。完璧になるまでにはまだ長い道のりがありますが、私と私が現在取り組んでいるプロジェクトにとってはうまくいきました。

まだパッケージはありませんが、時間があれば将来パッケージを作成します。

ファイルがかなり大きいため、ここには多くのコードを貼り付けないようにします。代わりに、コードの GitHub Gists へのリンクがあります (this キーワードの後に​​続きます)。 ?

---

実装

Laravelのセットアップ

1. Laravel プロジェクトに Debugbar をインストールします。

   composer require barryvdh/laravel-debugbar --dev  

1. InjectDebugBarData というミドルウェアを作成し、次のコードを追加して Debugbar データを Laravel API 応答に挿入します。

   <?php  

   namespace App\Http\Middleware;  

   use Barryvdh\Debugbar\Facades\Debugbar;  
   use Closure;  

   class InjectDebugBarData  
   {  
       public function handle($request, Closure $next)  
       {  
           $response = $next($request);  

           if ($response->headers->get('Content-Type') === 'application/json' && Debugbar::isEnabled()) {  
               $debugbarData = Debugbar::getData();  

               // Decode the existing JSON response  
               $originalData = json_decode($response->getContent(), true);  

               // Update accordingly as for me `data` is a default  
               if (isset($originalData['data'])) {  
                   // Inject debugbar into the existing 'data' key  
                   $originalData['data']['debugbar'] = $debugbarData;  
               } else {  
                   // Fallback: Add debugbar separately if 'data' key doesn't exist  
                   $originalData['debugbar'] = $debugbarData;  
               }  

               // Set the modified response content  
               $response->setContent(json_encode($originalData));  
           }  

           return $response;  
       }  
   }  

このミドルウェアをルートに適用します。

---

Next.js のセットアップ

1. ユーティリティ フォルダーに debugBar.ts という名前のファイルを作成し、デバッグバーの応答を処理するコードを追加します。

2. コンポーネントは shadcn を使用してビルドされるため、shadcn があることを確認してください。

3. Debugbar データを管理するサービス プロバイダーを作成し、これを追加します。

4. デバッグバーを表示するコンポーネントを作成し、これを追加します。

---

デバッグバーの使用

アプリのレイアウトをサービス プロバイダーでラップして、Debugbar コンポーネントを含めます:

<DebugBarProvider>  
    {children}  
    <DebugBar />  
</DebugBarProvider>  

API 応答で、DebugBar プロバイダーのフックを使用します。

const { addResponse } = useDebugBar();  
addResponse(data.debugbar);  

---

最後のメモ

これらの手順に従って、Laravel アプリに何かを記録すると、ブラウザーのコンソールにログが表示されます。このコンポーネントは似ていますが、公式の Laravel Debugbar パッケージで提供されるものと比較すると単純です。

---

以上がNext.js の Laravel デバッグバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。