almostnode 0.2.7 → 0.2.9

package/src/frameworks/next-dev-server.ts

@@ -8,6 +8,7 @@ import { VirtualFS } from '../virtual-fs';
 import { Buffer } from '../shims/stream';
 import { simpleHash } from '../utils/hash';
 import { loadTailwindConfig } from './tailwind-config-loader';
+import { parseNextConfigValue } from './next-config-parser';
 import {
   redirectNpmImports as _redirectNpmImports,
   stripCssImports as _stripCssImports,
@@ -15,6 +16,23 @@ import {
   transformEsmToCjsSimple,
   type CssModuleContext,
 } from './code-transforms';
+import {
+  NEXT_LINK_SHIM,
+  NEXT_ROUTER_SHIM,
+  NEXT_NAVIGATION_SHIM,
+  NEXT_HEAD_SHIM,
+  NEXT_IMAGE_SHIM,
+  NEXT_DYNAMIC_SHIM,
+  NEXT_SCRIPT_SHIM,
+  NEXT_FONT_GOOGLE_SHIM,
+  NEXT_FONT_LOCAL_SHIM,
+} from './next-shims';
+import {
+  type AppRoute,
+  generateAppRouterHtml as _generateAppRouterHtml,
+  generatePageHtml as _generatePageHtml,
+  serve404Page as _serve404Page,
+} from './next-html-generator';
 
 // Check if we're in a real browser environment (not jsdom or Node.js)
 const isBrowser = typeof window !== 'undefined' &&
@@ -91,1061 +109,6 @@ export interface NextDevServerOptions extends DevServerOptions {
   basePath?: string;
 }
 
-/** Resolved App Router route with page, layouts, and UI convention files */
-interface AppRoute {
-  page: string;
-  layouts: string[];
-  params: Record<string, string | string[]>;
-  loading?: string;
-  error?: string;
-  notFound?: string;
-}
-
-/**
- * Tailwind CSS CDN script for runtime JIT compilation
- */
-const TAILWIND_CDN_SCRIPT = `<script src="https://cdn.tailwindcss.com"></script>`;
-
-/**
- * CORS Proxy script - provides proxyFetch function in the iframe
- * Reads proxy URL from localStorage (set by parent window)
- */
-const CORS_PROXY_SCRIPT = `
-<script>
-  // CORS Proxy support for external API calls
-  window.__getCorsProxy = function() {
-    return localStorage.getItem('__corsProxyUrl') || null;
-  };
-
-  window.__setCorsProxy = function(url) {
-    if (url) {
-      localStorage.setItem('__corsProxyUrl', url);
-    } else {
-      localStorage.removeItem('__corsProxyUrl');
-    }
-  };
-
-  window.__proxyFetch = async function(url, options) {
-    const proxyUrl = window.__getCorsProxy();
-    if (proxyUrl) {
-      const proxiedUrl = proxyUrl + encodeURIComponent(url);
-      return fetch(proxiedUrl, options);
-    }
-    return fetch(url, options);
-  };
-</script>
-`;
-
-/**
- * React Refresh preamble - MUST run before React is loaded
- */
-const REACT_REFRESH_PREAMBLE = `
-<script type="module">
-// Block until React Refresh is loaded and initialized
-const RefreshRuntime = await import('https://esm.sh/react-refresh@0.14.0/runtime').then(m => m.default || m);
-
-RefreshRuntime.injectIntoGlobalHook(window);
-window.$RefreshRuntime$ = RefreshRuntime;
-window.$RefreshRegCount$ = 0;
-
-window.$RefreshReg$ = (type, id) => {
-  window.$RefreshRegCount$++;
-  RefreshRuntime.register(type, id);
-};
-
-window.$RefreshSig$ = () => (type) => type;
-
-console.log('[HMR] React Refresh initialized');
-</script>
-`;
-
-/**
- * HMR client script for Next.js
- */
-const HMR_CLIENT_SCRIPT = `
-<script type="module">
-(function() {
-  const hotModules = new Map();
-  const pendingUpdates = new Map();
-
-  window.__vite_hot_context__ = function createHotContext(ownerPath) {
-    if (hotModules.has(ownerPath)) {
-      return hotModules.get(ownerPath);
-    }
-
-    const hot = {
-      data: {},
-      accept(callback) {
-        hot._acceptCallback = callback;
-      },
-      dispose(callback) {
-        hot._disposeCallback = callback;
-      },
-      invalidate() {
-        location.reload();
-      },
-      prune(callback) {
-        hot._pruneCallback = callback;
-      },
-      on(event, cb) {},
-      off(event, cb) {},
-      send(event, data) {},
-      _acceptCallback: null,
-      _disposeCallback: null,
-      _pruneCallback: null,
-    };
-
-    hotModules.set(ownerPath, hot);
-    return hot;
-  };
-
-  // Listen for HMR updates via postMessage (works with sandboxed iframes)
-  window.addEventListener('message', async (event) => {
-    // Filter for HMR messages only
-    if (!event.data || event.data.channel !== 'next-hmr') return;
-    const { type, path, timestamp } = event.data;
-
-    if (type === 'update') {
-      console.log('[HMR] Update:', path);
-
-      if (path.endsWith('.css')) {
-        const links = document.querySelectorAll('link[rel="stylesheet"]');
-        links.forEach(link => {
-          const href = link.getAttribute('href');
-          if (href && href.includes(path.replace(/^\\//, ''))) {
-            link.href = href.split('?')[0] + '?t=' + timestamp;
-          }
-        });
-
-        const styles = document.querySelectorAll('style[data-next-dev-id]');
-        styles.forEach(style => {
-          const id = style.getAttribute('data-next-dev-id');
-          if (id && id.includes(path.replace(/^\\//, ''))) {
-            import(path + '?t=' + timestamp).catch(() => {});
-          }
-        });
-      } else if (path.match(/\\.(jsx?|tsx?)$/)) {
-        await handleJSUpdate(path, timestamp);
-      }
-    } else if (type === 'full-reload') {
-      console.log('[HMR] Full reload');
-      location.reload();
-    }
-  });
-
-  async function handleJSUpdate(path, timestamp) {
-    const normalizedPath = path.startsWith('/') ? path : '/' + path;
-    const hot = hotModules.get(normalizedPath);
-
-    try {
-      if (hot && hot._disposeCallback) {
-        hot._disposeCallback(hot.data);
-      }
-
-      if (window.$RefreshRuntime$) {
-        pendingUpdates.set(normalizedPath, timestamp);
-
-        if (pendingUpdates.size === 1) {
-          setTimeout(async () => {
-            try {
-              for (const [modulePath, ts] of pendingUpdates) {
-                const moduleUrl = '.' + modulePath + '?t=' + ts;
-                await import(moduleUrl);
-              }
-
-              window.$RefreshRuntime$.performReactRefresh();
-              console.log('[HMR] Updated', pendingUpdates.size, 'module(s)');
-
-              pendingUpdates.clear();
-            } catch (error) {
-              console.error('[HMR] Failed to apply update:', error);
-              pendingUpdates.clear();
-              location.reload();
-            }
-          }, 30);
-        }
-      } else {
-        console.log('[HMR] React Refresh not available, reloading page');
-        location.reload();
-      }
-    } catch (error) {
-      console.error('[HMR] Update failed:', error);
-      location.reload();
-    }
-  }
-
-  console.log('[HMR] Next.js client ready');
-})();
-</script>
-`;
-
-/**
- * Next.js Link shim code
- */
-const NEXT_LINK_SHIM = `
-import React from 'react';
-
-const getVirtualBasePath = () => {
-  const match = window.location.pathname.match(/^\\/__virtual__\\/\\d+(?:\\/|$)/);
-  if (!match) return '';
-  return match[0].endsWith('/') ? match[0] : match[0] + '/';
-};
-
-const getBasePath = () => window.__NEXT_BASE_PATH__ || '';
-
-const applyVirtualBase = (url) => {
-  if (typeof url !== 'string') return url;
-  if (!url || url.startsWith('#') || url.startsWith('?')) return url;
-  if (/^(https?:)?\\/\\//.test(url)) return url;
-
-  // Apply basePath first
-  const bp = getBasePath();
-  if (bp && url.startsWith('/') && !url.startsWith(bp + '/') && url !== bp) {
-    url = bp + url;
-  }
-
-  const base = getVirtualBasePath();
-  if (!base) return url;
-  if (url.startsWith(base)) return url;
-  if (url.startsWith('/')) return base + url.slice(1);
-  return base + url;
-};
-
-export default function Link({ href, children, ...props }) {
-  const handleClick = (e) => {
-    console.log('[Link] Click handler called, href:', href);
-
-    if (props.onClick) {
-      props.onClick(e);
-    }
-
-    // Allow cmd/ctrl click to open in new tab
-    if (e.metaKey || e.ctrlKey) {
-      console.log('[Link] Meta/Ctrl key pressed, allowing default behavior');
-      return;
-    }
-
-    if (typeof href !== 'string' || !href || href.startsWith('#') || href.startsWith('?')) {
-      console.log('[Link] Skipping navigation for href:', href);
-      return;
-    }
-
-    if (/^(https?:)?\\/\\//.test(href)) {
-      console.log('[Link] External URL, allowing default behavior:', href);
-      return;
-    }
-
-    e.preventDefault();
-    const resolvedHref = applyVirtualBase(href);
-    console.log('[Link] Navigating to:', resolvedHref);
-    window.history.pushState({}, '', resolvedHref);
-    window.dispatchEvent(new PopStateEvent('popstate'));
-  };
-
-  return React.createElement('a', { href, onClick: handleClick, ...props }, children);
-}
-
-export { Link };
-`;
-
-/**
- * Next.js Router shim code
- */
-const NEXT_ROUTER_SHIM = `
-import React, { useState, useEffect, createContext, useContext } from 'react';
-
-const RouterContext = createContext(null);
-
-const getVirtualBasePath = () => {
-  const match = window.location.pathname.match(/^\\/__virtual__\\/\\d+(?:\\/|$)/);
-  if (!match) return '';
-  return match[0].endsWith('/') ? match[0] : match[0] + '/';
-};
-
-const applyVirtualBase = (url) => {
-  if (typeof url !== 'string') return url;
-  if (!url || url.startsWith('#') || url.startsWith('?')) return url;
-  if (/^(https?:)?\\/\\//.test(url)) return url;
-
-  const base = getVirtualBasePath();
-  if (!base) return url;
-  if (url.startsWith(base)) return url;
-  if (url.startsWith('/')) return base + url.slice(1);
-  return base + url;
-};
-
-const stripVirtualBase = (pathname) => {
-  const match = pathname.match(/^\\/__virtual__\\/\\d+(?:\\/|$)/);
-  if (!match) return pathname;
-  return '/' + pathname.slice(match[0].length);
-};
-
-export function useRouter() {
-  const [pathname, setPathname] = useState(
-    typeof window !== 'undefined' ? stripVirtualBase(window.location.pathname) : '/'
-  );
-  const [query, setQuery] = useState({});
-
-  useEffect(() => {
-    const updateRoute = () => {
-      setPathname(stripVirtualBase(window.location.pathname));
-      setQuery(Object.fromEntries(new URLSearchParams(window.location.search)));
-    };
-
-    window.addEventListener('popstate', updateRoute);
-    updateRoute();
-
-    return () => window.removeEventListener('popstate', updateRoute);
-  }, []);
-
-  return {
-    pathname,
-    query,
-    asPath: pathname + window.location.search,
-    push: (url, as, options) => {
-      if (typeof url === 'string' && /^(https?:)?\\/\\//.test(url)) {
-        window.location.href = url;
-        return Promise.resolve(true);
-      }
-      const resolvedUrl = applyVirtualBase(url);
-      window.history.pushState({}, '', resolvedUrl);
-      window.dispatchEvent(new PopStateEvent('popstate'));
-      return Promise.resolve(true);
-    },
-    replace: (url, as, options) => {
-      if (typeof url === 'string' && /^(https?:)?\\/\\//.test(url)) {
-        window.location.href = url;
-        return Promise.resolve(true);
-      }
-      const resolvedUrl = applyVirtualBase(url);
-      window.history.replaceState({}, '', resolvedUrl);
-      window.dispatchEvent(new PopStateEvent('popstate'));
-      return Promise.resolve(true);
-    },
-    prefetch: () => Promise.resolve(),
-    back: () => window.history.back(),
-    forward: () => window.history.forward(),
-    reload: () => window.location.reload(),
-    events: {
-      on: () => {},
-      off: () => {},
-      emit: () => {},
-    },
-    isFallback: false,
-    isReady: true,
-    isPreview: false,
-  };
-}
-
-export const Router = {
-  events: {
-    on: () => {},
-    off: () => {},
-    emit: () => {},
-  },
-  push: (url) => {
-    if (typeof url === 'string' && /^(https?:)?\\/\\//.test(url)) {
-      window.location.href = url;
-      return Promise.resolve(true);
-    }
-    const resolvedUrl = applyVirtualBase(url);
-    window.history.pushState({}, '', resolvedUrl);
-    window.dispatchEvent(new PopStateEvent('popstate'));
-    return Promise.resolve(true);
-  },
-  replace: (url) => {
-    if (typeof url === 'string' && /^(https?:)?\\/\\//.test(url)) {
-      window.location.href = url;
-      return Promise.resolve(true);
-    }
-    const resolvedUrl = applyVirtualBase(url);
-    window.history.replaceState({}, '', resolvedUrl);
-    window.dispatchEvent(new PopStateEvent('popstate'));
-    return Promise.resolve(true);
-  },
-};
-
-export default { useRouter, Router };
-`;
-
-/**
- * Next.js Navigation shim code (App Router)
- *
- * This shim provides App Router-specific navigation hooks from 'next/navigation'.
- * These are DIFFERENT from the Pages Router hooks in 'next/router':
- *
- * Pages Router (next/router):
- *   - useRouter() returns { pathname, query, push, replace, events, ... }
- *   - Has router.events for route change subscriptions
- *   - query object contains URL params
- *
- * App Router (next/navigation):
- *   - useRouter() returns { push, replace, back, forward, refresh, prefetch }
- *   - usePathname() for current path
- *   - useSearchParams() for URL search params
- *   - useParams() for dynamic route segments
- *   - No events - use useEffect with pathname/searchParams instead
- *
- * @see https://nextjs.org/docs/app/api-reference/functions/use-router
- */
-const NEXT_NAVIGATION_SHIM = `
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-
-const getVirtualBasePath = () => {
-  const match = window.location.pathname.match(/^\\/__virtual__\\/\\d+(?:\\/|$)/);
-  if (!match) return '';
-  return match[0].endsWith('/') ? match[0] : match[0] + '/';
-};
-
-const applyVirtualBase = (url) => {
-  if (typeof url !== 'string') return url;
-  if (!url || url.startsWith('#') || url.startsWith('?')) return url;
-  if (/^(https?:)?\\/\\//.test(url)) return url;
-
-  const base = getVirtualBasePath();
-  if (!base) return url;
-  if (url.startsWith(base)) return url;
-  if (url.startsWith('/')) return base + url.slice(1);
-  return base + url;
-};
-
-const stripVirtualBase = (pathname) => {
-  const match = pathname.match(/^\\/__virtual__\\/\\d+(?:\\/|$)/);
-  if (!match) return pathname;
-  return '/' + pathname.slice(match[0].length);
-};
-
-/**
- * App Router's useRouter hook
- * Returns navigation methods only (no pathname, no query)
- * Use usePathname() and useSearchParams() for URL info
- */
-export function useRouter() {
-  const push = useCallback((url, options) => {
-    if (typeof url === 'string' && /^(https?:)?\\/\\//.test(url)) {
-      window.location.href = url;
-      return;
-    }
-    const resolvedUrl = applyVirtualBase(url);
-    window.history.pushState({}, '', resolvedUrl);
-    window.dispatchEvent(new PopStateEvent('popstate'));
-  }, []);
-
-  const replace = useCallback((url, options) => {
-    if (typeof url === 'string' && /^(https?:)?\\/\\//.test(url)) {
-      window.location.href = url;
-      return;
-    }
-    const resolvedUrl = applyVirtualBase(url);
-    window.history.replaceState({}, '', resolvedUrl);
-    window.dispatchEvent(new PopStateEvent('popstate'));
-  }, []);
-
-  const back = useCallback(() => window.history.back(), []);
-  const forward = useCallback(() => window.history.forward(), []);
-  const refresh = useCallback(() => window.location.reload(), []);
-  const prefetch = useCallback(() => Promise.resolve(), []);
-
-  return useMemo(() => ({
-    push,
-    replace,
-    back,
-    forward,
-    refresh,
-    prefetch,
-  }), [push, replace, back, forward, refresh, prefetch]);
-}
-
-/**
- * usePathname - Returns the current URL pathname
- * Reactively updates when navigation occurs
- * @example const pathname = usePathname(); // '/dashboard/settings'
- */
-export function usePathname() {
-  const [pathname, setPathname] = useState(
-    typeof window !== 'undefined' ? stripVirtualBase(window.location.pathname) : '/'
-  );
-
-  useEffect(() => {
-    const handler = () => setPathname(stripVirtualBase(window.location.pathname));
-    window.addEventListener('popstate', handler);
-    return () => window.removeEventListener('popstate', handler);
-  }, []);
-
-  return pathname;
-}
-
-/**
- * useSearchParams - Returns the current URL search parameters
- * @example const searchParams = useSearchParams();
- *          const query = searchParams.get('q'); // '?q=hello' -> 'hello'
- */
-export function useSearchParams() {
-  const [searchParams, setSearchParams] = useState(() => {
-    if (typeof window === 'undefined') return new URLSearchParams();
-    return new URLSearchParams(window.location.search);
-  });
-
-  useEffect(() => {
-    const handler = () => {
-      setSearchParams(new URLSearchParams(window.location.search));
-    };
-    window.addEventListener('popstate', handler);
-    return () => window.removeEventListener('popstate', handler);
-  }, []);
-
-  return searchParams;
-}
-
-/**
- * useParams - Returns dynamic route parameters
- * For route /users/[id]/page.jsx with URL /users/123:
- * @example const { id } = useParams(); // { id: '123' }
- *
- * Fetches params from the server's route-info endpoint for dynamic routes.
- */
-export function useParams() {
-  const [params, setParams] = useState(() => {
-    // Check if initial params were embedded by the server
-    if (typeof window !== 'undefined' && window.__NEXT_ROUTE_PARAMS__) {
-      return window.__NEXT_ROUTE_PARAMS__;
-    }
-    return {};
-  });
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const fetchParams = async () => {
-      const pathname = stripVirtualBase(window.location.pathname);
-      const base = getVirtualBasePath();
-      const baseUrl = base ? base.replace(/\\/$/, '') : '';
-
-      try {
-        const response = await fetch(baseUrl + '/_next/route-info?pathname=' + encodeURIComponent(pathname));
-        const info = await response.json();
-        if (!cancelled && info.params) {
-          setParams(info.params);
-        }
-      } catch (e) {
-        // Silently fail - static routes won't have params
-      }
-    };
-
-    fetchParams();
-
-    const handler = () => fetchParams();
-    window.addEventListener('popstate', handler);
-    return () => {
-      cancelled = true;
-      window.removeEventListener('popstate', handler);
-    };
-  }, []);
-
-  return params;
-}
-
-/**
- * useSelectedLayoutSegment - Returns the active child segment one level below
- * Useful for styling active nav items in layouts
- * @example For /dashboard/settings, returns 'settings' in dashboard layout
- */
-export function useSelectedLayoutSegment() {
-  const pathname = usePathname();
-  const segments = pathname.split('/').filter(Boolean);
-  return segments[0] || null;
-}
-
-/**
- * useSelectedLayoutSegments - Returns all active child segments
- * @example For /dashboard/settings/profile, returns ['dashboard', 'settings', 'profile']
- */
-export function useSelectedLayoutSegments() {
-  const pathname = usePathname();
-  return pathname.split('/').filter(Boolean);
-}
-
-/**
- * redirect - Programmatic redirect (typically used in Server Components)
- * In this browser implementation, performs immediate navigation
- */
-export function redirect(url) {
-  if (typeof url === 'string' && /^(https?:)?\\/\\//.test(url)) {
-    window.location.href = url;
-    return;
-  }
-  window.location.href = applyVirtualBase(url);
-}
-
-/**
- * notFound - Trigger the not-found UI
- * In this browser implementation, throws an error
- */
-export function notFound() {
-  throw new Error('NEXT_NOT_FOUND');
-}
-
-// Re-export Link for convenience (can import from next/navigation or next/link)
-export { default as Link } from 'next/link';
-`;
-
-/**
- * Next.js Head shim code
- */
-const NEXT_HEAD_SHIM = `
-import React, { useEffect } from 'react';
-
-export default function Head({ children }) {
-  useEffect(() => {
-    // Process children and update document.head
-    React.Children.forEach(children, (child) => {
-      if (!React.isValidElement(child)) return;
-
-      const { type, props } = child;
-
-      if (type === 'title' && props.children) {
-        document.title = Array.isArray(props.children)
-          ? props.children.join('')
-          : props.children;
-      } else if (type === 'meta') {
-        const existingMeta = props.name
-          ? document.querySelector(\`meta[name="\${props.name}"]\`)
-          : props.property
-            ? document.querySelector(\`meta[property="\${props.property}"]\`)
-            : null;
-
-        if (existingMeta) {
-          Object.keys(props).forEach(key => {
-            existingMeta.setAttribute(key, props[key]);
-          });
-        } else {
-          const meta = document.createElement('meta');
-          Object.keys(props).forEach(key => {
-            meta.setAttribute(key, props[key]);
-          });
-          document.head.appendChild(meta);
-        }
-      } else if (type === 'link') {
-        const link = document.createElement('link');
-        Object.keys(props).forEach(key => {
-          link.setAttribute(key, props[key]);
-        });
-        document.head.appendChild(link);
-      }
-    });
-  }, [children]);
-
-  return null;
-}
-`;
-
-/**
- * Next.js Image shim code
- * Provides a simple img-based implementation of next/image
- */
-const NEXT_IMAGE_SHIM = `
-import React from 'react';
-
-function Image({
-  src,
-  alt = '',
-  width,
-  height,
-  fill,
-  loader,
-  quality = 75,
-  priority,
-  loading,
-  placeholder,
-  blurDataURL,
-  unoptimized,
-  onLoad,
-  onError,
-  style,
-  className,
-  sizes,
-  ...rest
-}) {
-  // Handle src - could be string or StaticImageData object
-  const imageSrc = typeof src === 'object' ? src.src : src;
-
-  // Build style object
-  const imgStyle = { ...style };
-  if (fill) {
-    imgStyle.position = 'absolute';
-    imgStyle.width = '100%';
-    imgStyle.height = '100%';
-    imgStyle.objectFit = imgStyle.objectFit || 'cover';
-    imgStyle.inset = '0';
-  }
-
-  return React.createElement('img', {
-    src: imageSrc,
-    alt,
-    width: fill ? undefined : width,
-    height: fill ? undefined : height,
-    loading: priority ? 'eager' : (loading || 'lazy'),
-    decoding: 'async',
-    style: imgStyle,
-    className,
-    onLoad,
-    onError,
-    ...rest
-  });
-}
-
-export default Image;
-export { Image };
-`;
-
-/**
- * next/dynamic shim - Dynamic imports with loading states
- */
-const NEXT_DYNAMIC_SHIM = `
-import React from 'react';
-
-function dynamic(importFn, options = {}) {
-  const {
-    loading: LoadingComponent,
-    ssr = true,
-  } = options;
-
-  // Create a lazy component
-  const LazyComponent = React.lazy(importFn);
-
-  // Wrapper component that handles loading state
-  function DynamicComponent(props) {
-    const fallback = LoadingComponent
-      ? React.createElement(LoadingComponent, { isLoading: true })
-      : null;
-
-    return React.createElement(
-      React.Suspense,
-      { fallback },
-      React.createElement(LazyComponent, props)
-    );
-  }
-
-  return DynamicComponent;
-}
-
-export default dynamic;
-export { dynamic };
-`;
-
-/**
- * next/script shim - Loads external scripts
- */
-const NEXT_SCRIPT_SHIM = `
-import React from 'react';
-
-function Script({
-  src,
-  strategy = 'afterInteractive',
-  onLoad,
-  onReady,
-  onError,
-  children,
-  dangerouslySetInnerHTML,
-  ...rest
-}) {
-  React.useEffect(function() {
-    if (!src && !children && !dangerouslySetInnerHTML) return;
-
-    var script = document.createElement('script');
-
-    if (src) {
-      script.src = src;
-      script.async = strategy !== 'beforeInteractive';
-    }
-
-    Object.keys(rest).forEach(function(key) {
-      script.setAttribute(key, rest[key]);
-    });
-
-    if (children) {
-      script.textContent = children;
-    } else if (dangerouslySetInnerHTML && dangerouslySetInnerHTML.__html) {
-      script.textContent = dangerouslySetInnerHTML.__html;
-    }
-
-    script.onload = function() {
-      if (onLoad) onLoad();
-      if (onReady) onReady();
-    };
-    script.onerror = onError;
-
-    document.head.appendChild(script);
-
-    return function() {
-      if (script.parentNode) {
-        script.parentNode.removeChild(script);
-      }
-    };
-  }, [src]);
-
-  return null;
-}
-
-export default Script;
-export { Script };
-`;
-
-/**
- * next/font/google shim - Loads Google Fonts via CDN
- * Uses a Proxy to dynamically handle ANY Google Font without hardcoding
- */
-const NEXT_FONT_GOOGLE_SHIM = `
-// Track loaded fonts to avoid duplicate style injections
-const loadedFonts = new Set();
-
-/**
- * Convert font function name to Google Fonts family name
- * Examples:
- *   DM_Sans -> DM Sans
- *   Open_Sans -> Open Sans
- *   Fraunces -> Fraunces
- */
-function toFontFamily(fontName) {
-  return fontName.replace(/_/g, ' ');
-}
-
-/**
- * Inject font CSS into document
- * - Adds preconnect links for faster font loading
- * - Loads the font from Google Fonts CDN
- * - Creates a CSS class that sets the CSS variable
- */
-function injectFontCSS(fontFamily, variableName, weight, style) {
-  const fontKey = fontFamily + '-' + (variableName || 'default');
-  if (loadedFonts.has(fontKey)) {
-    return;
-  }
-  loadedFonts.add(fontKey);
-
-  if (typeof document === 'undefined') {
-    return;
-  }
-
-  // Add preconnect links for faster loading (only once)
-  if (!document.querySelector('link[href="https://fonts.googleapis.com"]')) {
-    const preconnect1 = document.createElement('link');
-    preconnect1.rel = 'preconnect';
-    preconnect1.href = 'https://fonts.googleapis.com';
-    document.head.appendChild(preconnect1);
-
-    const preconnect2 = document.createElement('link');
-    preconnect2.rel = 'preconnect';
-    preconnect2.href = 'https://fonts.gstatic.com';
-    preconnect2.crossOrigin = 'anonymous';
-    document.head.appendChild(preconnect2);
-  }
-
-  // Build Google Fonts URL
-  const escapedFamily = fontFamily.replace(/ /g, '+');
-
-  // Build axis list based on options
-  let axisList = '';
-  const axes = [];
-
-  // Handle italic style
-  if (style === 'italic') {
-    axes.push('ital');
-  }
-
-  // Handle weight - use specific weight or variable range
-  if (weight && weight !== '400' && !Array.isArray(weight)) {
-    // Specific weight requested
-    axes.push('wght');
-    if (style === 'italic') {
-      axisList = ':ital,wght@1,' + weight;
-    } else {
-      axisList = ':wght@' + weight;
-    }
-  } else if (Array.isArray(weight)) {
-    // Multiple weights
-    axes.push('wght');
-    axisList = ':wght@' + weight.join(';');
-  } else {
-    // Default: request common weights for flexibility
-    axisList = ':wght@400;500;600;700';
-  }
-
-  const fontUrl = 'https://fonts.googleapis.com/css2?family=' +
-    escapedFamily + axisList + '&display=swap';
-
-  // Add link element for Google Fonts (if not already present)
-  if (!document.querySelector('link[href*="family=' + escapedFamily + '"]')) {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = fontUrl;
-    document.head.appendChild(link);
-  }
-
-  // Create style element for CSS variable at :root level (globally available)
-  // This makes the variable work without needing to apply the class to body
-  if (variableName) {
-    const styleEl = document.createElement('style');
-    styleEl.setAttribute('data-font-var', variableName);
-    styleEl.textContent = ':root { ' + variableName + ': "' + fontFamily + '", ' + (fontFamily.includes('Serif') ? 'serif' : 'sans-serif') + '; }';
-    document.head.appendChild(styleEl);
-  }
-}
-
-/**
- * Create a font loader function for a specific font
- */
-function createFontLoader(fontName) {
-  const fontFamily = toFontFamily(fontName);
-
-  return function(options = {}) {
-    const {
-      weight,
-      style = 'normal',
-      subsets = ['latin'],
-      variable,
-      display = 'swap',
-      preload = true,
-      fallback = ['sans-serif'],
-      adjustFontFallback = true
-    } = options;
-
-    // Inject the font CSS
-    injectFontCSS(fontFamily, variable, weight, style);
-
-    // Generate class name from variable (--font-inter -> __font-inter)
-    const className = variable
-      ? variable.replace('--', '__')
-      : '__font-' + fontName.toLowerCase().replace(/_/g, '-');
-
-    return {
-      className,
-      variable: className,
-      style: {
-        fontFamily: '"' + fontFamily + '", ' + fallback.join(', ')
-      }
-    };
-  };
-}
-
-/**
- * Use a Proxy to dynamically create font loaders for ANY font name
- * This allows: import { AnyGoogleFont } from "next/font/google"
- */
-const fontProxy = new Proxy({}, {
-  get(target, prop) {
-    // Handle special properties
-    if (prop === '__esModule') return true;
-    if (prop === 'default') return fontProxy;
-    if (typeof prop !== 'string') return undefined;
-
-    // Create a font loader for this font name
-    return createFontLoader(prop);
-  }
-});
-
-// Export the proxy as both default and named exports
-export default fontProxy;
-
-// Re-export through proxy for named imports
-export const {
-  Fraunces, Inter, DM_Sans, DM_Serif_Text, Roboto, Open_Sans, Lato,
-  Montserrat, Poppins, Playfair_Display, Merriweather, Raleway, Nunito,
-  Ubuntu, Oswald, Quicksand, Work_Sans, Fira_Sans, Barlow, Mulish, Rubik,
-  Noto_Sans, Manrope, Space_Grotesk, Geist, Geist_Mono
-} = fontProxy;
-`;
-
-/**
- * next/font/local shim - Loads local font files
- * Accepts font source path and creates @font-face declaration + CSS variable
- */
-const NEXT_FONT_LOCAL_SHIM = `
-const loadedLocalFonts = new Set();
-
-function localFont(options = {}) {
-  const {
-    src,
-    weight,
-    style = 'normal',
-    variable,
-    display = 'swap',
-    fallback = ['sans-serif'],
-    declarations = [],
-    adjustFontFallback = true
-  } = options;
-
-  // Determine font family name from variable or src
-  const familyName = variable
-    ? variable.replace('--', '').replace(/-/g, ' ')
-    : 'local-font-' + Math.random().toString(36).slice(2, 8);
-
-  const fontKey = familyName + '-' + (variable || 'default');
-  if (typeof document !== 'undefined' && !loadedLocalFonts.has(fontKey)) {
-    loadedLocalFonts.add(fontKey);
-
-    // Build @font-face declarations
-    let fontFaces = '';
-
-    if (typeof src === 'string') {
-      // Single source
-      fontFaces = '@font-face {\\n' +
-        '  font-family: "' + familyName + '";\\n' +
-        '  src: url("' + src + '");\\n' +
-        '  font-weight: ' + (weight || '400') + ';\\n' +
-        '  font-style: ' + style + ';\\n' +
-        '  font-display: ' + display + ';\\n' +
-        '}';
-    } else if (Array.isArray(src)) {
-      // Multiple sources (different weights/styles)
-      fontFaces = src.map(function(s) {
-        const path = typeof s === 'string' ? s : s.path;
-        const w = (typeof s === 'object' && s.weight) || weight || '400';
-        const st = (typeof s === 'object' && s.style) || style;
-        return '@font-face {\\n' +
-          '  font-family: "' + familyName + '";\\n' +
-          '  src: url("' + path + '");\\n' +
-          '  font-weight: ' + w + ';\\n' +
-          '  font-style: ' + st + ';\\n' +
-          '  font-display: ' + display + ';\\n' +
-          '}';
-      }).join('\\n');
-    }
-
-    // Inject font-face CSS
-    if (fontFaces) {
-      var styleEl = document.createElement('style');
-      styleEl.setAttribute('data-local-font', fontKey);
-      styleEl.textContent = fontFaces;
-      document.head.appendChild(styleEl);
-    }
-
-    // Inject CSS variable at :root level
-    if (variable) {
-      var varStyle = document.createElement('style');
-      varStyle.setAttribute('data-font-var', variable);
-      varStyle.textContent = ':root { ' + variable + ': "' + familyName + '", ' + fallback.join(', ') + '; }';
-      document.head.appendChild(varStyle);
-    }
-  }
-
-  const className = variable
-    ? variable.replace('--', '__')
-    : '__font-' + familyName.toLowerCase().replace(/\\s+/g, '-');
-
-  return {
-    className,
-    variable: className,
-    style: {
-      fontFamily: '"' + familyName + '", ' + fallback.join(', ')
-    }
-  };
-}
-
-export default localFont;
-export { localFont };
-`;
-
 /**
  * NextDevServer - A lightweight Next.js-compatible development server
  *
@@ -1270,82 +233,45 @@ export class NextDevServer extends DevServer {
   }
 
   /**
-   * Load assetPrefix from options or auto-detect from next.config.ts/js
-   * The assetPrefix is used to prefix static asset URLs (e.g., '/marketing')
+   * Load a string config value from options or auto-detect from next.config.ts/js
    */
-  private loadAssetPrefix(optionValue?: string): void {
-    // If explicitly provided in options, use it
+  private loadConfigStringValue(key: string, optionValue?: string): string {
     if (optionValue !== undefined) {
-      // Normalize: ensure it starts with / and doesn't end with /
-      this.assetPrefix = optionValue.startsWith('/') ? optionValue : `/${optionValue}`;
-      if (this.assetPrefix.endsWith('/')) {
-        this.assetPrefix = this.assetPrefix.slice(0, -1);
-      }
-      return;
+      let val = optionValue.startsWith('/') ? optionValue : `/${optionValue}`;
+      if (val.endsWith('/')) val = val.slice(0, -1);
+      return val;
     }
 
-    // Try to auto-detect from next.config.ts or next.config.js
     try {
-      const configFiles = ['/next.config.ts', '/next.config.js', '/next.config.mjs'];
-
-      for (const configPath of configFiles) {
-        if (!this.vfs.existsSync(configPath)) {
-          continue;
-        }
-
-        const content = this.vfs.readFileSync(configPath, 'utf-8');
-
-        // Extract assetPrefix from config using regex
-        // Matches: assetPrefix: "/marketing" or assetPrefix: '/marketing'
-        const match = content.match(/assetPrefix\s*:\s*["']([^"']+)["']/);
-        if (match) {
-          let prefix = match[1];
-          // Normalize: ensure it starts with / and doesn't end with /
-          if (!prefix.startsWith('/')) {
-            prefix = `/${prefix}`;
-          }
-          if (prefix.endsWith('/')) {
-            prefix = prefix.slice(0, -1);
-          }
-          this.assetPrefix = prefix;
-          return;
+      const configFiles: { path: string; isTs: boolean }[] = [
+        { path: '/next.config.ts', isTs: true },
+        { path: '/next.config.js', isTs: false },
+        { path: '/next.config.mjs', isTs: false },
+      ];
+
+      for (const { path, isTs } of configFiles) {
+        if (!this.vfs.existsSync(path)) continue;
+        const content = this.vfs.readFileSync(path, 'utf-8');
+        const value = parseNextConfigValue(content, key, isTs);
+        if (value) {
+          let normalized = value.startsWith('/') ? value : `/${value}`;
+          if (normalized.endsWith('/')) normalized = normalized.slice(0, -1);
+          return normalized;
         }
       }
-    } catch (e) {
+    } catch {
       // Silently ignore config parse errors
     }
+
+    return '';
   }
 
-  /**
-   * Load basePath from options or auto-detect from next.config.ts/js
-   * The basePath is used to prefix all routes (e.g., '/docs' means / -> /docs)
-   */
-  private loadBasePath(optionValue?: string): void {
-    if (optionValue !== undefined) {
-      this.basePath = optionValue.startsWith('/') ? optionValue : `/${optionValue}`;
-      if (this.basePath.endsWith('/')) {
-        this.basePath = this.basePath.slice(0, -1);
-      }
-      return;
-    }
+  private loadAssetPrefix(optionValue?: string): void {
+    this.assetPrefix = this.loadConfigStringValue('assetPrefix', optionValue);
+  }
 
-    try {
-      const configFiles = ['/next.config.ts', '/next.config.js', '/next.config.mjs'];
-      for (const configPath of configFiles) {
-        if (!this.vfs.existsSync(configPath)) continue;
-        const content = this.vfs.readFileSync(configPath, 'utf-8');
-        const match = content.match(/basePath\s*:\s*["']([^"']+)["']/);
-        if (match) {
-          let bp = match[1];
-          if (!bp.startsWith('/')) bp = `/${bp}`;
-          if (bp.endsWith('/')) bp = bp.slice(0, -1);
-          this.basePath = bp;
-          return;
-        }
-      }
-    } catch {
-      // Silently ignore config parse errors
-    }
+  private loadBasePath(optionValue?: string): void {
+    this.basePath = this.loadConfigStringValue('basePath', optionValue);
   }
 
   /**
@@ -1731,12 +657,18 @@ export class NextDevServer extends DevServer {
    * Maps /_next/app/app/about/page.js → /app/about/page.tsx (transformed)
    */
   private async serveAppComponent(pathname: string): Promise<ResponseData> {
-    // Extract the file path from /_next/app/app/about/page.js → /app/about/page
-    const filePath = pathname
-      .replace('/_next/app', '')
-      .replace(/\.js$/, '');
+    // Extract the file path from /_next/app prefix
+    const rawFilePath = pathname.replace('/_next/app', '');
+
+    // First, try the path as-is (handles imports with explicit extensions like .tsx/.ts)
+    if (this.exists(rawFilePath) && !this.isDirectory(rawFilePath)) {
+      return this.transformAndServe(rawFilePath, rawFilePath);
+    }
+
+    // Strip .js extension and try different extensions
+    // e.g. /_next/app/app/about/page.js → /app/about/page → /app/about/page.tsx
+    const filePath = rawFilePath.replace(/\.js$/, '');
 
-    // Try different extensions
     const extensions = ['.tsx', '.jsx', '.ts', '.js'];
     for (const ext of extensions) {
       const fullPath = filePath + ext;
@@ -2775,6 +1707,18 @@ export class NextDevServer extends DevServer {
     return tryPath(this.appDir, segments, layouts, {});
   }
 
+  /**
+   * Build context object for HTML generation functions
+   */
+  private htmlContext() {
+    return {
+      port: this.port,
+      exists: (path: string) => this.exists(path),
+      generateEnvScript: () => this.generateEnvScript(),
+      loadTailwindConfigIfNeeded: () => this.loadTailwindConfigIfNeeded(),
+    };
+  }
+
   /**
    * Generate HTML for App Router with nested layouts
    */
@@ -2782,394 +1726,9 @@ export class NextDevServer extends DevServer {
     route: AppRoute,
     pathname: string
   ): Promise<string> {
-    // Use virtual server prefix for all file imports so the service worker can intercept them
-    const virtualPrefix = `/__virtual__/${this.port}`;
-
-    // Check for global CSS files
-    const globalCssLinks: string[] = [];
-    const cssLocations = ['/app/globals.css', '/styles/globals.css', '/styles/global.css'];
-    for (const cssPath of cssLocations) {
-      if (this.exists(cssPath)) {
-        globalCssLinks.push(`<link rel="stylesheet" href="${virtualPrefix}${cssPath}">`);
-      }
-    }
-
-    // Build the nested component structure
-    // Layouts wrap the page from outside in
-    const pageModulePath = virtualPrefix + route.page; // route.page already starts with /
-    const layoutImports = route.layouts
-      .map((layout, i) => `import Layout${i} from '${virtualPrefix}${layout}';`)
-      .join('\n    ');
-
-    // Build convention file paths for the inline script
-    const loadingModulePath = route.loading ? `${virtualPrefix}${route.loading}` : '';
-    const errorModulePath = route.error ? `${virtualPrefix}${route.error}` : '';
-    const notFoundModulePath = route.notFound ? `${virtualPrefix}${route.notFound}` : '';
-
-    // Build nested JSX: Layout0 > Layout1 > ... > Page
-    let nestedJsx = 'React.createElement(Page)';
-    for (let i = route.layouts.length - 1; i >= 0; i--) {
-      nestedJsx = `React.createElement(Layout${i}, null, ${nestedJsx})`;
-    }
-
-    // Generate env script for NEXT_PUBLIC_* variables
-    const envScript = this.generateEnvScript();
-
-    // Load Tailwind config if available (must be injected BEFORE CDN script)
-    const tailwindConfigScript = await this.loadTailwindConfigIfNeeded();
-
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <base href="${virtualPrefix}/">
-  <title>Next.js App</title>
-  ${envScript}
-  ${TAILWIND_CDN_SCRIPT}
-  ${tailwindConfigScript}
-  ${CORS_PROXY_SCRIPT}
-  ${globalCssLinks.join('\n  ')}
-  ${REACT_REFRESH_PREAMBLE}
-  <script type="importmap">
-  {
-    "imports": {
-      "react": "https://esm.sh/react@18.2.0?dev",
-      "react/": "https://esm.sh/react@18.2.0&dev/",
-      "react-dom": "https://esm.sh/react-dom@18.2.0?dev",
-      "react-dom/": "https://esm.sh/react-dom@18.2.0&dev/",
-      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
-      "convex/react": "https://esm.sh/convex@1.21.0/react?external=react",
-      "convex/server": "https://esm.sh/convex@1.21.0/server",
-      "convex/values": "https://esm.sh/convex@1.21.0/values",
-      "convex/_generated/api": "${virtualPrefix}/convex/_generated/api.ts",
-      "ai": "https://esm.sh/ai@4?external=react",
-      "ai/react": "https://esm.sh/ai@4/react?external=react",
-      "@ai-sdk/openai": "https://esm.sh/@ai-sdk/openai@1",
-      "next/link": "${virtualPrefix}/_next/shims/link.js",
-      "next/router": "${virtualPrefix}/_next/shims/router.js",
-      "next/head": "${virtualPrefix}/_next/shims/head.js",
-      "next/navigation": "${virtualPrefix}/_next/shims/navigation.js",
-      "next/image": "${virtualPrefix}/_next/shims/image.js",
-      "next/dynamic": "${virtualPrefix}/_next/shims/dynamic.js",
-      "next/script": "${virtualPrefix}/_next/shims/script.js",
-      "next/font/google": "${virtualPrefix}/_next/shims/font/google.js",
-      "next/font/local": "${virtualPrefix}/_next/shims/font/local.js"
-    }
+    return _generateAppRouterHtml(this.htmlContext(), route, pathname);
   }
-  </script>
-  ${HMR_CLIENT_SCRIPT}
-</head>
-<body>
-  <div id="__next"></div>
-  <script type="module">
-    import React from 'react';
-    import ReactDOM from 'react-dom/client';
-
-    const virtualBase = '${virtualPrefix}';
-
-    // Initial route params (embedded by server for initial page load)
-    const initialRouteParams = ${JSON.stringify(route.params)};
-    const initialPathname = '${pathname}';
-
-    // Expose initial params for useParams() hook
-    window.__NEXT_ROUTE_PARAMS__ = initialRouteParams;
-
-    // Convention file paths (loading.tsx, error.tsx, not-found.tsx)
-    const loadingModulePath = '${loadingModulePath}';
-    const errorModulePath = '${errorModulePath}';
-    const notFoundModulePath = '${notFoundModulePath}';
-
-    // Route params cache for client-side navigation
-    const routeParamsCache = new Map();
-    routeParamsCache.set(initialPathname, initialRouteParams);
-
-    // Extract route params from server for client-side navigation
-    async function extractRouteParams(pathname) {
-      // Strip virtual base if present
-      let route = pathname;
-      if (route.startsWith(virtualBase)) {
-        route = route.slice(virtualBase.length);
-      }
-      route = route.replace(/^\\/+/, '/') || '/';
-
-      // Check cache first
-      if (routeParamsCache.has(route)) {
-        return routeParamsCache.get(route);
-      }
-
-      try {
-        const response = await fetch(virtualBase + '/_next/route-info?pathname=' + encodeURIComponent(route));
-        const info = await response.json();
-        routeParamsCache.set(route, info.params || {});
-        return info.params || {};
-      } catch (e) {
-        console.error('[Router] Failed to extract route params:', e);
-        return {};
-      }
-    }
-
-    // Convert URL path to app router page module path
-    function getAppPageModulePath(pathname) {
-      let route = pathname;
-      if (route.startsWith(virtualBase)) {
-        route = route.slice(virtualBase.length);
-      }
-      route = route.replace(/^\\/+/, '/') || '/';
-      // App Router: / -> /app/page, /about -> /app/about/page
-      const pagePath = route === '/' ? '/app/page' : '/app' + route + '/page';
-      return virtualBase + '/_next/app' + pagePath + '.js';
-    }
 
-    // Get layout paths for a route
-    function getLayoutPaths(pathname) {
-      let route = pathname;
-      if (route.startsWith(virtualBase)) {
-        route = route.slice(virtualBase.length);
-      }
-      route = route.replace(/^\\/+/, '/') || '/';
-
-      // Build layout paths from root to current route
-      const layouts = [virtualBase + '/_next/app/app/layout.js'];
-      if (route !== '/') {
-        const segments = route.split('/').filter(Boolean);
-        let currentPath = '/app';
-        for (const segment of segments) {
-          currentPath += '/' + segment;
-          layouts.push(virtualBase + '/_next/app' + currentPath + '/layout.js');
-        }
-      }
-      return layouts;
-    }
-
-    // Dynamic page loader
-    async function loadPage(pathname) {
-      const modulePath = getAppPageModulePath(pathname);
-      try {
-        const module = await import(/* @vite-ignore */ modulePath);
-        return module.default;
-      } catch (e) {
-        console.error('[Navigation] Failed to load page:', modulePath, e);
-        return null;
-      }
-    }
-
-    // Load layouts (with caching)
-    const layoutCache = new Map();
-    async function loadLayouts(pathname) {
-      const layoutPaths = getLayoutPaths(pathname);
-      const layouts = [];
-      for (const path of layoutPaths) {
-        if (layoutCache.has(path)) {
-          layouts.push(layoutCache.get(path));
-        } else {
-          try {
-            const module = await import(/* @vite-ignore */ path);
-            layoutCache.set(path, module.default);
-            layouts.push(module.default);
-          } catch (e) {
-            // Layout might not exist for this segment, skip
-          }
-        }
-      }
-      return layouts;
-    }
-
-    // Load convention components (loading.tsx, error.tsx)
-    let LoadingComponent = null;
-    let ErrorComponent = null;
-    let NotFoundComponent = null;
-
-    async function loadConventionComponents() {
-      if (loadingModulePath) {
-        try {
-          const mod = await import(/* @vite-ignore */ loadingModulePath);
-          LoadingComponent = mod.default;
-        } catch (e) { /* loading.tsx not available */ }
-      }
-      if (errorModulePath) {
-        try {
-          const mod = await import(/* @vite-ignore */ errorModulePath);
-          ErrorComponent = mod.default;
-        } catch (e) { /* error.tsx not available */ }
-      }
-      if (notFoundModulePath) {
-        try {
-          const mod = await import(/* @vite-ignore */ notFoundModulePath);
-          NotFoundComponent = mod.default;
-        } catch (e) { /* not-found.tsx not available */ }
-      }
-    }
-    await loadConventionComponents();
-
-    // Error boundary class component
-    class ErrorBoundary extends React.Component {
-      constructor(props) {
-        super(props);
-        this.state = { error: null };
-      }
-      static getDerivedStateFromError(error) {
-        return { error };
-      }
-      componentDidCatch(error, info) {
-        console.error('[ErrorBoundary]', error, info);
-      }
-      render() {
-        if (this.state.error) {
-          if (this.props.fallback) {
-            return React.createElement(this.props.fallback, {
-              error: this.state.error,
-              reset: () => this.setState({ error: null })
-            });
-          }
-          return React.createElement('div', { style: { color: 'red', padding: '20px' } },
-            'Error: ' + this.state.error.message
-          );
-        }
-        return this.props.children;
-      }
-    }
-
-    // Wrapper for async Server Components
-    function AsyncComponent({ component: Component, pathname, search }) {
-      const [content, setContent] = React.useState(null);
-      const [error, setError] = React.useState(null);
-      const [isNotFound, setIsNotFound] = React.useState(false);
-
-      React.useEffect(() => {
-        let cancelled = false;
-        async function render() {
-          try {
-            // Create searchParams as a Promise (Next.js 15 pattern)
-            const url = new URL(window.location.href);
-            const searchParamsObj = Object.fromEntries(url.searchParams);
-            const searchParams = Promise.resolve(searchParamsObj);
-
-            // Extract route params from pathname (fetches from server for dynamic routes)
-            const routeParams = await extractRouteParams(pathname);
-            const params = Promise.resolve(routeParams);
-
-            // Call component with props like Next.js does for page components
-            const result = Component({ searchParams, params });
-            if (result && typeof result.then === 'function') {
-              // It's a Promise (async component)
-              const resolved = await result;
-              if (!cancelled) setContent(resolved);
-            } else {
-              // Synchronous component - result is already JSX
-              if (!cancelled) setContent(result);
-            }
-          } catch (e) {
-            if (e && e.message === 'NEXT_NOT_FOUND') {
-              if (!cancelled) setIsNotFound(true);
-            } else {
-              console.error('[AsyncComponent] Error rendering:', e);
-              if (!cancelled) setError(e);
-            }
-          }
-        }
-        render();
-        return () => { cancelled = true; };
-      }, [Component, pathname, search]);
-
-      if (isNotFound && NotFoundComponent) {
-        return React.createElement(NotFoundComponent);
-      }
-      if (isNotFound) {
-        return React.createElement('div', { style: { padding: '20px', textAlign: 'center' } },
-          React.createElement('h2', null, '404'),
-          React.createElement('p', null, 'This page could not be found.')
-        );
-      }
-      if (error) {
-        if (ErrorComponent) {
-          return React.createElement(ErrorComponent, {
-            error: error,
-            reset: () => setError(null)
-          });
-        }
-        return React.createElement('div', { style: { color: 'red', padding: '20px' } },
-          'Error: ' + error.message
-        );
-      }
-      if (!content) {
-        if (LoadingComponent) {
-          return React.createElement(LoadingComponent);
-        }
-        return React.createElement('div', { style: { padding: '20px' } }, 'Loading...');
-      }
-      return content;
-    }
-
-    // Router component
-    function Router() {
-      const [Page, setPage] = React.useState(null);
-      const [layouts, setLayouts] = React.useState([]);
-      const [path, setPath] = React.useState(window.location.pathname);
-      const [search, setSearch] = React.useState(window.location.search);
-
-      React.useEffect(() => {
-        Promise.all([loadPage(path), loadLayouts(path)]).then(([P, L]) => {
-          if (P) setPage(() => P);
-          setLayouts(L);
-        });
-      }, []);
-
-      React.useEffect(() => {
-        const handleNavigation = async () => {
-          const newPath = window.location.pathname;
-          const newSearch = window.location.search;
-          console.log('[Router] handleNavigation called, newPath:', newPath, 'current path:', path);
-
-          // Always update search params
-          if (newSearch !== search) {
-            setSearch(newSearch);
-          }
-
-          if (newPath !== path) {
-            console.log('[Router] Path changed, loading new page...');
-            setPath(newPath);
-            const [P, L, routeParams] = await Promise.all([loadPage(newPath), loadLayouts(newPath), extractRouteParams(newPath)]);
-            window.__NEXT_ROUTE_PARAMS__ = routeParams;
-            console.log('[Router] Page loaded:', !!P, 'Layouts:', L.length);
-            if (P) setPage(() => P);
-            setLayouts(L);
-          } else {
-            console.log('[Router] Path unchanged, skipping navigation');
-          }
-        };
-        window.addEventListener('popstate', handleNavigation);
-        console.log('[Router] Added popstate listener for path:', path);
-        return () => window.removeEventListener('popstate', handleNavigation);
-      }, [path, search]);
-
-      if (!Page) return null;
-
-      // Use AsyncComponent wrapper to handle async Server Components
-      // Pass search to force re-render when query params change
-      let content = React.createElement(AsyncComponent, { component: Page, pathname: path, search: search });
-
-      // Wrap with error boundary if error.tsx exists
-      if (ErrorComponent) {
-        content = React.createElement(ErrorBoundary, { fallback: ErrorComponent }, content);
-      }
-
-      for (let i = layouts.length - 1; i >= 0; i--) {
-        content = React.createElement(layouts[i], null, content);
-      }
-      return content;
-    }
-
-    // Mark that we've initialized (for testing no-reload)
-    window.__NEXT_INITIALIZED__ = Date.now();
-
-    ReactDOM.createRoot(document.getElementById('__next')).render(
-      React.createElement(React.StrictMode, null, React.createElement(Router))
-    );
-  </script>
-</body>
-</html>`;
-  }
 
   /**
    * Resolve URL pathname to page file
@@ -3295,176 +1854,14 @@ export class NextDevServer extends DevServer {
    * Generate HTML shell for a page
    */
   private async generatePageHtml(pageFile: string, pathname: string): Promise<string> {
-    // Use virtual server prefix for all file imports so the service worker can intercept them
-    // Without this, /pages/index.jsx would go to localhost:5173/pages/index.jsx
-    // instead of /__virtual__/3001/pages/index.jsx
-    const virtualPrefix = `/__virtual__/${this.port}`;
-    const pageModulePath = virtualPrefix + pageFile; // pageFile already starts with /
-
-    // Check for global CSS files
-    const globalCssLinks: string[] = [];
-    const cssLocations = ['/styles/globals.css', '/styles/global.css', '/app/globals.css'];
-    for (const cssPath of cssLocations) {
-      if (this.exists(cssPath)) {
-        globalCssLinks.push(`<link rel="stylesheet" href="${virtualPrefix}${cssPath}">`);
-      }
-    }
-
-    // Generate env script for NEXT_PUBLIC_* variables
-    const envScript = this.generateEnvScript();
-
-    // Load Tailwind config if available (must be injected BEFORE CDN script)
-    const tailwindConfigScript = await this.loadTailwindConfigIfNeeded();
-
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <base href="${virtualPrefix}/">
-  <title>Next.js App</title>
-  ${envScript}
-  ${TAILWIND_CDN_SCRIPT}
-  ${tailwindConfigScript}
-  ${CORS_PROXY_SCRIPT}
-  ${globalCssLinks.join('\n  ')}
-  ${REACT_REFRESH_PREAMBLE}
-  <script type="importmap">
-  {
-    "imports": {
-      "react": "https://esm.sh/react@18.2.0?dev",
-      "react/": "https://esm.sh/react@18.2.0&dev/",
-      "react-dom": "https://esm.sh/react-dom@18.2.0?dev",
-      "react-dom/": "https://esm.sh/react-dom@18.2.0&dev/",
-      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
-      "next/link": "${virtualPrefix}/_next/shims/link.js",
-      "next/router": "${virtualPrefix}/_next/shims/router.js",
-      "next/head": "${virtualPrefix}/_next/shims/head.js",
-      "next/navigation": "${virtualPrefix}/_next/shims/navigation.js",
-      "next/image": "${virtualPrefix}/_next/shims/image.js",
-      "next/dynamic": "${virtualPrefix}/_next/shims/dynamic.js",
-      "next/script": "${virtualPrefix}/_next/shims/script.js",
-      "next/font/google": "${virtualPrefix}/_next/shims/font/google.js",
-      "next/font/local": "${virtualPrefix}/_next/shims/font/local.js"
-    }
-  }
-  </script>
-  ${HMR_CLIENT_SCRIPT}
-</head>
-<body>
-  <div id="__next"></div>
-  <script type="module">
-    import React from 'react';
-    import ReactDOM from 'react-dom/client';
-
-    const virtualBase = '${virtualPrefix}';
-
-    // Convert URL path to page module path
-    function getPageModulePath(pathname) {
-      let route = pathname;
-      if (route.startsWith(virtualBase)) {
-        route = route.slice(virtualBase.length);
-      }
-      route = route.replace(/^\\/+/, '/') || '/';
-      const modulePath = route === '/' ? '/index' : route;
-      return virtualBase + '/_next/pages' + modulePath + '.js';
-    }
-
-    // Dynamic page loader
-    async function loadPage(pathname) {
-      const modulePath = getPageModulePath(pathname);
-      try {
-        const module = await import(/* @vite-ignore */ modulePath);
-        return module.default;
-      } catch (e) {
-        console.error('[Navigation] Failed to load:', modulePath, e);
-        return null;
-      }
-    }
-
-    // Router component
-    function Router() {
-      const [Page, setPage] = React.useState(null);
-      const [path, setPath] = React.useState(window.location.pathname);
-
-      React.useEffect(() => {
-        loadPage(path).then(C => C && setPage(() => C));
-      }, []);
-
-      React.useEffect(() => {
-        const handleNavigation = async () => {
-          const newPath = window.location.pathname;
-          if (newPath !== path) {
-            setPath(newPath);
-            const C = await loadPage(newPath);
-            if (C) setPage(() => C);
-          }
-        };
-        window.addEventListener('popstate', handleNavigation);
-        return () => window.removeEventListener('popstate', handleNavigation);
-      }, [path]);
-
-      if (!Page) return null;
-      return React.createElement(Page);
-    }
-
-    // Mark that we've initialized (for testing no-reload)
-    window.__NEXT_INITIALIZED__ = Date.now();
-
-    ReactDOM.createRoot(document.getElementById('__next')).render(
-      React.createElement(React.StrictMode, null, React.createElement(Router))
-    );
-  </script>
-</body>
-</html>`;
+    return _generatePageHtml(this.htmlContext(), pageFile, pathname);
   }
 
   /**
    * Serve a basic 404 page
    */
   private serve404Page(): ResponseData {
-    const virtualPrefix = `/__virtual__/${this.port}`;
-    const html = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <base href="${virtualPrefix}/">
-  <title>404 - Page Not Found</title>
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 100vh;
-      margin: 0;
-      background: #fafafa;
-    }
-    h1 { font-size: 48px; margin: 0; }
-    p { color: #666; margin-top: 10px; }
-    a { color: #0070f3; text-decoration: none; }
-    a:hover { text-decoration: underline; }
-  </style>
-</head>
-<body>
-  <h1>404</h1>
-  <p>This page could not be found.</p>
-  <p><a href="/">Go back home</a></p>
-</body>
-</html>`;
-
-    const buffer = Buffer.from(html);
-    return {
-      statusCode: 404,
-      statusMessage: 'Not Found',
-      headers: {
-        'Content-Type': 'text/html; charset=utf-8',
-        'Content-Length': String(buffer.length),
-      },
-      body: buffer,
-    };
+    return _serve404Page(this.port);
   }
 
   /**
@@ -3536,8 +1933,12 @@ export class NextDevServer extends DevServer {
       // Use filePath (with extension) for transform so loader is correctly determined
       const transformed = await this.transformCode(content, filePath);
 
-      // Cache the transform result
+      // Cache the transform result (LRU eviction at 500 entries)
       this.transformCache.set(filePath, { code: transformed, hash });
+      if (this.transformCache.size > 500) {
+        const firstKey = this.transformCache.keys().next().value;
+        if (firstKey) this.transformCache.delete(firstKey);
+      }
 
       const buffer = Buffer.from(transformed);
       return {