lahmatiy/react-render-tracker

How to integrate with NextJs 13+

Opened this issue · 1 comments

srosato commented

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

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