lahmatiy / react-render-tracker

React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts
https://lahmatiy.github.io/react-render-tracker/
MIT License
2.35k stars 36 forks source link

How to integrate with NextJs 13+ #38

Open srosato opened 9 months ago

srosato commented 9 months ago

I tried adding the script using next/script within layout.tsx

import React from 'react';
import { Providers } from './providers';
import NextTopLoader from 'nextjs-toploader';
import { font } from '@ss/theme/font';
import Script from 'next/script'

export const metadata = {
  title: 'Shadow Shifts - Admin',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={font.className}>
      <Script
        src="https://cdn.jsdelivr.net/npm/react-render-tracker"
      />
      <body>
        <Providers>
          <NextTopLoader />
          {children}
        </Providers>
      </body>
    </html>
  );
}

I tried option #0 I get Waiting for a supported React renderer to be connected...

image

I tried option #1 I get Connection to rempl publisher – Awaiting...

image

I can see the script loading correctly

image

image

Also worth mentioning that I am using React 18

aldrinjenson commented 1 week ago

Yeah any updates on this? coming from nextJs 14. This approach doesn't work