Link to the code that reproduces this issue

https://github.com/blackdiamond6390/nextjs-16-build-bug

To Reproduce

To Reproduce

Steps:

1. Create a new Next.js 16.0.1 app with React 19
2. Create ANY client component page that uses React hooks
3. Add export const dynamic = 'force-dynamic' (workaround attempt)
4. Run npm run build
5. Build fails during static page generation

Minimal Example

app/test/page.tsx:

'use client'

export const dynamic = 'force-dynamic'

import { useState } from 'react'

export default function TestPage() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

Build Output:

✓ Compiled successfully in 9.4s
   Generating static pages (0/10) ...
Error occurred prerendering page "/test". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useState')
    at B (.next/server/chunks/ssr/_8badd5da._.js:2:9695) {
  digest: '2726912500'
}
Export encountered an error on /test/page: /test, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null

Current vs. Expected behavior

Current Behavior:

• Build FAILS with TypeError: Cannot read properties of null (reading 'useState')
• Affects ALL client component pages with React hooks
• Even with export const dynamic = 'force-dynamic'
• Even with output: 'standalone' in next.config.js
• Even with experimental.dynamicIO: true

Expected Behavior:

• Build should SUCCEED
• Client components should be skipped during static generation OR rendered dynamically
• export const dynamic = 'force-dynamic' should prevent prerendering
• Similar pages work in Next.js 15.x

Provide environment information

## Verify canary release

Tested on:
- ✅ `[email protected]` (stable) - **FAILS** ❌
- ✅ `[email protected]` (latest canary as of 2025-11-01) - **FAILS** ❌

**Both stable and canary have this bug.**


Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC
Binaries:
  Node: 22.20.0
  npm: 11.6.2
  pnpm: 10.19.0
Relevant Packages:
  next: 16.0.1
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

What I've tried (ALL FAILED):

1. ✅ Added export const dynamic = 'force-dynamic' to pages → NO EFFECT
2. ✅ Set output: 'standalone' in next.config.js → NO EFFECT
3. ✅ Added experimental.dynamicIO: true → NO EFFECT
4. ✅ Removed all React hooks from component → STILL FAILS
5. ✅ Created minimal global-error.tsx without ANY hooks → STILL FAILS
6. ✅ Added dynamic export to error.tsx → NO EFFECT

Observations:

• ✅ npm run dev works PERFECTLY (no errors)
• ❌ npm run build ALWAYS fails
• 🔄 Error randomly affects different pages on each build attempt
• 📝 Sometimes /forgot-password, sometimes /contact, sometimes /imprint
• 🎯 Even pure server components without hooks fail with "Cannot read properties of null"

Affected Components:

Client components WITH hooks (expected to fail if SSG):

• /app/contact/page.tsx - uses useSubscription() from React Query
• /app/login/page.tsx - uses useState()
• /app/register/page.tsx - uses useState()
• /app/forgot-password/page.tsx - uses useState()

Special Next.js files (unexpected failures):

• /app/error.tsx - uses NO hooks, still fails
• /app/global-error.tsx - MINIMAL component, NO hooks, still fails
• /_global-error (auto-generated) - fails with "Cannot read properties of null (reading 'useContext')"

Server components WITHOUT hooks (should NEVER fail):

• /app/imprint/page.tsx - Pure server component, NO client code, NO hooks → FAILS!

Code Example - Imprint Page (Server Component, NO HOOKS, STILL FAILS):

// app/imprint/page.tsx - Pure Server Component
import Link from 'next/link'

export default function ImprintPage() {  // Not even 'use client'!
  return (
    <div className="min-h-screen bg-spa-bg">
      <h1>Imprint</h1>
      <Link href="/">Back</Link>
    </div>
  )
}

Build Error:

Error occurred prerendering page "/imprint"
TypeError: Cannot read properties of null (reading 'useState')

This suggests the error is NOT in our code, but in Next.js's build process itself.

Configuration Files:

next.config.js:

const nextConfig = {
  output: 'standalone',
  reactStrictMode: true,
  experimental: {
    dynamicIO: true,  // Attempted fix - didn't work
  },
  typescript: {
    ignoreBuildErrors: true,
  },
}

package.json dependencies:

{
  "dependencies": {
    "next": "16.0.1",
    "react": "19.2.0",
    "react-dom": "19.2.0",
    "@tanstack/react-query": "^6.0.0"
  }
}

Workarounds Attempted:

Impact:

• 🚫 Cannot build production bundle
• 🚫 Cannot deploy to production
• ✅ Development mode works fine
• 📦 Affects ~15 pages in our application
• 🔄 Error is non-deterministic (different pages fail on different builds)

Questions:

1. Is this a known regression in Next.js 16.0.1?
2. Is there a fix in canary?
3. Should export const dynamic = 'force-dynamic' prevent prerendering completely?
4. Why do server components without ANY client code fail with "Cannot read properties of null (reading 'useState')"?

Screenshots

Build log showing the error:

   Generating static pages (0/53) ...
Error occurred prerendering page "/forgot-password"
TypeError: Cannot read properties of null (reading 'useState')
    at B (.next/server/chunks/ssr/_8badd5da._.js:2:9695) {
  digest: '2726912500'
}

TypeScript check (passes fine):

> tsc --noEmit
✓ No errors found

Dev server (works perfectly):

> next dev
✓ Ready on http://localhost:3002
✓ All pages load correctly
✓ No runtime errors

Reproduction Repository

I can create a minimal reproduction repository if needed. Please confirm if you need it.

The issue is 100% reproducible in our production application with the exact steps above.

Priority: HIGH - This completely blocks production deployments for Next.js 16 applications using Client Components with React hooks.