Laravel Debugbar for Next.js

Laravel Debugbar for Next.js

Working with Next.js as the frontend and Laravel as the backend, I wanted to optimize my queries or at least better understand what is happening with the speed after creating and implementing Queryfi.

Without further ado, here we have it: a Debugbar integration built on top of Laravel Debugbar for Next.js. While there is still a long way to go for it to be perfect, it works for me and the project I am currently working on.

There is no package yet, but if I will have time, I will create a package in the future.

I’ll try not to paste a lot of code here since the files are pretty big. Instead, there are links to GitHub Gists for the code (follow the this keywords). 😁

---

Implementation

Laravel Setup

1. Install Debugbar in your Laravel project:

   composer require barryvdh/laravel-debugbar --dev  

1. Create a middleware called InjectDebugBarData and add the following code to inject Debugbar data into your Laravel API responses:

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

Apply this middleware to your routes.

---

Next.js Setup

1. Create a file named debugBar.ts in your utilities folder and add the code to handle Debugbar responses.

2. Make sure you have shadcn as the component is built with it.

3. Create a service provider to manage Debugbar data and add this.

4. Create a component for the Debugbar to display and add this.

---

Using the Debugbar

Wrap your app layout with the service provider to include the Debugbar component:

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

In your API responses, use the hook from the DebugBar provider:

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

---

Final Notes

Following these steps, if you log something in your Laravel app, you will see the logs in the browser console. The component will be similar but simpler compared to the one provided by the official Laravel Debugbar package.

---