Laravel Debugbar für Next.js

Laravel Debugbar für Next.js

Durch die Arbeit mit Next.js als Frontend und Laravel als Backend wollte ich meine Abfragen optimieren oder zumindest besser verstehen, was mit der Geschwindigkeit nach der Erstellung und Implementierung von Queryfi passiert.

Ohne weitere Umschweife haben wir es: eine Debugbar-Integration, die auf Laravel Debugbar für Next.js aufbaut. Bis es perfekt ist, ist es zwar noch ein weiter Weg, aber es funktioniert für mich und das Projekt, an dem ich gerade arbeite.

Es gibt noch kein Paket, aber wenn ich Zeit habe, werde ich in Zukunft ein Paket erstellen.

Ich versuche, hier nicht viel Code einzufügen, da die Dateien ziemlich groß sind. Stattdessen gibt es Links zu GitHub Gists für den Code (folgen Sie den Schlüsselwörtern this). ?

---

Durchführung

Laravel-Setup

1. Installieren Sie Debugbar in Ihrem Laravel-Projekt:

   composer require barryvdh/laravel-debugbar --dev  

1. Erstellen Sie eine Middleware namens InjectDebugBarData und fügen Sie den folgenden Code hinzu, um Debugbar-Daten in Ihre Laravel-API-Antworten einzufügen:

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

Wenden Sie diese Middleware auf Ihre Routen an.

---

Next.js-Setup

1. Erstellen Sie eine Datei mit dem Namen debugBar.ts in Ihrem Dienstprogrammordner und fügen Sie den Code zur Verarbeitung von Debugbar-Antworten hinzu.

2. Stellen Sie sicher, dass Sie Schatten haben, da die Komponente damit erstellt wird.

3. Erstellen Sie einen Dienstanbieter zur Verwaltung von Debugbar-Daten und fügen Sie diesen hinzu.

4. Erstellen Sie eine Komponente für die Debugbar zur Anzeige und fügen Sie diese hinzu.

---

Verwenden der Debugbar

Umschließen Sie Ihr App-Layout mit dem Dienstanbieter, um die Debugbar-Komponente einzubinden:

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

Verwenden Sie in Ihren API-Antworten den Hook des DebugBar-Anbieters:

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

---

Schlussbemerkungen

Wenn Sie diese Schritte befolgen und etwas in Ihrer Laravel-App protokollieren, werden die Protokolle in der Browserkonsole angezeigt. Die Komponente wird im Vergleich zu der im offiziellen Laravel Debugbar-Paket bereitgestellten Komponente ähnlich, aber einfacher sein.

---

Das obige ist der detaillierte Inhalt vonLaravel Debugbar für Next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!