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中文网其他相关文章！