Latest Next.js with App Router deployed to Vercel. Homepage renders perfectly with client side components, however all other pages render nothing within <main></main>. Header, navigation, footer all render on other pages, just nothing in main.
I’ve taken all components out to display a simple div, and a console.log, and neither show on the pages other than homepage. What could I possibly be doing wrong?
Hey there @zackhitchcock. Are you able to share a link to your project by chance? If not, can you check the console in your browser to see if there are any errors?
The only error in console is about an image I use in the navbar, saying height or width is modified but not the other... Navbar shows and works just fine however. The homepage renders perfectly, and I can navigate to all my other pages; but the other pages only show the navbar and footer. Looking at the devtools, the head element is completely empty.
heres an example of /app/services/page.tsx:
import { type Metadata } from "next";
import { asText } from "@prismicio/client";
import { PrismicRichText } from "@prismicio/react";
import { PrismicNextLink } from "@prismicio/next";
import { createClient } from "@/prismicio";
import Button from "../../components/Button";
import styles from "../../styles/pageBase.module.css";
export default async function Services() {
const client = createClient();
const services = await client.getByUID("page", "services");
console.log(services);
return (
<div className={`${styles.mainBase} ${styles.fullHeightContent}`}>
<div className={`${styles.herotext}`}>
<PrismicRichText field={services.data.hero_text_bold} />
</div>
<div className={`${styles.subtext}`}>
<PrismicRichText field={services.data.hero_subtext} />
</div>
<div className={`${styles.content}`}>
<PrismicRichText field={services.data.content_section} />
</div>
<div className={styles.callToAction}>
<Button type="submit" variant="primary" size="large">
<PrismicNextLink field={services.data.call_to_action} />
</Button>
</div>
</div>
);
}
export async function generateMetadata(): Promise<Metadata> {
const client = createClient();
const services = await client.getByUID("page", "services");
return {
title: asText(services.data.title),
description: services.data.meta_description,
openGraph: {
title: services.data.meta_title ?? undefined,
images: [{ url: services.data.meta_image.url ?? "" }],
},
};
}
Ah it looks like you’re using Prismic CMS to render the pages? I wonder if Prismic isn’t returning it for some reason. Can you try adding a try/catch to get a better sense of the error? Something like this:
export default async function Services() {
const client = createClient();
try {
const services = await client.getByUID("page", "services");
return (
...
);
} catch (error) {
console.error("Error fetching Prismic data:", error);
return <div>Error loading page content</div>;
}
}
I just deployed your recommended troubleshooting step. No errors, and still no component.
Is the homepage that does show being rendered via Prismic as well or is that static?
homepage uses Prismic as well, as does nav which is rendered on all pages; so I don’t think its a Prismic issue.
I made an adjustment to test layout.tsx, and what it looks like is happening, is that in layout.tsx, {children} is not being rendered at all. Yet there aren’t any errors suggesting something would be an issue.
hmm. what does your file structure look like? Does the homepage use the same base layout? also curious, are you dynamically rendering the other routes or are they all set at build time like the /services one you shared above?
all page.tsx’s use the same base layout, yes. No routes are dynamically rendered, other than a catch all for additional Prismic pages.
file structure follows the recommended structure:
.next
.node_modules
package.json
next.config.mjs
/src
/app
/[uid]
-page.tsx
/services
-page.tsx
/contact
-page.tsx
/events
-page.tsx
/components
-Button.tsx
-Footer.tsx
-Navbar.tsx
/styles
-pageBase.module.css
-Navbar.module.css
-Footer.module.css
-Button.module.css
/slices
Yeah that looks pretty standard. Do the pages load when running locally?
Yes! Everything is perfect locally.
Another question, but is everything published within Prismic with all the fields filled out? I’m not too familiar with Prismic, but I’m wondering if they don’t render anything if not all the data is there.
Alright this narrows it down a bit (I think), especially if all the content exists and is published within Prismic. I’m wondering if these pages are static and not getting the prismic data at runtime. Curious what happens if you force the route to be dynamic via export const dynamic = 'force-dynamic'
Every page that makes use of Prismic, has content in the Prismic CMS. There are some optional fields that are currently blank, but the homepage is one example of that, and it renders fine, even with an optional field blank. Additionally, I removed all Prismic code from the other pages, to test the most basic page returning just a div, and that still did not render.
I really think the issue is with my layout.tsx file since it’s the children that isn’t rendering. But am unsure where to go next. I do have an async RootLayout at the moment, but even when I removed that logic from the layout, the issue persisted.
I did try the force-dynamic as well, no change.
are you able to share the layout file?
Also are there any errors in the build logs within Vercel?
You know what, force-dynamic worked! I mistakenly wrote force-static the first time I tried exporting a dynamic value, but dynamic works!
Thank you @neversitdull for taking the time to troubleshoot with me!
Now I can rest a bit easier, until I take on applying a better approach than needing to force dynamic.