To debug your issue, you can use the @vercel/analytics package which provides a debug mode. This mode will display all analytics events in the browser's console and is automatically enabled if the NODE_ENV environment variable is available and either development or test. You can manually disable it to prevent debug messages in your browsers console. Here's how you can use it:
'use client';
import { Analytics } from '@vercel/analytics/react';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<title>Next.js</title>
</head>
<body>
{children}
<Analytics debug={false} />;
</body>
</html>
);
}
(Source: Vercel Docs (https://vercel.com/docs/analytics/package))
As for the streaming issue, it's important to note that streaming is built into the Next.js App Router by default. This helps improve both the initial page loading performance, as well as UI that depends on slower data fetches that would block rendering the whole route. You can start streaming route segments using loading.js and UI components with React Suspense (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming).
Here's an example of how to use Suspense for streaming:
import { Suspense } from 'react';
import { PostFeed, Weather } from './components';
export default function Posts() {
return (
<section>
<Suspense fallback={<p>Loading feed...</p>}>
<PostFeed />
</Suspense>
<Suspense fallback={<p>Loading weather...</p>}>
<Weather />
</Suspense>
</section>
);
}
(Source: Vercel Docs (https://vercel.com/docs/frameworks/nextjs))
lapis oak
spark hazel