Next.js용 Laravel 디버그바

Next.js용 Laravel 디버그바

Next.js를 프론트엔드로, Laravel을 백엔드로 작업하면서 쿼리를 최적화하거나 적어도 Queryfi를 생성하고 구현한 후 속도에 어떤 일이 일어나고 있는지 더 잘 이해하고 싶었습니다.

더 이상 고민하지 않아도 됩니다. Next.js용 Laravel Debugbar를 기반으로 구축된 Debugbar 통합입니다. 완벽해지려면 아직 갈 길이 멀지만, 나와 내가 현재 작업 중인 프로젝트에는 효과가 있습니다.

아직 패키지는 없지만 시간이 나면 나중에 패키지를 만들어보도록 하겠습니다.

파일이 꽤 크기 때문에 여기에는 많은 코드를 붙여넣지 않도록 노력하겠습니다. 대신 코드에 대한 GitHub Gists 링크가 있습니다(이 키워드를 따르세요). ?

---

구현

라라벨 설정

1. Laravel 프로젝트에 Debugbar를 설치합니다.

   composer require barryvdh/laravel-debugbar --dev  

1. InjectDebugBarData라는 미들웨어를 만들고 다음 코드를 추가하여 Laravel API 응답에 Debugbar 데이터를 삽입하세요.

   <?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라는 파일을 만들고 디버그 표시줄 응답을 처리하는 코드를 추가하세요.

2. 구성 요소가 shadcn으로 빌드되었으므로 shadcn이 있는지 확인하세요.

3. 디버그바 데이터를 관리하는 서비스 제공자를 생성하고 이를 추가합니다.

4. 디버그바가 표시할 구성 요소를 만들고 추가합니다.

---

디버그바 사용

디버그바 구성요소를 포함하도록 서비스 제공업체로 앱 레이아웃을 래핑하세요.

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

API 응답에서 DebugBar 공급자의 후크를 사용하세요.

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

---

최종 메모

다음 단계에 따라 Laravel 앱에 무언가를 기록하면 브라우저 콘솔에 로그가 표시됩니다. 이 구성 요소는 공식 Laravel Debugbar 패키지에서 제공하는 구성 요소와 유사하지만 더 간단합니다.

---

위 내용은 Next.js용 Laravel 디버그바의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!