Next.js Discord

Discord Forum

nextjs prerender build error

Unanswered
American black bear posted this in #help-forum
Open in Discord
Avatar
American black bearOP
Hello, I'm currently using the nextjs app directory, and when running my build command for nextjs i get a build error:
dashboard:build: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
dashboard:build:    Collecting page data ...
dashboard:build:    Generating static pages (0/4) ...
dashboard:build: Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error

I don't see anything wrong with my projects structure, as seen in the image below:

I am on the latest version of next "next": "^15.0.1",. Any clue what could be causing this?

I have a valid root layout:
import "@/styles/globals.css";
import { GeistSans } from "geist/font/sans";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${GeistSans.className}`}>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <body>{children}</body>
    </html>
  );
}

and a valid (public)/page.ts:
export default async function Home() {
  return (
    <main>
      <div>
        <h1>hi</h1>
      </div>
    </main>
  );
}
Image

6 Replies

Avatar
joulev
there should be a more helpful error message above or below those log lines
Avatar
American black bearOP
Hi thank you for the response, there is some extra info, sorry. I have attached the entire error.

(public)/layout.tsx
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <TRPCReactProvider>
      <main className="flex min-h-screen flex-col xl:p-0">
        <PublicNavBar />
        {children}
        <PublicFooter />
      </main>
    </TRPCReactProvider>
  );
}

(public)/page.tsx
export default async function Home() {
  return (
    <HydrateClient>
      <div className="h-full">
        <h1>hi</h1>
      </div>
    </HydrateClient>
  );
}


root layout.tsx:
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${GeistSans.className}`}>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

I have searched my code for the <HTML> component it says in the error and i do not use it anywhere. As far as I know, my layouts are also correctly formatted, im not duplicating the themeprovider/trpcprovider, and both layouts are server rendered on the server.
Image
Avatar
joulev
is the repo open source? i need more info from this to determine the root cause of all these errors
but the useContext errors are because you can't use some of those provider components in server components. you need to do this https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
Avatar
American black bearOP
Hi, my repo isn't open source, but the issue persists in the default config of the T3 stack. https://create.t3.gg
trpc
tailwind
nextauth
prisma
postgres

When I get some time I could create a minimal reproducible example and upload it to a repo.

Also, thanks for the info about the usecontext issue, ill have a look into that 🙂
Avatar
Dwarf Crocodile
Hi, I tried T3 stack, could not reproduce, can you share your package.json and next.config.js, also check your node version once.