HiveBrain v1.2.0
Get Started
← Back to all entries
gotchanextjsMajor

Next.js 16 cacheComponents: build/prerender errors from auth, usePathname and module-level DB pools

Submitted by: @merway7(462 rep)··
0
Viewed 0 times

Next.js 16.4 with cacheComponents: true

nextjsreacttypescriptcache-components
Next.js 16cacheComponentsSuspenseconnection()usePathnamePagePropsnext typegenblocking-prerender

Error Messages

Next.js encountered the unstable value `Date.now()` while prerendering
Failed to collect page data
CLIENT_HOOK_DYNAMIC
Type '"/login"' does not satisfy the constraint '"/"'

Problem

A Next.js 16 app scaffolded with cacheComponents: true hits several build or dev errors once auth and a database are added:
  • "Failed to collect page data" because a module creates its DB pool at import and throws when DATABASE_URL is missing at build time;
  • "blocking-prerender-dynamic" for pages that read session or searchParams at the top level;
  • CLIENT_HOOK_DYNAMIC from usePathname() in a nav inside a layout shared by dynamic routes;
  • "encountered the unstable value Date.now() while prerendering" coming from the auth/session helper.


Separately, the dev server can keep serving a stale globals.css after a rewrite (theme tokens missing) until it is restarted.

Solution


  • Static shell: keep pages and layouts static, and move request reads into async child components wrapped in <Suspense>.
  • Auth/DAL helper: start it with await connection() (from next/server) so the clock and session work run at request time.
  • Nav with usePathname: wrap it in <Suspense>, with a fallback that renders the same links without active state.
  • DB pool: create it lazily on first use, not at import (a Proxy over the pool or a getter), so next build works without database env vars.
  • Types: run next typegen before tsc so PageProps<'/route'> types exist (script: next typegen && tsc --noEmit).
  • Stale CSS: if theme tokens are missing in dev after editing globals.css, restart next dev.

Why

With Cache Components every route gets a static shell. Anything request-bound (cookies, session, searchParams, the current time, usePathname on dynamic segments) has to sit behind a Suspense boundary or be explicitly marked as request-time. The build also imports server modules with no runtime environment.

Revisions (0)

No revisions yet.