Skip to content

Fix Next.js build: Add required HTML structure to root layout#238

Merged
hotlong merged 2 commits intocopilot/restructure-website-docsfrom
copilot/restructure-website-docs-another-one
Jan 26, 2026
Merged

Fix Next.js build: Add required HTML structure to root layout#238
hotlong merged 2 commits intocopilot/restructure-website-docsfrom
copilot/restructure-website-docs-another-one

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jan 26, 2026 •
edited
Loading

Next.js build failed with TypeScript error: root layout returned ReactNode instead of expected HTML document structure.

Changes

  • Wrapped children in <html> and <body> tags in apps/docs/app/layout.tsx

Next.js 16 requires root layouts to return complete HTML structure. The previous implementation returned children directly, which violated the framework's type constraints:

// Before
export default function RootLayout({ children }: { children: ReactNode }) {
  return children;
}

// After  
export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>{children}</body>
    </html>
  );
}

The language-specific layout in app/[lang]/layout.tsx already had proper HTML structure. Middleware continues handling locale routing unchanged.

Original prompt

拉取请求: #217

22:40:24.355 Running build in Washington, D.C., USA (East) – iad1
22:40:24.356 Build machine configuration: 4 cores, 8 GB
22:40:24.471 Cloning github.com/objectstack-ai/spec (Branch: copilot/restructure-website-docs, Commit: d8efa59)
22:40:24.987 Cloning completed: 516.000ms
22:40:25.630 Restored build cache from previous deployment (51PPwgSZs26sUUEodJrxXrqimR7n)
22:40:25.946 Warning: Detected "engines": { "node": ">=18.0.0" } in your package.json that will automatically upgrade when a new major Node.js Version is released. Learn More: https://vercel.link/node-version
22:40:25.946 Running "vercel build"
22:40:27.767 Vercel CLI 50.4.10
22:40:28.023 Warning: Detected "engines": { "node": ">=18.0.0" } in your package.json that will automatically upgrade when a new major Node.js Version is released. Learn More: https://vercel.link/node-version
22:40:28.081 Detected pnpm-lock.yaml version 9 generated by pnpm@10.x with package.json#packageManager pnpm@10.28.1
22:40:28.113 Installing dependencies...
22:40:31.118 Scope: all 19 workspace projects
22:40:31.324 ../.. | Progress: resolved 1, reused 0, downloaded 0, added 0
22:40:31.434 ../.. | +42 ++++
22:40:31.957 ../.. | Progress: resolved 42, reused 0, downloaded 42, added 42, done
22:40:33.019
22:40:33.082 Done in 2.3s using pnpm v10.28.1
22:40:33.114 Detected Next.js version: 16.1.3
22:40:33.138 Running "pnpm run build"
22:40:33.737
22:40:33.737 > @objectstack/docs@0.1.1 build /vercel/path0/apps/docs
22:40:33.737 > NEXT_PRIVATE_BUILD_WORKER=1 next build
22:40:33.737
22:40:35.542 ⚠ Invalid next.config.mjs options detected:
22:40:35.542 ⚠ Unrecognized key(s) in object: 'turbo' at "experimental"
22:40:35.542 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
22:40:36.026 [MDX] generated files in 86.67025599999988ms
22:40:36.036 ▲ Next.js 16.1.3 (Turbopack)
22:40:36.038 - Experiments (use with caution):
22:40:36.039 ? turbo (invalid experimental key)
22:40:36.040
22:40:36.041 ⚠ The "middleware" file convention is deprecated. Please use "proxy" instead. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy
22:40:36.082 Creating an optimized production build ...
22:41:12.124 ✓ Compiled successfully in 35.7s
22:41:12.124 Running TypeScript ...
22:41:16.160 Failed to compile.
22:41:16.160
22:41:16.160 Type error: Type 'typeof import("/vercel/path0/apps/docs/app/layout")' does not satisfy the constraint 'LayoutConfig<"/">'.
22:41:16.161 Types of property 'default' are incompatible.
22:41:16.161 Type '({ children }: { children: ReactNode; }) => ReactNode' is not assignable to type 'ComponentType<LayoutProps<"/">> | ((props: LayoutProps<"/">) => void | ReactNode | Promise | Promise<...>)'.
22:41:16.161 Type '({ children }: { children: ReactNode; }) => ReactNode' is not assignable to type 'FunctionComponent<LayoutProps<"/">>'.
22:41:16.161 Type 'import("/vercel/path0/node_modules/.pnpm/@types+react@19.2.8/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
22:41:16.161 Type 'ReactElement<unknown, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.
22:41:16.161 Property 'children' is missing in type 'ReactElement<unknown, string | JSXElementConstructor>' but required in type 'ReactPortal'.
22:41:16.161
22:41:16.220 Next.js build worker exited with code: 1 and signal: null
22:41:16.312  ELIFECYCLE  Command failed with exit code 1.
22:41:16.348 Error: Command "pnpm run build" exited with 1

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@vercel
Copy link
Copy Markdown

vercel bot commented Jan 26, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
spec Error Error Jan 26, 2026 2:47pm

Request Review

@hotlong
Fix Next.js build error by adding HTML structure to root layout
b523b77 
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot AI changed the title [WIP] Restructure website documentation for better clarity Fix Next.js build: Add required HTML structure to root layout Jan 26, 2026
Copilot AI requested a review from hotlong January 26, 2026 14:49
@hotlong hotlong marked this pull request as ready for review January 26, 2026 14:58
Copilot AI review requested due to automatic review settings January 26, 2026 14:58
@hotlong hotlong merged commit 371774c into copilot/restructure-website-docs Jan 26, 2026
4 of 5 checks passed
Copilot AI reviewed Jan 26, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a Next.js 16 TypeScript build error by adding the required HTML document structure (<html> and <body> tags) to the root layout. Next.js 16 requires root layouts to return a complete HTML document rather than just returning children directly.

Changes:

  • Added <html> and <body> wrapper elements to apps/docs/app/layout.tsx
  • Included suppressHydrationWarning attribute on the html tag
  • Set language attribute to "en" on the html element

apps/docs/app/layout.tsx
Comment on lines +21 to 26
return (
<html lang="en" suppressHydrationWarning>
<body>{children}</body>
</html>
);
}
Copy link

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change creates nested HTML structure, which is invalid. Both the root layout (app/layout.tsx) and the child layout (app/[lang]/layout.tsx) now have html and body tags. In Next.js App Router, only the root layout should contain these tags. The [lang]/layout.tsx should be updated to remove its html and body tags and only wrap children with the RootProvider component. This will result in nested HTML like: html > body > html > body, which browsers will not render correctly.

Suggested change
return (
<html lang="en" suppressHydrationWarning>
<body>{children}</body>
</html>
);
}
return children;
}

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@hotlong hotlong Awaiting requested review from hotlong

Assignees

@hotlong hotlong

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@hotlong