Next.js Discord

Discord Forum

App directory struggles - error prerendering pages

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
Hey all.

I'm having alot of struggles with the new next app directory.

I have a basic project with a layout and page file under src/app

src
  app
    layout.tsx
    page.tsx

These pages are as basic as basic can be:
page.tsx
export default async function Home() {
  return (
    <main>
      <h1>hi</h1>
    </main>
  );
}

layout.tsx
import "~/styles/globals.css";

export const metadata = {
  title: "My website",
  description: "My website",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <h1>hello world</h1>;
}


This works fine. However, when I go to build my project with pnpm run build I get a mass amount of errors. I have attached these errors in this message. It does not make any sense to me and nothing online has helped figure out the problem.

These errors are saying it cannot prerender pages. NextJS [help docs](https://nextjs.org/docs/messages/prerender-error) it is happening because i have components inside of my pages folder. But, I am not using pages directory, and I have no components in this project.
Answered by Netherland Dwarf
You dont really need spread operator here
View full answer

18 Replies

Netherland Dwarf
Layout should return children
But not sure if this is the cause of that
Can you post a snippet of this error
I cant download the file
Because I am more of a cautious person so i disbaled all downloads for browsers and third party apps like discord
@Netherland Dwarf Because I am more of a cautious person so i disbaled all downloads for browsers and third party apps like discord
American black bearOP
Hello, yes sorry. The error is very very large and spans across multiple pages. But here is some of it:
te:build: Error: <Html> should not be imported outside of pages/_document.
site:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page
site:build:     at Z (C:\Users\james\OneDrive\Desktop\aiig-monorepo\node_modules\.pnpm\next@14.2.1_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\pages.runtime.prod.js:16:5430)
site:build:    Generating static pages (1/4)
...
site:build: Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
site:build:    Generating static pages (2/4)
site:build: TypeError: Cannot read properties of null (reading 'useContext')
site:build:     at t.useContext (C:\Users\james\OneDrive\Desktop\aiig-monorepo\node_modules\.pnpm\next@14.2.1_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:109363)
site:build:     at u (C:\Users\james\OneDrive\Desktop\aiig-monorepo\apps\site\.next\server\chunks\924.js:1:21416)page.runtime.dev.js:35:16908) {
site:build:   digest: '4122083699'
site:build: }
site:build: TypeError: Cannot read properties of null (reading 'useContext')

(I am not using useContext in my app)
Netherland Dwarf
Can you try
Adding the change i mention
About returning the children
In layout
Instead of the h1 tag
American black bearOP
Yes, doing this now:
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <h1>hello world</h1>
      {...children}
    </>
  );
}
Netherland Dwarf
You dont really need spread operator here
Answer
Netherland Dwarf
Dont*^
American black bearOP
yep sorry, removed it
Netherland Dwarf
But i dont think it makes a difference or maybe it does if react children isnt an object
American black bearOP
yes this has fixed the problem, no more error. Thank you!