nukejs 0.0.10 → 0.0.12

package/README.md

@@ -23,6 +23,8 @@ npm create nuke@latest
 - [useHtml() — Head Management](#usehtml--head-management)
 - [Configuration](#configuration)
 - [Link Component & Navigation](#link-component--navigation)
+- [useRequest() — URL Params, Query & Headers](#userequest--url-params-query--headers)
+- [Error Pages](#error-pages)
 - [Building & Deploying](#building--deploying)
 
 ## Overview
@@ -81,7 +83,7 @@ export default function LikeButton({ postId }: { postId: string }) {
 ### Installation
 
 ```bash
-npm create nuke
+npm create nuke@latest
 ```
 
 ### Running the dev server
@@ -579,6 +581,286 @@ export default function SearchForm() {
 
 ---
 
+## useRequest() — URL Params, Query & Headers
+
+`useRequest()` is a universal hook that exposes the current request's URL parameters, query string, and headers to any component — **server or client, dev or production**.
+
+```tsx
+import { useRequest } from 'nukejs';
+
+const { params, query, headers, pathname, url } = useRequest();
+```
+
+| Field | Type | Description |
+|---|---|---|
+| `url` | `string` | Full URL with query string, e.g. `/blog/hello?lang=en` |
+| `pathname` | `string` | Path only, e.g. `/blog/hello` |
+| `params` | `Record<string, string \| string[]>` | Dynamic route segments |
+| `query` | `Record<string, string \| string[]>` | Query-string params (multi-value keys become arrays) |
+| `headers` | `Record<string, string>` | Request headers |
+
+### Where data comes from
+
+| Environment | Source |
+|---|---|
+| Server (SSR) | Live `IncomingMessage` — all headers including `cookie` |
+| Client (browser) | `__n_data` blob embedded in the page + `window.location` (reactive) |
+
+On the client the hook is **reactive**: it re-reads on every SPA navigation so `query`, `pathname`, and `params` stay current without a page reload.
+
+> **Security:** `headers` on the client never contains `cookie`, `authorization`, `proxy-authorization`, `set-cookie`, or `x-api-key`. These are stripped before embedding in the HTML document so credentials cannot leak into cached or logged pages.
+
+### Reading route params and query string
+
+```tsx
+// app/pages/blog/[slug].tsx
+// URL: /blog/hello-world?tab=comments
+import { useRequest } from 'nukejs';
+
+export default function BlogPost() {
+  const { params, query } = useRequest();
+  const slug = params.slug as string;
+  const tab  = (query.tab as string) ?? 'overview';
+
+  return (
+    <article>
+      <h1>{slug}</h1>
+      <p>Active tab: {tab}</p>
+    </article>
+  );
+}
+```
+
+### Catch-all routes
+
+```tsx
+// app/pages/docs/[...path].tsx
+// URL: /docs/api/hooks → path = ['api', 'hooks']
+import { useRequest } from 'nukejs';
+
+export default function Docs() {
+  const { params } = useRequest();
+  const segments = params.path as string[];
+
+  return <nav>{segments.join(' › ')}</nav>;
+}
+```
+
+### Reading headers in a server component
+
+```tsx
+// app/pages/dashboard.tsx
+import { useRequest } from 'nukejs';
+
+export default async function Dashboard() {
+  const { headers } = useRequest();
+
+  // Forward the session cookie to an internal API call
+  const data = await fetch('http://localhost:3000/api/me', {
+    headers: { cookie: headers['cookie'] ?? '' },
+  }).then(r => r.json());
+
+  return <main>{data.name}</main>;
+}
+```
+
+### Building `useI18n` on top
+
+`useRequest` is designed as a primitive for higher-level hooks. Here is a complete `useI18n` implementation that works in both server and client components:
+
+```tsx
+// app/hooks/useI18n.ts
+import { useRequest } from 'nukejs';
+
+const translations = {
+  en: { welcome: 'Welcome', signIn: 'Sign in' },
+  fr: { welcome: 'Bienvenue', signIn: 'Se connecter' },
+  de: { welcome: 'Willkommen', signIn: 'Anmelden' },
+} as const;
+type Locale = keyof typeof translations;
+
+function detectLocale(
+  query: Record<string, string | string[]>,
+  acceptLanguage = '',
+): Locale {
+  // ?lang=fr in the URL takes priority over the browser header
+  const fromQuery = query.lang as string | undefined;
+  if (fromQuery && fromQuery in translations) return fromQuery as Locale;
+
+  const fromHeader = acceptLanguage
+    .split(',')[0]?.split('-')[0]?.trim().toLowerCase();
+  if (fromHeader && fromHeader in translations) return fromHeader as Locale;
+
+  return 'en';
+}
+
+export function useI18n() {
+  const { query, headers } = useRequest();
+  const locale = detectLocale(query, headers['accept-language']);
+  return { t: translations[locale], locale };
+}
+```
+
+```tsx
+// app/pages/index.tsx
+import { useI18n } from '../hooks/useI18n';
+
+export default function Home() {
+  const { t } = useI18n();
+  return <h1>{t.welcome}</h1>;
+}
+```
+
+Changing `?lang=fr` in the URL re-renders client components automatically.
+
+---
+
+## Error Pages
+
+NukeJS supports custom error pages for **404 Not Found** and **500 Internal Server Error**. Place them directly in `app/pages/` — they are standard server components and support everything regular pages do: layouts, `useHtml()`, client components, and HMR in dev.
+
+### `_404.tsx` — Page Not Found
+
+Rendered when no route matches the requested URL.
+
+```tsx
+// app/pages/_404.tsx
+import { useHtml } from 'nukejs';
+import { Link } from 'nukejs';
+
+export default function NotFound() {
+  useHtml({ title: 'Page Not Found' });
+
+  return (
+    <main>
+      <h1>404 — Page Not Found</h1>
+      <p>The page you're looking for doesn't exist.</p>
+      <Link href="/">Go home</Link>
+    </main>
+  );
+}
+```
+
+### `_500.tsx` — Internal Server Error
+
+Rendered when a page handler throws an unhandled error. The error is passed as optional props so you can display details in development.
+
+```tsx
+// app/pages/_500.tsx
+import { useHtml } from 'nukejs';
+import { Link } from 'nukejs';
+
+interface ErrorProps {
+  errorMessage?: string; // human-readable error description
+  errorStatus?:  string; // HTTP status code if present on the thrown error
+  errorStack?:   string; // stack trace — only populated in development
+}
+
+export default function ServerError({ errorMessage, errorStack }: ErrorProps) {
+  useHtml({ title: 'Something went wrong' });
+
+  return (
+    <main>
+      <h1>500 — Server Error</h1>
+      <p>Something went wrong on our end. Please try again.</p>
+      {errorMessage && <p><strong>{errorMessage}</strong></p>}
+      {errorStack   && <pre>{errorStack}</pre>}
+      <Link href="/">Go home</Link>
+    </main>
+  );
+}
+```
+
+### Server errors
+
+Any unhandled throw inside a server page component (including async data fetching) routes to `_500.tsx`. The error message and stack trace are forwarded as props automatically.
+
+```tsx
+// app/pages/dashboard.tsx
+export default async function Dashboard() {
+  const data = await fetchData(); // throws → _500.tsx is rendered
+  return <main>{data.name}</main>;
+}
+```
+
+You can also attach a `status` property to a thrown error to control the HTTP status code sent with the response:
+
+```tsx
+export default async function Post({ id }: { id: string }) {
+  const post = await db.getPost(id);
+
+  if (!post) {
+    const err = new Error('Post not found');
+    (err as any).status = 404;
+    throw err; // _500.tsx receives errorMessage="Post not found", errorStatus="404"
+  }
+
+  return <article>{post.title}</article>;
+}
+```
+
+### Client errors
+
+Unhandled errors in client components and async code are automatically caught and routed to `_500.tsx` via an in-place SPA navigation — no full page reload. Three mechanisms cover all cases:
+
+- **React Error Boundary** — wraps every hydrated `"use client"` component; catches render and lifecycle errors
+- **`window.onerror`** — catches synchronous throws in event handlers and other non-React code
+- **`window.onunhandledrejection`** — catches unhandled `Promise` rejections from `async` functions
+
+```tsx
+// app/components/FaultyButton.tsx
+"use client";
+
+export default function FaultyButton() {
+  const handleClick = () => {
+    throw new Error('Something broke!'); // caught by window.onerror → _500.tsx
+  };
+
+  return <button onClick={handleClick}>Click me</button>;
+}
+```
+
+```tsx
+// app/components/FaultyFetch.tsx
+"use client";
+import { useEffect } from 'react';
+
+export default function FaultyFetch() {
+  useEffect(() => {
+    // Unhandled rejection caught by window.onunhandledrejection → _500.tsx
+    fetch('/api/broken').then(res => {
+      if (!res.ok) throw new Error(`API error ${res.status}`);
+    });
+  }, []);
+
+  return <div>Loading...</div>;
+}
+```
+
+The `_500.tsx` page receives `errorMessage` and `errorStack` props from client errors just like server errors, so a single error page handles both origins consistently.
+
+### Behaviour
+
+| Scenario | Without `_500.tsx` | With `_500.tsx` |
+|---|---|---|
+| Server page throws | Plain-text `Internal Server Error` (500) | `_500.tsx` rendered with error props |
+| Client component render error | React crashes the component subtree | `_500.tsx` rendered in-place, no reload |
+| Unhandled event handler throw | Browser console error only | `_500.tsx` rendered in-place, no reload |
+| Unhandled promise rejection | Browser console error only | `_500.tsx` rendered in-place, no reload |
+| Unknown URL | Plain-text `Page not found` (404) | `_404.tsx` rendered with 404 status |
+| `<Link>` to unknown URL | Full page reload | In-place SPA navigation, no reload |
+| HMR save of `_404.tsx` / `_500.tsx` | — | Current page re-fetches immediately |
+
+### Notes
+
+- Error pages are **excluded from routing** — `/_404` and `/_500` are not reachable as URLs.
+- They participate in the root `layout.tsx` like any other page.
+- Both are fully bundled into the production output (Node.js and Vercel) — no runtime file-system access required.
+- The correct HTTP status code (404 or 500) is always sent in the response.
+- `errorStack` is only populated in development (`NODE_ENV !== 'production'`).
+
+---
+
 ## Building & Deploying
 
 ### Node.js server

package/dist/Link.d.ts

@@ -1,6 +1,12 @@
-declare const Link: ({ href, children, className }: {
+interface LinkProps {
     href: string;
     children: React.ReactNode;
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}
+/**
+ * Client-side navigation link.
+ * Intercepts clicks and delegates to useRouter().push() so the SPA router
+ * handles the transition without a full page reload.
+ */
+declare const Link: ({ href, children, className }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export default Link;

package/dist/Link.js

@@ -2,10 +2,10 @@
 import { jsx } from "react/jsx-runtime";
 import useRouter from "./use-router.js";
 const Link = ({ href, children, className }) => {
-  const r = useRouter();
+  const { push } = useRouter();
   const handleClick = (e) => {
     e.preventDefault();
-    r.push(href);
+    push(href);
   };
   return /* @__PURE__ */ jsx("a", { href, onClick: handleClick, className, children });
 };
@@ -13,4 +13,3 @@ var Link_default = Link;
 export {
   Link_default as default
 };
-//# sourceMappingURL=Link.js.map

package/dist/app.js

@@ -68,7 +68,7 @@ const server = http.createServer(async (req, res) => {
       );
     if (matchApiPrefix(url, apiPrefixes))
       return await handleApiRoute(url, req, res);
-    return await serverSideRender(url, res, PAGES_DIR, isDev);
+    return await serverSideRender(url, res, PAGES_DIR, isDev, req);
   } catch (error) {
     log.error("Server error:", error);
     res.statusCode = 500;
@@ -111,4 +111,3 @@ function printStartupBanner(port, isDev2) {
 }
 const actualPort = await tryListen(PORT);
 printStartupBanner(actualPort, isDev);
-//# sourceMappingURL=app.js.map

package/dist/build-common.js

@@ -147,7 +147,8 @@ function extractDefaultExportName(filePath) {
 function collectServerPages(pagesDir) {
   if (!fs.existsSync(pagesDir)) return [];
   return walkFiles(pagesDir).filter((relPath) => {
-    if (path.basename(relPath, path.extname(relPath)) === "layout") return false;
+    const stem = path.basename(relPath, path.extname(relPath));
+    if (stem === "layout" || stem === "_404" || stem === "_500") return false;
     return isServerComponent(path.join(pagesDir, relPath));
   }).map((relPath) => ({
     ...analyzeFile(relPath, "page"),
@@ -163,6 +164,15 @@ function collectGlobalClientRegistry(serverPages, pagesDir) {
       for (const [id, p] of findClientComponentsInTree(layoutPath, pagesDir))
         registry.set(id, p);
   }
+  for (const stem of ["_404", "_500"]) {
+    const errorFile = path.join(pagesDir, `${stem}.tsx`);
+    if (!fs.existsSync(errorFile)) continue;
+    for (const [id, p] of findClientComponentsInTree(errorFile, pagesDir))
+      registry.set(id, p);
+    for (const layoutPath of findPageLayouts(errorFile, pagesDir))
+      for (const [id, p] of findClientComponentsInTree(layoutPath, pagesDir))
+        registry.set(id, p);
+  }
   return registry;
 }
 function buildPerPageRegistry(absPath, layoutPaths, pagesDir) {
@@ -179,12 +189,15 @@ function buildPerPageRegistry(absPath, layoutPaths, pagesDir) {
   }
   return { registry, clientComponentNames };
 }
-async function buildPages(pagesDir, staticDir) {
+async function buildPages(pagesDir, staticDir, outPagesDir) {
   const serverPages = collectServerPages(pagesDir);
   if (fs.existsSync(pagesDir) && walkFiles(pagesDir).length > 0 && serverPages.length === 0) {
     console.warn(`\u26A0  Pages found in ${pagesDir} but none are server components`);
   }
-  if (serverPages.length === 0) return [];
+  if (serverPages.length === 0) {
+    const errorResult2 = outPagesDir ? await buildErrorPages(pagesDir, outPagesDir, {}) : { has404: false, has500: false };
+    return { pages: [], ...errorResult2 };
+  }
   const globalRegistry = collectGlobalClientRegistry(serverPages, pagesDir);
   const prerenderedHtml = await bundleClientComponents(globalRegistry, pagesDir, staticDir);
   const prerenderedRecord = Object.fromEntries(prerenderedHtml);
@@ -200,11 +213,13 @@ async function buildPages(pagesDir, staticDir) {
       allClientIds: [...registry.keys()],
       layoutPaths,
       prerenderedHtml: prerenderedRecord,
+      routeParamNames: page.paramNames,
       catchAllNames: page.catchAllNames
     });
     builtPages.push({ ...page, bundleText });
   }
-  return builtPages;
+  const errorResult = outPagesDir ? await buildErrorPages(pagesDir, outPagesDir, prerenderedRecord) : { has404: false, has500: false };
+  return { pages: builtPages, ...errorResult };
 }
 function makeApiAdapterSource(handlerFilename) {
   return `import type { IncomingMessage, ServerResponse } from 'http';
@@ -240,8 +255,11 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
   const apiReq = req as any;
 
   apiReq.body   = await parseBody(req);
-  apiReq.query  = Object.fromEntries(new URL(req.url || '/', 'http://localhost').searchParams);
-  apiReq.params = apiReq.query;
+  // In production, route dynamic segments are injected as query-string keys by
+  // the server entry, so params and query share the same parsed URL values.
+  const qs = Object.fromEntries(new URL(req.url || '/', 'http://localhost').searchParams);
+  apiReq.query  = qs;
+  apiReq.params = qs;
 
   const fn = (mod as any)[method] ?? (mod as any).default;
   if (typeof fn !== 'function') {
@@ -260,7 +278,9 @@ function makePageAdapterSource(opts) {
     allClientIds,
     layoutArrayItems,
     prerenderedHtml,
-    catchAllNames
+    routeParamNames,
+    catchAllNames,
+    statusCode = 200
   } = opts;
   return `import type { IncomingMessage, ServerResponse } from 'http';
 import { createElement as __createElement__ } from 'react';
@@ -271,7 +291,10 @@ ${layoutImports}
 const CLIENT_COMPONENTS: Record<string, string> = ${JSON.stringify(clientComponentNames)};
 const ALL_CLIENT_IDS: string[] = ${JSON.stringify(allClientIds)};
 const PRERENDERED_HTML: Record<string, string> = ${JSON.stringify(prerenderedHtml)};
-const CATCH_ALL_NAMES = new Set(${JSON.stringify(catchAllNames)});
+// ROUTE_PARAM_NAMES: the dynamic segments baked into this page's URL pattern.
+// Used to separate them from real user-supplied query params at runtime.
+const ROUTE_PARAM_NAMES = new Set<string>(${JSON.stringify(routeParamNames)});
+const CATCH_ALL_NAMES   = new Set<string>(${JSON.stringify(catchAllNames)});
 
 // \u2500\u2500\u2500 html-store (inlined) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 type TitleValue = string | ((prev: string) => string);
@@ -302,6 +325,36 @@ function resolveTitle(ops: TitleValue[], fallback = ''): string {
   return t;
 }
 
+// \u2500\u2500\u2500 request-store (inlined) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+const SENSITIVE_HEADERS = new Set([
+  'cookie','authorization','proxy-authorization','set-cookie','x-api-key',
+]);
+// Flattens multi-value headers to strings; keeps all headers including credentials.
+function normaliseHeaders(raw: Record<string, string | string[] | undefined>): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [k, v] of Object.entries(raw)) {
+    if (v === undefined) continue;
+    out[k] = Array.isArray(v) ? v.join(', ') : v;
+  }
+  return out;
+}
+// Same as normaliseHeaders but strips credentials before embedding in HTML.
+function sanitiseHeaders(raw: Record<string, string | string[] | undefined>): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [k, v] of Object.entries(raw)) {
+    if (SENSITIVE_HEADERS.has(k.toLowerCase()) || v === undefined) continue;
+    out[k] = Array.isArray(v) ? v.join(', ') : v;
+  }
+  return out;
+}
+const __REQ_KEY__ = Symbol.for('__nukejs_request_store__');
+const __getReq = () => (globalThis as any)[__REQ_KEY__] ?? null;
+const __setReq = (v: any) => { (globalThis as any)[__REQ_KEY__] = v; };
+async function runWithRequestStore<T>(ctx: any, fn: () => Promise<T>): Promise<T> {
+  __setReq(ctx);
+  try { return await fn(); } finally { __setReq(null); }
+}
+
 // \u2500\u2500\u2500 HTML helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function escapeHtml(s: string): string {
   return String(s)
@@ -387,8 +440,8 @@ function buildWrapperAttrString(attrs: Record<string, any>): string {
 }
 
 function serializeProps(value: any): any {
+  if (typeof value === 'function') return undefined;   // must come before the object check
   if (value == null || typeof value !== 'object') return value;
-  if (typeof value === 'function') return undefined;
   if (Array.isArray(value)) return value.map(serializeProps).filter((v: any) => v !== undefined);
   if ((value as any).$$typeof) {
     const { type, props: p } = value as any;
@@ -478,19 +531,53 @@ function wrapWithLayouts(element: any): any {
 export default async function handler(req: IncomingMessage, res: ServerResponse): Promise<void> {
   try {
     const parsed = new URL(req.url || '/', 'http://localhost');
+    const url      = req.url || '/';
+    const pathname = parsed.pathname;
+
+    // Route params are injected as query-string keys by the server entry.
+    // Build 'params' only from known route segments, and 'query' from the rest.
     const params: Record<string, string | string[]> = {};
+    ROUTE_PARAM_NAMES.forEach(k => {
+      if (CATCH_ALL_NAMES.has(k)) {
+        params[k] = parsed.searchParams.getAll(k);
+      } else {
+        const v = parsed.searchParams.get(k);
+        if (v !== null) params[k] = v;
+      }
+    });
+
+    const query: Record<string, string | string[]> = {};
     parsed.searchParams.forEach((_, k) => {
-      params[k] = CATCH_ALL_NAMES.has(k)
-        ? parsed.searchParams.getAll(k)
-        : parsed.searchParams.get(k) as string;
+      if (!ROUTE_PARAM_NAMES.has(k)) {
+        const all = parsed.searchParams.getAll(k);
+        query[k] = all.length > 1 ? all : all[0];
+      }
     });
-    const url = req.url || '/';
+
+    const rawHeaders  = req.headers as Record<string, string | string[] | undefined>;
+    // Full headers (including credentials) for server components via the request store.
+    const normHeaders = normaliseHeaders(rawHeaders);
+    // Stripped headers safe for embedding in the HTML document.
+    const safeHeaders = sanitiseHeaders(rawHeaders);
 
     const hydrated = new Set<string>();
-    const wrapped  = wrapWithLayouts({ type: __page__.default, props: params as any, key: null, ref: null });
+    // Merge query params into page props to match dev behaviour (ssr.ts mergedParams).
+    // Error props (__errorMessage, __errorStack, __errorStatus) are injected by the
+    // server entry when routing to _500.mjs after a handler failure.
+    const errorProps: Record<string, string | undefined> = {};
+    const ep = parsed.searchParams;
+    if (ep.has('__errorMessage')) errorProps.errorMessage = ep.get('__errorMessage') ?? undefined;
+    if (ep.has('__errorStack'))   errorProps.errorStack   = ep.get('__errorStack')   ?? undefined;
+    if (ep.has('__errorStatus'))  errorProps.errorStatus  = ep.get('__errorStatus')  ?? undefined;
+
+    const merged = { ...query, ...params, ...errorProps } as any;
+    const wrapped  = wrapWithLayouts({ type: __page__.default, props: merged, key: null, ref: null });
 
     let appHtml = '';
-    const store = await runWithHtmlStore(async () => { appHtml = await renderNode(wrapped, hydrated); });
+    const store = await runWithRequestStore(
+      { url, pathname, params, query, headers: normHeaders },
+      () => runWithHtmlStore(async () => { appHtml = await renderNode(wrapped, hydrated); }),
+    );
 
     const pageTitle = resolveTitle(store.titleOps, 'NukeJS');
     const headScripts = store.script.filter((s: any) => (s.position ?? 'head') === 'head');
@@ -514,7 +601,8 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
     const bodyScriptsHtml = bodyScriptLines.length ? '\\n' + bodyScriptLines.join('\\n') + '\\n' : '';
 
     const runtimeData = JSON.stringify({
-      hydrateIds: [...hydrated], allIds: ALL_CLIENT_IDS, url, params, debug: 'silent',
+      hydrateIds: [...hydrated], allIds: ALL_CLIENT_IDS, url, params,
+      query, headers: safeHeaders, debug: 'silent',
     }).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026');
 
     const html = \`<!DOCTYPE html>
@@ -546,14 +634,13 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
 \${bodyScriptsHtml}</body>
 </html>\`;
 
-    res.statusCode = 200;
+    res.statusCode = ${statusCode};
     res.setHeader('Content-Type', 'text/html; charset=utf-8');
     res.end(html);
   } catch (err: any) {
-    console.error('[page render error]', err);
-    res.statusCode = 500;
-    res.setHeader('Content-Type', 'text/plain; charset=utf-8');
-    res.end('Internal Server Error');
+    // Re-throw so the server entry (build-node / build-vercel) can route to
+    // the _500 page handler. Do not swallow the error here.
+    throw err;
   }
 }
 `;
@@ -586,7 +673,9 @@ async function bundlePageHandler(opts) {
     allClientIds,
     layoutPaths,
     prerenderedHtml,
-    catchAllNames
+    routeParamNames,
+    catchAllNames,
+    statusCode
   } = opts;
   const adapterDir = path.dirname(absPath);
   const adapterPath = path.join(adapterDir, `_page_adapter_${randomBytes(4).toString("hex")}.ts`);
@@ -601,7 +690,9 @@ async function bundlePageHandler(opts) {
     allClientIds,
     layoutArrayItems: layoutPaths.map((_, i) => `__layout_${i}__`).join(", "),
     prerenderedHtml,
-    catchAllNames
+    routeParamNames,
+    catchAllNames,
+    statusCode
   }));
   let text;
   try {
@@ -673,6 +764,32 @@ async function bundleClientComponents(globalRegistry, pagesDir, staticDir) {
   console.log(`  bundled   ${globalRegistry.size} client component(s) \u2192 ${path.relative(process.cwd(), outDir)}/`);
   return prerendered;
 }
+async function buildErrorPages(pagesDir, outPagesDir, prerenderedHtml) {
+  const result = { has404: false, has500: false };
+  for (const statusCode of [404, 500]) {
+    const src = path.join(pagesDir, `_${statusCode}.tsx`);
+    if (!fs.existsSync(src)) continue;
+    console.log(`  building  _${statusCode}.tsx  \u2192  pages/_${statusCode}.mjs`);
+    const layoutPaths = findPageLayouts(src, pagesDir);
+    const { registry, clientComponentNames } = buildPerPageRegistry(src, layoutPaths, pagesDir);
+    const bundleText = await bundlePageHandler({
+      absPath: src,
+      pagesDir,
+      clientComponentNames,
+      allClientIds: [...registry.keys()],
+      layoutPaths,
+      prerenderedHtml,
+      routeParamNames: [],
+      catchAllNames: [],
+      statusCode
+    });
+    fs.mkdirSync(outPagesDir, { recursive: true });
+    fs.writeFileSync(path.join(outPagesDir, `_${statusCode}.mjs`), bundleText);
+    if (statusCode === 404) result.has404 = true;
+    if (statusCode === 500) result.has500 = true;
+  }
+  return result;
+}
 async function buildCombinedBundle(staticDir) {
   const nukeDir = path.dirname(fileURLToPath(import.meta.url));
   const bundleFile = nukeDir.endsWith("dist") ? "bundle" : "bundle.ts";
@@ -739,6 +856,7 @@ function copyPublicFiles(publicDir, destDir) {
 export {
   analyzeFile,
   buildCombinedBundle,
+  buildErrorPages,
   buildPages,
   buildPerPageRegistry,
   bundleApiHandler,
@@ -754,4 +872,3 @@ export {
   makePageAdapterSource,
   walkFiles
 };
-//# sourceMappingURL=build-common.js.map