[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Help](/c/help/9) # Next app deployed to Vercel not rendering pages other than homepage 233 views · 12 likes · 22 posts zackhitchcock (@zackhitchcock) · 2025-03-02 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? Josh Dunsterville (@neversitdull) · 2025-03-02 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? zackhitchcock (@zackhitchcock) · 2025-03-02 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. zackhitchcock (@zackhitchcock) · 2025-03-02 · ♥ 1 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 ?? "" }], }, }; } ``` Josh Dunsterville (@neversitdull) · 2025-03-02 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>; } } ``` zackhitchcock (@zackhitchcock) · 2025-03-03 I just deployed your recommended troubleshooting step. No errors, and still no component. Josh Dunsterville (@neversitdull) · 2025-03-03 Is the homepage that does show being rendered via Prismic as well or is that static? zackhitchcock (@zackhitchcock) · 2025-03-03 homepage uses Prismic as well, as does nav which is rendered on all pages; so I don't think its a Prismic issue. zackhitchcock (@zackhitchcock) · 2025-03-03 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. Josh Dunsterville (@neversitdull) · 2025-03-03 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? zackhitchcock (@zackhitchcock) · 2025-03-03 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 ``` Josh Dunsterville (@neversitdull) · 2025-03-03 Yeah that looks pretty standard. Do the pages load when running locally? zackhitchcock (@zackhitchcock) · 2025-03-03 · ♥ 1 Yes! Everything is perfect locally. Josh Dunsterville (@neversitdull) · 2025-03-03 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. Josh Dunsterville (@neversitdull) · 2025-03-03 · ♥ 1 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'` zackhitchcock (@zackhitchcock) · 2025-03-03 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. zackhitchcock (@zackhitchcock) · 2025-03-03 I did try the `force-dynamic` as well, no change. Josh Dunsterville (@neversitdull) · 2025-03-03 are you able to share the layout file? Josh Dunsterville (@neversitdull) · 2025-03-03 · ♥ 1 Also are there any errors in the build logs within Vercel? zackhitchcock (@zackhitchcock) · 2025-03-03 · ♥ 2 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. Josh Dunsterville (@neversitdull) · 2025-03-03 · ♥ 3 Oh awesome! Glad you got it working. Yeah if you can use ISR instead that would be the best route. That way you can keep the page static and only revalidate it every so often instead of on every request Anshuman Bhardwaj (@anshumanb) · 2025-03-03 · ♥ 3 Hey @neversitdull, kudos for this pair debugging thread. :raised_hands: You're a true community gem :heart: