Debugging

React Scan

Ever wondered which components are secretly re-rendering and slowing down your app? Say hello to React Scan! This awesome feature shows you component re-renders in real-time, helping you catch performance bottlenecks before they catch you.

Want to become a performance detective? Here's how to enable React Scan:

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

Just add that magical debug prop, and you're ready to hunt down those unnecessary re-renders! 🎯

Fetch Detective

Want to know exactly what's happening with your API calls? Next.js has your back with its built-in fetch cache system. Let's make it spill all the secrets by enabling fetch logging:

import type { NextConfig } from 'next';
import { vitNodeNextConfig } from 'vitnode/config/next.config';

const nextConfig: NextConfig = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

export default vitNodeNextConfig(nextConfig);

With fullUrl: true, you'll see every fetch request in its full glory! 🎉

Want to dive deeper into the fetch logging rabbit hole? Check out the official Next.js logging docs for more cool tricks!