Barre de débogage Laravel pour Next.js

Barre de débogage Laravel pour Next.js

En travaillant avec Next.js comme frontend et Laravel comme backend, je voulais optimiser mes requêtes ou au moins mieux comprendre ce qui se passe avec la vitesse après la création et la mise en œuvre de Queryfi.

Sans plus tard, nous l'avons ici : une intégration Debugbar construite sur Laravel Debugbar pour Next.js. Même s'il reste encore un long chemin à parcourir pour que ce soit parfait, cela fonctionne pour moi et pour le projet sur lequel je travaille actuellement.

Il n'y a pas encore de package, mais si j'ai le temps, je créerai un package dans le futur.

Je vais essayer de ne pas coller beaucoup de code ici car les fichiers sont assez gros. Au lieu de cela, il existe des liens vers GitHub Gists pour le code (suivez les mots-clés this). ?

Mise en œuvre

Configuration de Laravel

1. Installez Debugbar dans votre projet Laravel :

   composer require barryvdh/laravel-debugbar --dev  

1. Créez un middleware appelé InjectDebugBarData et ajoutez le code suivant pour injecter les données Debugbar dans vos réponses API Laravel :

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

Appliquez ce middleware à vos itinéraires.

Configuration de Next.js

1. Créez un fichier nommé debugBar.ts dans votre dossier utilitaires et ajoutez le code pour gérer les réponses de Debugbar.

2. Assurez-vous d'avoir shadcn car le composant est construit avec.

3. Créez un fournisseur de services pour gérer les données de la barre de débogage et ajoutez-le.

4. Créez un composant pour que la barre de débogage s'affiche et ajoutez-le.

Utiliser la barre de débogage

Enveloppez la mise en page de votre application avec le fournisseur de services pour inclure le composant Debugbar :

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

Dans vos réponses API, utilisez le hook du fournisseur DebugBar :

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

Notes finales

En suivant ces étapes, si vous enregistrez quelque chose dans votre application Laravel, vous verrez les journaux dans la console du navigateur. Le composant sera similaire mais plus simple par rapport à celui fourni par le package officiel Laravel Debugbar.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!