almostnode 0.2.5 → 0.2.7

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

@@ -7,6 +7,14 @@ import { DevServer, DevServerOptions, ResponseData, HMRUpdate } from '../dev-ser
 import { VirtualFS } from '../virtual-fs';
 import { Buffer } from '../shims/stream';
 import { simpleHash } from '../utils/hash';
+import { loadTailwindConfig } from './tailwind-config-loader';
+import {
+  redirectNpmImports as _redirectNpmImports,
+  stripCssImports as _stripCssImports,
+  addReactRefresh as _addReactRefresh,
+  transformEsmToCjsSimple,
+  type CssModuleContext,
+} from './code-transforms';
 
 // Check if we're in a real browser environment (not jsdom or Node.js)
 const isBrowser = typeof window !== 'undefined' &&
@@ -77,6 +85,20 @@ export interface NextDevServerOptions extends DevServerOptions {
   preferAppRouter?: boolean;
   /** Environment variables (NEXT_PUBLIC_* are available in browser code via process.env) */
   env?: Record<string, string>;
+  /** Asset prefix for static files (e.g., '/marketing'). Auto-detected from next.config if not specified. */
+  assetPrefix?: string;
+  /** Base path for the app (e.g., '/docs'). Auto-detected from next.config if not specified. */
+  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;
 }
 
 /**
@@ -269,11 +291,19 @@ const getVirtualBasePath = () => {
   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;
@@ -283,25 +313,31 @@ const applyVirtualBase = (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'));
   };
@@ -566,14 +602,47 @@ export function useSearchParams() {
  * For route /users/[id]/page.jsx with URL /users/123:
  * @example const { id } = useParams(); // { id: '123' }
  *
- * NOTE: This simplified implementation returns empty object.
- * Full implementation would need route pattern matching.
+ * Fetches params from the server's route-info endpoint for dynamic routes.
  */
 export function useParams() {
-  // In a real implementation, this would parse the current route
-  // against the route pattern to extract params
-  // For now, return empty object - works for basic cases
-  return {};
+  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;
 }
 
 /**
@@ -670,6 +739,413 @@ export default function Head({ children }) {
 }
 `;
 
+/**
+ * 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
  *
@@ -718,6 +1194,21 @@ export class NextDevServer extends DevServer {
   /** Transform result cache for performance */
   private transformCache: Map<string, { code: string; hash: string }> = new Map();
 
+  /** Path aliases from tsconfig.json (e.g., @/* -> ./*) */
+  private pathAliases: Map<string, string> = new Map();
+
+  /** Cached Tailwind config script (injected before CDN) */
+  private tailwindConfigScript: string = '';
+
+  /** Whether Tailwind config has been loaded */
+  private tailwindConfigLoaded: boolean = false;
+
+  /** Asset prefix for static files (e.g., '/marketing') */
+  private assetPrefix: string = '';
+
+  /** Base path for the app (e.g., '/docs') */
+  private basePath: string = '';
+
   constructor(vfs: VirtualFS, options: NextDevServerOptions) {
     super(vfs, options);
     this.options = options;
@@ -733,6 +1224,166 @@ export class NextDevServer extends DevServer {
       // Prefer App Router if /app directory exists with a page.jsx file
       this.useAppRouter = this.hasAppRouter();
     }
+
+    // Load path aliases from tsconfig.json
+    this.loadPathAliases();
+
+    // Load assetPrefix from options or auto-detect from next.config
+    this.loadAssetPrefix(options.assetPrefix);
+
+    // Load basePath from options or auto-detect from next.config
+    this.loadBasePath(options.basePath);
+  }
+
+  /**
+   * Load path aliases from tsconfig.json
+   * Supports common patterns like @/* -> ./*
+   */
+  private loadPathAliases(): void {
+    try {
+      const tsconfigPath = '/tsconfig.json';
+      if (!this.vfs.existsSync(tsconfigPath)) {
+        return;
+      }
+
+      const content = this.vfs.readFileSync(tsconfigPath, 'utf-8');
+      const tsconfig = JSON.parse(content);
+      const paths = tsconfig?.compilerOptions?.paths;
+
+      if (!paths) {
+        return;
+      }
+
+      // Convert tsconfig paths to a simple alias map
+      // e.g., "@/*": ["./*"] becomes "@/" -> "/"
+      for (const [alias, targets] of Object.entries(paths)) {
+        if (Array.isArray(targets) && targets.length > 0) {
+          // Remove trailing * from alias and target
+          const aliasPrefix = alias.replace(/\*$/, '');
+          const targetPrefix = (targets[0] as string).replace(/\*$/, '').replace(/^\./, '');
+          this.pathAliases.set(aliasPrefix, targetPrefix);
+        }
+      }
+    } catch (e) {
+      // Silently ignore tsconfig parse errors
+    }
+  }
+
+  /**
+   * Load assetPrefix from options or auto-detect from next.config.ts/js
+   * The assetPrefix is used to prefix static asset URLs (e.g., '/marketing')
+   */
+  private loadAssetPrefix(optionValue?: string): void {
+    // If explicitly provided in options, use it
+    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;
+    }
+
+    // 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;
+        }
+      }
+    } catch (e) {
+      // Silently ignore config parse errors
+    }
+  }
+
+  /**
+   * 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;
+    }
+
+    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
+    }
+  }
+
+  /**
+   * Resolve path aliases in transformed code
+   * Converts imports like "@/components/foo" to "/__virtual__/PORT/components/foo"
+   * This ensures imports go through the virtual server instead of the main server
+   */
+  private resolvePathAliases(code: string, currentFile: string): string {
+    if (this.pathAliases.size === 0) {
+      return code;
+    }
+
+    // Get the virtual server base path
+    const virtualBase = `/__virtual__/${this.port}`;
+
+    let result = code;
+
+    for (const [alias, target] of this.pathAliases) {
+      // Match import/export statements with the alias
+      // Handles: import ... from "@/...", export ... from "@/...", import("@/...")
+      const aliasEscaped = alias.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+      // Pattern to match the alias in import/export statements
+      // This matches: from "@/...", from '@/...', import("@/..."), import('@/...')
+      const pattern = new RegExp(
+        `(from\\s*['"]|import\\s*\\(\\s*['"])${aliasEscaped}([^'"]+)(['"])`,
+        'g'
+      );
+
+      result = result.replace(pattern, (match, prefix, path, quote) => {
+        // Convert alias to virtual server path
+        // e.g., @/components/faq -> /__virtual__/3001/components/faq
+        const resolvedPath = `${virtualBase}${target}${path}`;
+        return `${prefix}${resolvedPath}${quote}`;
+      });
+    }
+
+    return result;
   }
 
   /**
@@ -762,28 +1413,60 @@ export class NextDevServer extends DevServer {
   /**
    * Generate a script tag that defines process.env with NEXT_PUBLIC_* variables
    * This makes environment variables available to browser code via process.env.NEXT_PUBLIC_*
+   * Also includes all env variables for Server Component compatibility
    */
   private generateEnvScript(): string {
     const env = this.options.env || {};
 
-    // Filter for NEXT_PUBLIC_* variables only (Next.js convention)
-    const publicEnvVars = Object.entries(env)
-      .filter(([key]) => key.startsWith('NEXT_PUBLIC_'))
-      .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {} as Record<string, string>);
-
-    // Return empty string if no public env vars
-    if (Object.keys(publicEnvVars).length === 0) {
-      return '';
+    // Only include NEXT_PUBLIC_* vars in the HTML (client-side accessible)
+    // Non-public vars should never be exposed in HTML for security
+    const publicEnvVars: Record<string, string> = {};
+    for (const [key, value] of Object.entries(env)) {
+      if (key.startsWith('NEXT_PUBLIC_')) {
+        publicEnvVars[key] = value;
+      }
     }
 
+    // Always create process.env even if empty (some code checks for process.env existence)
+    // This prevents "process is not defined" errors
     return `<script>
-  // NEXT_PUBLIC_* environment variables (injected by NextDevServer)
+  // Environment variables (injected by NextDevServer)
   window.process = window.process || {};
   window.process.env = window.process.env || {};
   Object.assign(window.process.env, ${JSON.stringify(publicEnvVars)});
+  // Next.js config values
+  window.__NEXT_BASE_PATH__ = ${JSON.stringify(this.basePath)};
 </script>`;
   }
 
+  /**
+   * Load Tailwind config from tailwind.config.ts and generate a script
+   * that configures the Tailwind CDN at runtime
+   */
+  private async loadTailwindConfigIfNeeded(): Promise<string> {
+    // Return cached script if already loaded
+    if (this.tailwindConfigLoaded) {
+      return this.tailwindConfigScript;
+    }
+
+    try {
+      const result = await loadTailwindConfig(this.vfs, this.root);
+
+      if (result.success) {
+        this.tailwindConfigScript = result.configScript;
+      } else if (result.error) {
+        console.warn('[NextDevServer] Tailwind config warning:', result.error);
+        this.tailwindConfigScript = '';
+      }
+    } catch (error) {
+      console.warn('[NextDevServer] Failed to load tailwind.config:', error);
+      this.tailwindConfigScript = '';
+    }
+
+    this.tailwindConfigLoaded = true;
+    return this.tailwindConfigScript;
+  }
+
   /**
    * Check if App Router is available
    */
@@ -792,11 +1475,30 @@ export class NextDevServer extends DevServer {
       // Check if /app directory exists and has a page file
       if (!this.exists(this.appDir)) return false;
 
-      // Check for root page
       const extensions = ['.jsx', '.tsx', '.js', '.ts'];
+
+      // Check for root page directly
       for (const ext of extensions) {
         if (this.exists(`${this.appDir}/page${ext}`)) return true;
       }
+
+      // Check for root page inside route groups (e.g., /app/(main)/page.tsx)
+      try {
+        const entries = this.vfs.readdirSync(this.appDir);
+        for (const entry of entries) {
+          if (/^\([^)]+\)$/.test(entry) && this.isDirectory(`${this.appDir}/${entry}`)) {
+            for (const ext of extensions) {
+              if (this.exists(`${this.appDir}/${entry}/page${ext}`)) return true;
+            }
+          }
+        }
+      } catch { /* ignore */ }
+
+      // Also check for any layout.tsx which indicates App Router usage
+      for (const ext of extensions) {
+        if (this.exists(`${this.appDir}/layout${ext}`)) return true;
+      }
+
       return false;
     } catch {
       return false;
@@ -813,13 +1515,47 @@ export class NextDevServer extends DevServer {
     body?: Buffer
   ): Promise<ResponseData> {
     const urlObj = new URL(url, 'http://localhost');
-    const pathname = urlObj.pathname;
+    let pathname = urlObj.pathname;
+
+    // Strip virtual prefix if present (e.g., /__virtual__/3001/foo -> /foo)
+    const virtualPrefixMatch = pathname.match(/^\/__virtual__\/\d+/);
+    if (virtualPrefixMatch) {
+      pathname = pathname.slice(virtualPrefixMatch[0].length) || '/';
+    }
+
+    // Strip assetPrefix if present (e.g., /marketing/images/foo.png -> /images/foo.png)
+    // This allows static assets to be served from /public when using assetPrefix in next.config
+    // Also handles double-slash case: /marketing//images/foo.png (when assetPrefix ends with /)
+    if (this.assetPrefix && pathname.startsWith(this.assetPrefix)) {
+      const rest = pathname.slice(this.assetPrefix.length);
+      // Handle both /marketing/images and /marketing//images cases
+      if (rest === '' || rest.startsWith('/')) {
+        pathname = rest || '/';
+        // Normalize double slashes that may occur from assetPrefix concatenation
+        if (pathname.startsWith('//')) {
+          pathname = pathname.slice(1);
+        }
+      }
+    }
+
+    // Strip basePath if present (e.g., /docs/about -> /about)
+    if (this.basePath && pathname.startsWith(this.basePath)) {
+      const rest = pathname.slice(this.basePath.length);
+      if (rest === '' || rest.startsWith('/')) {
+        pathname = rest || '/';
+      }
+    }
 
     // Serve Next.js shims
     if (pathname.startsWith('/_next/shims/')) {
       return this.serveNextShim(pathname);
     }
 
+    // Route info endpoint for client-side navigation params extraction
+    if (pathname === '/_next/route-info') {
+      return this.serveRouteInfo(urlObj.searchParams.get('pathname') || '/');
+    }
+
     // Serve page components for client-side navigation (Pages Router)
     if (pathname.startsWith('/_next/pages/')) {
       return this.servePageComponent(pathname);
@@ -835,7 +1571,15 @@ export class NextDevServer extends DevServer {
       return this.serveStaticAsset(pathname);
     }
 
-    // API routes: /api/*
+    // App Router API routes (route.ts/route.js) - check before Pages Router API routes
+    if (this.useAppRouter) {
+      const appRouteFile = this.resolveAppRouteHandler(pathname);
+      if (appRouteFile) {
+        return this.handleAppRouteHandler(method, pathname, headers, body, appRouteFile, urlObj.search);
+      }
+    }
+
+    // Pages Router API routes: /api/*
     if (pathname.startsWith('/api/')) {
       return this.handleApiRoute(method, pathname, headers, body);
     }
@@ -851,6 +1595,16 @@ export class NextDevServer extends DevServer {
       return this.transformAndServe(pathname, pathname);
     }
 
+    // Try to resolve file with different extensions (for imports without extensions)
+    // e.g., /components/faq -> /components/faq.tsx
+    const resolvedFile = this.resolveFileWithExtension(pathname);
+    if (resolvedFile) {
+      if (this.needsTransform(resolvedFile)) {
+        return this.transformAndServe(resolvedFile, pathname);
+      }
+      return this.serveFile(resolvedFile);
+    }
+
     // Serve regular files directly if they exist
     if (this.exists(pathname) && !this.isDirectory(pathname)) {
       return this.serveFile(pathname);
@@ -880,6 +1634,21 @@ export class NextDevServer extends DevServer {
       case 'navigation':
         code = NEXT_NAVIGATION_SHIM;
         break;
+      case 'image':
+        code = NEXT_IMAGE_SHIM;
+        break;
+      case 'dynamic':
+        code = NEXT_DYNAMIC_SHIM;
+        break;
+      case 'script':
+        code = NEXT_SCRIPT_SHIM;
+        break;
+      case 'font/google':
+        code = NEXT_FONT_GOOGLE_SHIM;
+        break;
+      case 'font/local':
+        code = NEXT_FONT_LOCAL_SHIM;
+        break;
       default:
         return this.notFound(pathname);
     }
@@ -897,6 +1666,32 @@ export class NextDevServer extends DevServer {
     };
   }
 
+  /**
+   * Serve route info for client-side navigation
+   * Returns params extracted from dynamic route segments
+   */
+  private serveRouteInfo(pathname: string): ResponseData {
+    const route = this.resolveAppRoute(pathname);
+
+    const info = route
+      ? { params: route.params, found: true }
+      : { params: {}, found: false };
+
+    const json = JSON.stringify(info);
+    const buffer = Buffer.from(json);
+
+    return {
+      statusCode: 200,
+      statusMessage: 'OK',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+        'Content-Length': String(buffer.length),
+        'Cache-Control': 'no-cache',
+      },
+      body: buffer,
+    };
+  }
+
   /**
    * Serve static assets from /_next/static/
    */
@@ -992,12 +1787,244 @@ export class NextDevServer extends DevServer {
         const timeout = new Promise<void>((_, reject) => {
           setTimeout(() => reject(new Error('API handler timeout')), 30000);
         });
-        await Promise.race([res.waitForEnd(), timeout]);
+        await Promise.race([res.waitForEnd(), timeout]);
+      }
+
+      return res.toResponse();
+    } catch (error) {
+      console.error('[NextDevServer] API error:', error);
+      return {
+        statusCode: 500,
+        statusMessage: 'Internal Server Error',
+        headers: { 'Content-Type': 'application/json; charset=utf-8' },
+        body: Buffer.from(JSON.stringify({
+          error: error instanceof Error ? error.message : 'Internal Server Error'
+        })),
+      };
+    }
+  }
+
+  /**
+   * Resolve an App Router route handler (route.ts/route.js)
+   * Returns the file path if found, null otherwise
+   */
+  private resolveAppRouteHandler(pathname: string): string | null {
+    const extensions = ['.ts', '.js', '.tsx', '.jsx'];
+
+    // Build the directory path in the app dir
+    const segments = pathname === '/' ? [] : pathname.split('/').filter(Boolean);
+    let dirPath = this.appDir;
+
+    for (const segment of segments) {
+      dirPath = `${dirPath}/${segment}`;
+    }
+
+    // Check for route file
+    for (const ext of extensions) {
+      const routePath = `${dirPath}/route${ext}`;
+      if (this.exists(routePath)) {
+        return routePath;
+      }
+    }
+
+    // Try dynamic route resolution with route groups
+    return this.resolveAppRouteHandlerDynamic(segments);
+  }
+
+  /**
+   * Resolve dynamic App Router route handlers with route group support
+   */
+  private resolveAppRouteHandlerDynamic(segments: string[]): string | null {
+    const extensions = ['.ts', '.js', '.tsx', '.jsx'];
+
+    const tryPath = (dirPath: string, remainingSegments: string[]): string | null => {
+      if (remainingSegments.length === 0) {
+        for (const ext of extensions) {
+          const routePath = `${dirPath}/route${ext}`;
+          if (this.exists(routePath)) {
+            return routePath;
+          }
+        }
+
+        // Check route groups
+        try {
+          const entries = this.vfs.readdirSync(dirPath);
+          for (const entry of entries) {
+            if (/^\([^)]+\)$/.test(entry) && this.isDirectory(`${dirPath}/${entry}`)) {
+              for (const ext of extensions) {
+                const routePath = `${dirPath}/${entry}/route${ext}`;
+                if (this.exists(routePath)) {
+                  return routePath;
+                }
+              }
+            }
+          }
+        } catch { /* ignore */ }
+
+        return null;
+      }
+
+      const [current, ...rest] = remainingSegments;
+
+      // Try exact match
+      const exactPath = `${dirPath}/${current}`;
+      if (this.isDirectory(exactPath)) {
+        const result = tryPath(exactPath, rest);
+        if (result) return result;
+      }
+
+      // Try route groups and dynamic segments
+      try {
+        const entries = this.vfs.readdirSync(dirPath);
+        for (const entry of entries) {
+          // Route groups
+          if (/^\([^)]+\)$/.test(entry) && this.isDirectory(`${dirPath}/${entry}`)) {
+            const groupExact = `${dirPath}/${entry}/${current}`;
+            if (this.isDirectory(groupExact)) {
+              const result = tryPath(groupExact, rest);
+              if (result) return result;
+            }
+          }
+          // Dynamic segments
+          if (entry.startsWith('[') && entry.endsWith(']') && !entry.includes('.')) {
+            const dynamicPath = `${dirPath}/${entry}`;
+            if (this.isDirectory(dynamicPath)) {
+              const result = tryPath(dynamicPath, rest);
+              if (result) return result;
+            }
+          }
+          // Catch-all
+          if (entry.startsWith('[...') && entry.endsWith(']')) {
+            const dynamicPath = `${dirPath}/${entry}`;
+            if (this.isDirectory(dynamicPath)) {
+              const result = tryPath(dynamicPath, []);
+              if (result) return result;
+            }
+          }
+        }
+      } catch { /* ignore */ }
+
+      return null;
+    };
+
+    return tryPath(this.appDir, segments);
+  }
+
+  /**
+   * Handle App Router route handler (route.ts) requests
+   * These use the Web Request/Response API pattern
+   */
+  private async handleAppRouteHandler(
+    method: string,
+    pathname: string,
+    headers: Record<string, string>,
+    body: Buffer | undefined,
+    routeFile: string,
+    search?: string
+  ): Promise<ResponseData> {
+    try {
+      const code = this.vfs.readFileSync(routeFile, 'utf8');
+      const transformed = await this.transformApiHandler(code, routeFile);
+
+      // Create module context
+      const builtinModules: Record<string, unknown> = {
+        https: await import('../shims/https'),
+        http: await import('../shims/http'),
+        path: await import('../shims/path'),
+        url: await import('../shims/url'),
+        querystring: await import('../shims/querystring'),
+        util: await import('../shims/util'),
+        events: await import('../shims/events'),
+        stream: await import('../shims/stream'),
+        buffer: await import('../shims/buffer'),
+        crypto: await import('../shims/crypto'),
+      };
+
+      const require = (id: string): unknown => {
+        const modId = id.startsWith('node:') ? id.slice(5) : id;
+        if (builtinModules[modId]) return builtinModules[modId];
+        throw new Error(`Module not found: ${id}`);
+      };
+
+      const module = { exports: {} as Record<string, unknown> };
+      const exports = module.exports;
+      const process = {
+        env: { ...this.options.env },
+        cwd: () => '/',
+        platform: 'browser',
+        version: 'v18.0.0',
+        versions: { node: '18.0.0' },
+      };
+
+      const fn = new Function('exports', 'require', 'module', 'process', transformed);
+      fn(exports, require, module, process);
+
+      // Get the handler for the HTTP method
+      const methodUpper = method.toUpperCase();
+      const handler = module.exports[methodUpper] || module.exports[methodUpper.toLowerCase()];
+
+      if (typeof handler !== 'function') {
+        return {
+          statusCode: 405,
+          statusMessage: 'Method Not Allowed',
+          headers: { 'Content-Type': 'application/json; charset=utf-8' },
+          body: Buffer.from(JSON.stringify({ error: `Method ${method} not allowed` })),
+        };
+      }
+
+      // Create a Web API Request object
+      const requestUrl = new URL(pathname + (search || ''), 'http://localhost');
+      const requestInit: RequestInit = {
+        method: methodUpper,
+        headers: new Headers(headers),
+      };
+      if (body && methodUpper !== 'GET' && methodUpper !== 'HEAD') {
+        requestInit.body = body;
+      }
+      const request = new Request(requestUrl.toString(), requestInit);
+
+      // Extract route params
+      const route = this.resolveAppRoute(pathname);
+      const params = route?.params || {};
+
+      // Call the handler
+      const response = await handler(request, { params: Promise.resolve(params) });
+
+      // Convert Response to our format
+      if (response instanceof Response) {
+        const respHeaders: Record<string, string> = {};
+        response.headers.forEach((value: string, key: string) => {
+          respHeaders[key] = value;
+        });
+
+        const respBody = await response.text();
+        return {
+          statusCode: response.status,
+          statusMessage: response.statusText || 'OK',
+          headers: respHeaders,
+          body: Buffer.from(respBody),
+        };
       }
 
-      return res.toResponse();
+      // If the handler returned a plain object, serialize as JSON
+      if (response && typeof response === 'object') {
+        const json = JSON.stringify(response);
+        return {
+          statusCode: 200,
+          statusMessage: 'OK',
+          headers: { 'Content-Type': 'application/json; charset=utf-8' },
+          body: Buffer.from(json),
+        };
+      }
+
+      return {
+        statusCode: 200,
+        statusMessage: 'OK',
+        headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+        body: Buffer.from(String(response || '')),
+      };
     } catch (error) {
-      console.error('[NextDevServer] API error:', error);
+      console.error('[NextDevServer] App Route handler error:', error);
       return {
         statusCode: 500,
         statusMessage: 'Internal Server Error',
@@ -1510,79 +2537,128 @@ export class NextDevServer extends DevServer {
   /**
    * Resolve App Router route to page and layout files
    */
-  private resolveAppRoute(pathname: string): { page: string; layouts: string[] } | null {
-    const extensions = ['.jsx', '.tsx', '.js', '.ts'];
+  private resolveAppRoute(pathname: string): AppRoute | null {
     const segments = pathname === '/' ? [] : pathname.split('/').filter(Boolean);
+    // Use the unified dynamic resolver which handles static, dynamic, and route groups
+    return this.resolveAppDynamicRoute(pathname, segments);
+  }
 
-    // Build the directory path
-    let dirPath = this.appDir;
-    const layouts: string[] = [];
+  /**
+   * Resolve App Router routes including static, dynamic, and route groups.
+   * Route groups are folders wrapped in parentheses like (marketing) that
+   * don't affect the URL path but can have their own layouts.
+   */
+  private resolveAppDynamicRoute(
+    _pathname: string,
+    segments: string[]
+  ): AppRoute | null {
+    const extensions = ['.jsx', '.tsx', '.js', '.ts'];
 
-    // Collect layouts from root to current directory
-    for (const ext of extensions) {
-      const rootLayout = `${this.appDir}/layout${ext}`;
-      if (this.exists(rootLayout)) {
-        layouts.push(rootLayout);
-        break;
+    /**
+     * Collect layout from a directory if it exists
+     */
+    const collectLayout = (dirPath: string, layouts: string[]): string[] => {
+      for (const ext of extensions) {
+        const layoutPath = `${dirPath}/layout${ext}`;
+        if (this.exists(layoutPath) && !layouts.includes(layoutPath)) {
+          return [...layouts, layoutPath];
+        }
       }
-    }
-
-    // Walk through segments to find page and collect layouts
-    for (const segment of segments) {
-      dirPath = `${dirPath}/${segment}`;
+      return layouts;
+    };
 
-      // Check for layout in this segment
+    /**
+     * Find page file in a directory
+     */
+    const findPage = (dirPath: string): string | null => {
       for (const ext of extensions) {
-        const layoutPath = `${dirPath}/layout${ext}`;
-        if (this.exists(layoutPath)) {
-          layouts.push(layoutPath);
-          break;
+        const pagePath = `${dirPath}/page${ext}`;
+        if (this.exists(pagePath)) {
+          return pagePath;
         }
       }
-    }
+      return null;
+    };
 
-    // Find the page file
-    for (const ext of extensions) {
-      const pagePath = `${dirPath}/page${ext}`;
-      if (this.exists(pagePath)) {
-        return { page: pagePath, layouts };
+    /**
+     * Find a UI convention file (loading, error, not-found) in a directory
+     */
+    const findConventionFile = (dirPath: string, name: string): string | null => {
+      for (const ext of extensions) {
+        const filePath = `${dirPath}/${name}${ext}`;
+        if (this.exists(filePath)) {
+          return filePath;
+        }
       }
-    }
+      return null;
+    };
 
-    // Try dynamic segments
-    return this.resolveAppDynamicRoute(pathname, segments);
-  }
+    /**
+     * Find the nearest convention file by walking up from the page directory
+     */
+    const findNearestConventionFile = (dirPath: string, name: string): string | null => {
+      let current = dirPath;
+      while (current.startsWith(this.appDir)) {
+        const file = findConventionFile(current, name);
+        if (file) return file;
+        // Move up one directory
+        const parent = current.replace(/\/[^/]+$/, '');
+        if (parent === current) break;
+        current = parent;
+      }
+      return null;
+    };
 
-  /**
-   * Resolve dynamic App Router routes like /app/[id]/page.jsx
-   */
-  private resolveAppDynamicRoute(
-    pathname: string,
-    segments: string[]
-  ): { page: string; layouts: string[] } | null {
-    const extensions = ['.jsx', '.tsx', '.js', '.ts'];
+    /**
+     * Get route group directories (folders matching (name) pattern)
+     */
+    const getRouteGroups = (dirPath: string): string[] => {
+      try {
+        const entries = this.vfs.readdirSync(dirPath);
+        return entries.filter(e => /^\([^)]+\)$/.test(e) && this.isDirectory(`${dirPath}/${e}`));
+      } catch {
+        return [];
+      }
+    };
 
     const tryPath = (
       dirPath: string,
       remainingSegments: string[],
-      layouts: string[]
-    ): { page: string; layouts: string[] } | null => {
+      layouts: string[],
+      params: Record<string, string | string[]>
+    ): AppRoute | null => {
       // Check for layout at current level
-      for (const ext of extensions) {
-        const layoutPath = `${dirPath}/layout${ext}`;
-        if (this.exists(layoutPath) && !layouts.includes(layoutPath)) {
-          layouts = [...layouts, layoutPath];
-        }
-      }
+      layouts = collectLayout(dirPath, layouts);
 
       if (remainingSegments.length === 0) {
-        // Look for page file
-        for (const ext of extensions) {
-          const pagePath = `${dirPath}/page${ext}`;
-          if (this.exists(pagePath)) {
-            return { page: pagePath, layouts };
+        // Look for page file directly
+        const page = findPage(dirPath);
+        if (page) {
+          return {
+            page, layouts, params,
+            loading: findNearestConventionFile(dirPath, 'loading') || undefined,
+            error: findNearestConventionFile(dirPath, 'error') || undefined,
+            notFound: findNearestConventionFile(dirPath, 'not-found') || undefined,
+          };
+        }
+
+        // Look for page inside route groups at this level
+        // e.g., /app/(marketing)/page.tsx resolves to /
+        const groups = getRouteGroups(dirPath);
+        for (const group of groups) {
+          const groupPath = `${dirPath}/${group}`;
+          const groupLayouts = collectLayout(groupPath, layouts);
+          const page = findPage(groupPath);
+          if (page) {
+            return {
+              page, layouts: groupLayouts, params,
+              loading: findNearestConventionFile(groupPath, 'loading') || undefined,
+              error: findNearestConventionFile(groupPath, 'error') || undefined,
+              notFound: findNearestConventionFile(groupPath, 'not-found') || undefined,
+            };
           }
         }
+
         return null;
       }
 
@@ -1591,18 +2667,90 @@ export class NextDevServer extends DevServer {
       // Try exact match first
       const exactPath = `${dirPath}/${current}`;
       if (this.isDirectory(exactPath)) {
-        const result = tryPath(exactPath, rest, layouts);
+        const result = tryPath(exactPath, rest, layouts, params);
         if (result) return result;
       }
 
-      // Try dynamic segment [param]
+      // Try inside route groups - route groups are transparent in URL
+      // e.g., /about might match /app/(marketing)/about/page.tsx
+      const groups = getRouteGroups(dirPath);
+      for (const group of groups) {
+        const groupPath = `${dirPath}/${group}`;
+        const groupLayouts = collectLayout(groupPath, layouts);
+
+        // Try exact match inside group
+        const groupExactPath = `${groupPath}/${current}`;
+        if (this.isDirectory(groupExactPath)) {
+          const result = tryPath(groupExactPath, rest, groupLayouts, params);
+          if (result) return result;
+        }
+
+        // Try dynamic segments inside group
+        try {
+          const groupEntries = this.vfs.readdirSync(groupPath);
+          for (const entry of groupEntries) {
+            if (entry.startsWith('[...') && entry.endsWith(']')) {
+              const dynamicPath = `${groupPath}/${entry}`;
+              if (this.isDirectory(dynamicPath)) {
+                const paramName = entry.slice(4, -1);
+                const newParams = { ...params, [paramName]: [current, ...rest] };
+                const result = tryPath(dynamicPath, [], groupLayouts, newParams);
+                if (result) return result;
+              }
+            } else if (entry.startsWith('[[...') && entry.endsWith(']]')) {
+              const dynamicPath = `${groupPath}/${entry}`;
+              if (this.isDirectory(dynamicPath)) {
+                const paramName = entry.slice(5, -2);
+                const newParams = { ...params, [paramName]: [current, ...rest] };
+                const result = tryPath(dynamicPath, [], groupLayouts, newParams);
+                if (result) return result;
+              }
+            } else if (entry.startsWith('[') && entry.endsWith(']') && !entry.includes('.')) {
+              const dynamicPath = `${groupPath}/${entry}`;
+              if (this.isDirectory(dynamicPath)) {
+                const paramName = entry.slice(1, -1);
+                const newParams = { ...params, [paramName]: current };
+                const result = tryPath(dynamicPath, rest, groupLayouts, newParams);
+                if (result) return result;
+              }
+            }
+          }
+        } catch {
+          // Group directory read failed
+        }
+      }
+
+      // Try dynamic segments at current level
       try {
         const entries = this.vfs.readdirSync(dirPath);
         for (const entry of entries) {
-          if (entry.startsWith('[') && entry.endsWith(']') && !entry.includes('.')) {
+          // Handle catch-all routes [...slug]
+          if (entry.startsWith('[...') && entry.endsWith(']')) {
+            const dynamicPath = `${dirPath}/${entry}`;
+            if (this.isDirectory(dynamicPath)) {
+              const paramName = entry.slice(4, -1);
+              const newParams = { ...params, [paramName]: [current, ...rest] };
+              const result = tryPath(dynamicPath, [], layouts, newParams);
+              if (result) return result;
+            }
+          }
+          // Handle optional catch-all routes [[...slug]]
+          else if (entry.startsWith('[[...') && entry.endsWith(']]')) {
             const dynamicPath = `${dirPath}/${entry}`;
             if (this.isDirectory(dynamicPath)) {
-              const result = tryPath(dynamicPath, rest, layouts);
+              const paramName = entry.slice(5, -2);
+              const newParams = { ...params, [paramName]: [current, ...rest] };
+              const result = tryPath(dynamicPath, [], layouts, newParams);
+              if (result) return result;
+            }
+          }
+          // Handle single dynamic segment [param]
+          else if (entry.startsWith('[') && entry.endsWith(']') && !entry.includes('.')) {
+            const dynamicPath = `${dirPath}/${entry}`;
+            if (this.isDirectory(dynamicPath)) {
+              const paramName = entry.slice(1, -1);
+              const newParams = { ...params, [paramName]: current };
+              const result = tryPath(dynamicPath, rest, layouts, newParams);
               if (result) return result;
             }
           }
@@ -1624,14 +2772,14 @@ export class NextDevServer extends DevServer {
       }
     }
 
-    return tryPath(this.appDir, segments, layouts);
+    return tryPath(this.appDir, segments, layouts, {});
   }
 
   /**
    * Generate HTML for App Router with nested layouts
    */
   private async generateAppRouterHtml(
-    route: { page: string; layouts: string[] },
+    route: AppRoute,
     pathname: string
   ): Promise<string> {
     // Use virtual server prefix for all file imports so the service worker can intercept them
@@ -1653,6 +2801,11 @@ export class NextDevServer extends DevServer {
       .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--) {
@@ -1662,6 +2815,9 @@ export class NextDevServer extends DevServer {
     // 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>
@@ -1671,6 +2827,7 @@ export class NextDevServer extends DevServer {
   <title>Next.js App</title>
   ${envScript}
   ${TAILWIND_CDN_SCRIPT}
+  ${tailwindConfigScript}
   ${CORS_PROXY_SCRIPT}
   ${globalCssLinks.join('\n  ')}
   ${REACT_REFRESH_PREAMBLE}
@@ -1692,7 +2849,12 @@ export class NextDevServer extends DevServer {
       "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/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>
@@ -1706,6 +2868,47 @@ export class NextDevServer extends DevServer {
 
     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;
@@ -1772,11 +2975,138 @@ export class NextDevServer extends DevServer {
       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]) => {
@@ -1788,21 +3118,42 @@ export class NextDevServer extends DevServer {
       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] = await Promise.all([loadPage(newPath), loadLayouts(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]);
+      }, [path, search]);
 
       if (!Page) return null;
 
-      // Build nested layout structure
-      let content = React.createElement(Page);
+      // 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);
       }
@@ -1962,6 +3313,9 @@ export class NextDevServer extends DevServer {
     // 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>
@@ -1971,6 +3325,7 @@ export class NextDevServer extends DevServer {
   <title>Next.js App</title>
   ${envScript}
   ${TAILWIND_CDN_SCRIPT}
+  ${tailwindConfigScript}
   ${CORS_PROXY_SCRIPT}
   ${globalCssLinks.join('\n  ')}
   ${REACT_REFRESH_PREAMBLE}
@@ -1984,7 +3339,13 @@ export class NextDevServer extends DevServer {
       "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/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>
@@ -2106,6 +3467,39 @@ export class NextDevServer extends DevServer {
     };
   }
 
+  /**
+   * Try to resolve a file path by adding common extensions
+   * e.g., /components/faq -> /components/faq.tsx
+   * Also handles index files in directories
+   */
+  private resolveFileWithExtension(pathname: string): string | null {
+    // If the file already has an extension and exists, return it
+    if (/\.\w+$/.test(pathname) && this.exists(pathname)) {
+      return pathname;
+    }
+
+    // Common extensions to try, in order of preference
+    const extensions = ['.tsx', '.ts', '.jsx', '.js'];
+
+    // Try adding extensions directly
+    for (const ext of extensions) {
+      const withExt = pathname + ext;
+      if (this.exists(withExt)) {
+        return withExt;
+      }
+    }
+
+    // Try as a directory with index file
+    for (const ext of extensions) {
+      const indexPath = pathname + '/index' + ext;
+      if (this.exists(indexPath)) {
+        return indexPath;
+      }
+    }
+
+    return null;
+  }
+
   /**
    * Check if a file needs transformation
    */
@@ -2139,7 +3533,8 @@ export class NextDevServer extends DevServer {
         };
       }
 
-      const transformed = await this.transformCode(content, urlPath);
+      // Use filePath (with extension) for transform so loader is correctly determined
+      const transformed = await this.transformCode(content, filePath);
 
       // Cache the transform result
       this.transformCache.set(filePath, { code: transformed, hash });
@@ -2177,7 +3572,9 @@ export class NextDevServer extends DevServer {
    */
   private async transformCode(code: string, filename: string): Promise<string> {
     if (!isBrowser) {
-      return code;
+      // Even in non-browser mode, strip/transform CSS imports
+      // so CSS module imports get replaced with class name objects
+      return this.stripCssImports(code, filename);
     }
 
     await initEsbuild();
@@ -2189,14 +3586,17 @@ export class NextDevServer extends DevServer {
 
     // Remove CSS imports before transformation - they are handled via <link> tags
     // CSS imports in ESM would fail with MIME type errors
-    const codeWithoutCssImports = this.stripCssImports(code);
+    const codeWithoutCssImports = this.stripCssImports(code, filename);
+
+    // Resolve path aliases (e.g., @/ -> /) before transformation
+    const codeWithResolvedAliases = this.resolvePathAliases(codeWithoutCssImports, filename);
 
     let loader: 'js' | 'jsx' | 'ts' | 'tsx' = 'js';
     if (filename.endsWith('.jsx')) loader = 'jsx';
     else if (filename.endsWith('.tsx')) loader = 'tsx';
     else if (filename.endsWith('.ts')) loader = 'ts';
 
-    const result = await esbuild.transform(codeWithoutCssImports, {
+    const result = await esbuild.transform(codeWithResolvedAliases, {
       loader,
       format: 'esm',
       target: 'esnext',
@@ -2206,28 +3606,39 @@ export class NextDevServer extends DevServer {
       sourcefile: filename,
     });
 
+    // Redirect bare npm imports to esm.sh CDN
+    const codeWithCdnImports = this.redirectNpmImports(result.code);
+
     // Add React Refresh registration for JSX/TSX files
     if (/\.(jsx|tsx)$/.test(filename)) {
-      return this.addReactRefresh(result.code, filename);
+      return this.addReactRefresh(codeWithCdnImports, filename);
     }
 
-    return result.code;
+    return codeWithCdnImports;
   }
 
-  /**
-   * Strip CSS imports from code (they are loaded via <link> tags instead)
-   * Handles: import './styles.css', import '../globals.css', etc.
-   */
-  private stripCssImports(code: string): string {
-    // Match import statements for CSS files (with or without semicolon)
-    // Handles: import './styles.css'; import "./globals.css" import '../path/file.css'
-    return code.replace(/import\s+['"][^'"]+\.css['"]\s*;?/g, '// CSS import removed (loaded via <link>)');
+  private redirectNpmImports(code: string): string {
+    return _redirectNpmImports(code);
+  }
+
+  private stripCssImports(code: string, currentFile?: string): string {
+    return _stripCssImports(code, currentFile, this.getCssModuleContext());
+  }
+
+  private getCssModuleContext(): CssModuleContext {
+    return {
+      readFile: (path: string) => this.vfs.readFileSync(path, 'utf-8'),
+      exists: (path: string) => this.exists(path),
+    };
   }
 
   /**
    * Transform API handler code to CommonJS for eval execution
    */
   private async transformApiHandler(code: string, filename: string): Promise<string> {
+    // Resolve path aliases first
+    const codeWithResolvedAliases = this.resolvePathAliases(code, filename);
+
     if (isBrowser) {
       // Use esbuild in browser
       await initEsbuild();
@@ -2242,7 +3653,7 @@ export class NextDevServer extends DevServer {
       else if (filename.endsWith('.tsx')) loader = 'tsx';
       else if (filename.endsWith('.ts')) loader = 'ts';
 
-      const result = await esbuild.transform(code, {
+      const result = await esbuild.transform(codeWithResolvedAliases, {
         loader,
         format: 'cjs',  // CommonJS for eval execution
         target: 'esnext',
@@ -2253,94 +3664,11 @@ export class NextDevServer extends DevServer {
       return result.code;
     }
 
-    // Simple ESM to CJS transform for Node.js/test environment
-    let transformed = code;
-
-    // Convert: import X from 'Y' -> const X = require('Y')
-    transformed = transformed.replace(
-      /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]/g,
-      'const $1 = require("$2")'
-    );
-
-    // Convert: import { X } from 'Y' -> const { X } = require('Y')
-    transformed = transformed.replace(
-      /import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g,
-      'const {$1} = require("$2")'
-    );
-
-    // Convert: export default function X -> module.exports = function X
-    transformed = transformed.replace(
-      /export\s+default\s+function\s+(\w+)/g,
-      'module.exports = function $1'
-    );
-
-    // Convert: export default function -> module.exports = function
-    transformed = transformed.replace(
-      /export\s+default\s+function\s*\(/g,
-      'module.exports = function('
-    );
-
-    // Convert: export default X -> module.exports = X
-    transformed = transformed.replace(
-      /export\s+default\s+/g,
-      'module.exports = '
-    );
-
-    return transformed;
+    return transformEsmToCjsSimple(codeWithResolvedAliases);
   }
 
-  /**
-   * Add React Refresh registration to transformed code
-   */
   private addReactRefresh(code: string, filename: string): string {
-    const components: string[] = [];
-
-    const funcDeclRegex = /(?:^|\n)(?:export\s+)?function\s+([A-Z][a-zA-Z0-9]*)\s*\(/g;
-    let match;
-    while ((match = funcDeclRegex.exec(code)) !== null) {
-      if (!components.includes(match[1])) {
-        components.push(match[1]);
-      }
-    }
-
-    const arrowRegex = /(?:^|\n)(?:export\s+)?(?:const|let|var)\s+([A-Z][a-zA-Z0-9]*)\s*=/g;
-    while ((match = arrowRegex.exec(code)) !== null) {
-      if (!components.includes(match[1])) {
-        components.push(match[1]);
-      }
-    }
-
-    if (components.length === 0) {
-      return `// HMR Setup
-import.meta.hot = window.__vite_hot_context__("${filename}");
-
-${code}
-
-if (import.meta.hot) {
-  import.meta.hot.accept();
-}
-`;
-    }
-
-    const registrations = components
-      .map(name => `  $RefreshReg$(${name}, "${filename} ${name}");`)
-      .join('\n');
-
-    return `// HMR Setup
-import.meta.hot = window.__vite_hot_context__("${filename}");
-
-${code}
-
-// React Refresh Registration
-if (import.meta.hot) {
-${registrations}
-  import.meta.hot.accept(() => {
-    if (window.$RefreshRuntime$) {
-      window.$RefreshRuntime$.performReactRefresh();
-    }
-  });
-}
-`;
+    return _addReactRefresh(code, filename);
   }
 
   /**
@@ -2420,6 +3748,76 @@ ${registrations}
     }
   }
 
+  /**
+   * Override serveFile to wrap JSON files as ES modules
+   * This is needed because browsers can't dynamically import raw JSON files
+   */
+  protected serveFile(filePath: string): ResponseData {
+    // For JSON files, wrap as ES module so they can be dynamically imported
+    if (filePath.endsWith('.json')) {
+      try {
+        const normalizedPath = this.resolvePath(filePath);
+        const content = this.vfs.readFileSync(normalizedPath);
+
+        // Properly convert content to string
+        // VirtualFS may return string, Buffer, or Uint8Array
+        let jsonContent: string;
+        if (typeof content === 'string') {
+          jsonContent = content;
+        } else if (content instanceof Uint8Array) {
+          // Use TextDecoder for Uint8Array (includes Buffer in browser)
+          jsonContent = new TextDecoder('utf-8').decode(content);
+        } else {
+          // Fallback for other buffer-like objects
+          jsonContent = Buffer.from(content).toString('utf-8');
+        }
+
+        // Wrap JSON as ES module
+        const esModuleContent = `export default ${jsonContent};`;
+        const buffer = Buffer.from(esModuleContent);
+
+        return {
+          statusCode: 200,
+          statusMessage: 'OK',
+          headers: {
+            'Content-Type': 'application/javascript; charset=utf-8',
+            'Content-Length': String(buffer.length),
+            'Cache-Control': 'no-cache',
+          },
+          body: buffer,
+        };
+      } catch (error) {
+        if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+          return this.notFound(filePath);
+        }
+        return this.serverError(error);
+      }
+    }
+
+    // For all other files, use the parent implementation
+    return super.serveFile(filePath);
+  }
+
+  /**
+   * Resolve a path (helper to access protected method from parent)
+   */
+  protected resolvePath(urlPath: string): string {
+    // Remove query string and hash
+    let path = urlPath.split('?')[0].split('#')[0];
+
+    // Normalize path
+    if (!path.startsWith('/')) {
+      path = '/' + path;
+    }
+
+    // Join with root
+    if (this.root !== '/') {
+      path = this.root + path;
+    }
+
+    return path;
+  }
+
   /**
    * Stop the server
    */