Debugging
Master VitNode's powerful debugging features to squash those bugs faster!
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/core/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!