Next.js 的 Laravel 調(diào)試欄

使用 Next.js 作為前端，Laravel 作為后端，我想優(yōu)化我的查詢，或者至少更好地了解創(chuàng)建和實現(xiàn) Queryfi 后速度的變化。

言歸正傳，我們在這里：在 Laravel Debugbar 之上為 Next.js 構(gòu)建的 Debugbar 集成。雖然距離完美還有很長的路要走，但它對我和我目前正在從事的項目很有用。

目前還沒有包，但是如果我有時間，我將來會創(chuàng)建一個包。

我會盡量不要在此處粘貼大量代碼，因為文件很大。相反，有代碼的 GitHub Gists 鏈接（遵循 this 關(guān)鍵字）。 ？

執(zhí)行

Laravel 設(shè)置

1. 在你的 Laravel 項目中安裝 Debugbar：

   composer require barryvdh/laravel-debugbar --dev  

1. 創(chuàng)建一個名為 InjectDebugBarData 的中間件并添加以下代碼以將 Debugbar 數(shù)據(jù)注入到 Laravel API 響應(yīng)中：

   <?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;  
       }  
   }  

將此中間件應(yīng)用到您的路線中。

Next.js 設(shè)置

1. 在實用程序文件夾中創(chuàng)建一個名為 debugBar.ts 的文件，并添加代碼來處理 Debugbar 響應(yīng)。

2. 確保您有 shadcn，因為組件是用它構(gòu)建的。

3. 創(chuàng)建一個服務(wù)提供者來管理 Debugbar 數(shù)據(jù)并添加它。

4. 為調(diào)試欄創(chuàng)建一個組件來顯示并添加它。

使用調(diào)試欄

使用服務(wù)提供商包裝您的應(yīng)用程序布局以包含調(diào)試欄組件：

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

在您的 API 響應(yīng)中，使用來自 DebugBar 提供程序的鉤子：

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

最后的注釋

按照這些步驟，如果您在 Laravel 應(yīng)用程序中記錄某些內(nèi)容，您將在瀏覽器控制臺中看到日志。與官方 Laravel Debugbar 包提供的組件相比，該組件類似但更簡單。

以上是Next.js 的 Laravel 調(diào)試欄的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！