My page wont render
Unanswered
Vikhan posted this in #help-forum
VikhanOP
Hey! I generated this project using V0. I can see the page's content there, but after cloning it and serving it locally, I cannot see any content expect the footer of my page.
Here's my root layout file,
Here's the page that wont load (/event/[eventId].page.tsx):
When console logging the event, I can see all of its data.
What am I doing wrong? I can provide more code if it helps. I'm on next 15 and using turbopack
Here's my root layout file,
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const appStoreId = "";
return (
<html lang="en" className={hankenGrotesk.className}>
<head>
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
</head>
<body className="font-sans antialiased">
<I18nProvider>
<Suspense>
<SmartAppBanner appId={appStoreId} />
<header className="fixed top-0 left-0 right-0 w-full z-50 transition-all duration-300 bg-black/60 backdrop-blur-md supports-[backdrop-filter]:bg-black/50 shadow-md">
<div className="container flex h-16 items-center px-4 md:px-6 text-white">
<MainNavigation />
</div>
</header>
<div className="pt-16">{children}</div>
</Suspense>
<Toaster />
{process.env.NODE_ENV !== "production" && <TranslationDebug />}
</I18nProvider>
<footer className="bg-gray-50 border-t border-gray-200 py-12">
...
</footer>
</body>
</html>
);
}
Here's the page that wont load (/event/[eventId].page.tsx):
export default async function EventPage({ params }: EventPageProps) {
const { eventId } = await params;
const event = await getEventById(eventId);
if (!event) {
notFound();
}
// Check if user is authenticated - this would be replaced with your auth logic
const isAuthenticated = false;
return <div>HELLO</div>
When console logging the event, I can see all of its data.
What am I doing wrong? I can provide more code if it helps. I'm on next 15 and using turbopack
2 Replies
VikhanOP
My root page loads fine though
Spectacled bear
Remove these lines of code and see if its loading
const { eventId } = await params;
const event = await getEventById(eventId);
if (!event) {
notFound();
}