Debugging

React Scan

In VitNode we implemented the React Scan feature that will show you re-rendering components in real-time. This feature will help you to optimize your React application.

To enable React Scan, you need to pass debug props in RootLayout component:

src/app/[locale]/layout.tsx

export default function LocaleLayout({
  children,
  ...props
}: Pick<React.ComponentProps<typeof RootLayout>, 'children' | 'params'>) {
  return (
    <RootLayout
      className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      debug
      theme={{
        defaultTheme: 'dark',
      }}
      {...props}
    >
      {children}
    </RootLayout>
  );
}

Fetching logs

Next.js has a build-in fetch cache that will cache the fetch requests. You can enable the fetch logs by passing the logging object in the next.config.ts file:

next.config.ts

import type { NextConfig } from 'next';
import { vitNodeNextConfig } from 'vitnode/config/next.config';
 
const nextConfig: NextConfig = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};
 
export default vitNodeNextConfig(nextConfig);

You can read more about it in the official documentation.

Debugging

React Scan

Fetching logs

On this page