Laravel Debugbar untuk Next.js

Laravel Debugbar untuk Next.js

Bekerja dengan Next.js sebagai bahagian hadapan dan Laravel sebagai bahagian belakang, saya ingin mengoptimumkan pertanyaan saya atau sekurang-kurangnya lebih memahami perkara yang berlaku dengan kelajuan selepas mencipta dan melaksanakan Queryfi.

Tanpa melengahkan masa lagi, inilah kami: penyepaduan Debugbar dibina di atas Laravel Debugbar untuk Next.js. Walaupun masih jauh lagi untuk menjadikannya sempurna, ia berfungsi untuk saya dan projek yang sedang saya kerjakan.

Belum ada pakej, tapi kalau ada masa, saya akan buat pakej pada masa hadapan.

Saya akan cuba untuk tidak menampal banyak kod di sini kerana failnya agak besar. Sebaliknya, terdapat pautan ke GitHub Gists untuk kod (ikut kata kunci ini). ?

---

Perlaksanaan

Persediaan Laravel

1. Pasang Debugbar dalam projek Laravel anda:

   composer require barryvdh/laravel-debugbar --dev  

1. Buat perisian tengah yang dipanggil InjectDebugBarData dan tambahkan kod berikut untuk menyuntik data Debugbar ke dalam respons API Laravel anda:

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

Gunakan perisian tengah ini pada laluan anda.

---

Next.js Persediaan

1. Buat fail bernama debugBar.ts dalam folder utiliti anda dan tambahkan kod untuk mengendalikan respons Debugbar.

2. Pastikan anda mempunyai shadcn kerana komponen dibina dengannya.

3. Buat pembekal perkhidmatan untuk mengurus data Debugbar dan tambahkan ini.

4. Buat komponen untuk Bar Debug untuk dipaparkan dan menambah ini.

---

Menggunakan Debugbar

Balut reka letak apl anda dengan pembekal perkhidmatan untuk memasukkan komponen Debugbar:

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

Dalam respons API anda, gunakan cangkuk daripada pembekal DebugBar:

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

---

Nota Akhir

Mengikut langkah ini, jika anda log sesuatu dalam apl Laravel anda, anda akan melihat log dalam konsol penyemak imbas. Komponen akan serupa tetapi lebih mudah berbanding dengan yang disediakan oleh pakej Laravel Debugbar rasmi.

---

Atas ialah kandungan terperinci Laravel Debugbar untuk Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!