Next.js 的 Laravel 調試欄

Next.js 的 Laravel 調試欄

使用 Next.js 作為前端，Laravel 作為後端，我想優化我的查詢，或者至少更好地了解創建和實現 Queryfi 後速度的變化。

言歸正傳，我們在這裡：在 Laravel Debugbar 之上為 Next.js 建構的 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 的文件，並加入程式碼來處理 Debugbar 回應。

2. 確保您有 shadcn，因為組件是用它建造的。

3. 建立一個服務提供者來管理 Debugbar 資料並新增它。

4. 為偵錯欄建立一個元件來顯示並新增它。

---

使用調試欄

使用服務提供者包裝您的應用程式佈局以包含偵錯欄元件：

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

在您的 API 回應中，使用來自 DebugBar 提供者的鉤子：

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

---

最後的註釋

按照這些步驟，如果您在 Laravel 應用程式中記錄某些內容，您將在瀏覽器控制台中看到日誌。與官方 Laravel Debugbar 套件提供的組件相比，該組件類似但更簡單。

---

以上是Next.js 的 Laravel 調試欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！