almostnode 0.2.5 → 0.2.6

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

@@ -7,6 +7,7 @@ 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';
 
 // Check if we're in a real browser environment (not jsdom or Node.js)
 const isBrowser = typeof window !== 'undefined' &&
@@ -77,6 +78,8 @@ 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;
 }
 
 /**
@@ -283,25 +286,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'));
   };
@@ -670,6 +679,323 @@ 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;
+`;
+
 /**
  * NextDevServer - A lightweight Next.js-compatible development server
  *
@@ -718,6 +1044,18 @@ 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 = '';
+
   constructor(vfs: VirtualFS, options: NextDevServerOptions) {
     super(vfs, options);
     this.options = options;
@@ -733,6 +1071,131 @@ 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 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
+    }
+  }
+
+  /**
+   * 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 +1225,58 @@ 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)});
 </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
    */
@@ -813,13 +1306,39 @@ 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);
+        }
+      }
+    }
 
     // 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);
@@ -851,6 +1370,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 +1409,18 @@ 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;
       default:
         return this.notFound(pathname);
     }
@@ -897,6 +1438,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/
    */
@@ -1510,7 +2077,7 @@ export class NextDevServer extends DevServer {
   /**
    * Resolve App Router route to page and layout files
    */
-  private resolveAppRoute(pathname: string): { page: string; layouts: string[] } | null {
+  private resolveAppRoute(pathname: string): { page: string; layouts: string[]; params: Record<string, string | string[]> } | null {
     const extensions = ['.jsx', '.tsx', '.js', '.ts'];
     const segments = pathname === '/' ? [] : pathname.split('/').filter(Boolean);
 
@@ -1545,7 +2112,8 @@ export class NextDevServer extends DevServer {
     for (const ext of extensions) {
       const pagePath = `${dirPath}/page${ext}`;
       if (this.exists(pagePath)) {
-        return { page: pagePath, layouts };
+        // Static route - no params
+        return { page: pagePath, layouts, params: {} };
       }
     }
 
@@ -1555,18 +2123,20 @@ export class NextDevServer extends DevServer {
 
   /**
    * Resolve dynamic App Router routes like /app/[id]/page.jsx
+   * Also extracts route params from dynamic segments
    */
   private resolveAppDynamicRoute(
     pathname: string,
     segments: string[]
-  ): { page: string; layouts: string[] } | null {
+  ): { page: string; layouts: string[]; params: Record<string, string | string[]> } | null {
     const extensions = ['.jsx', '.tsx', '.js', '.ts'];
 
     const tryPath = (
       dirPath: string,
       remainingSegments: string[],
-      layouts: string[]
-    ): { page: string; layouts: string[] } | null => {
+      layouts: string[],
+      params: Record<string, string | string[]>
+    ): { page: string; layouts: string[]; params: Record<string, string | string[]> } | null => {
       // Check for layout at current level
       for (const ext of extensions) {
         const layoutPath = `${dirPath}/layout${ext}`;
@@ -1580,7 +2150,7 @@ export class NextDevServer extends DevServer {
         for (const ext of extensions) {
           const pagePath = `${dirPath}/page${ext}`;
           if (this.exists(pagePath)) {
-            return { page: pagePath, layouts };
+            return { page: pagePath, layouts, params };
           }
         }
         return null;
@@ -1591,18 +2161,34 @@ 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 dynamic segments
       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)) {
+              // Extract param name from [...slug]
+              const paramName = entry.slice(4, -1);
+              // Catch-all captures all remaining segments
+              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 result = tryPath(dynamicPath, rest, layouts);
+              // Extract param name from [id]
+              const paramName = entry.slice(1, -1);
+              const newParams = { ...params, [paramName]: current };
+              const result = tryPath(dynamicPath, rest, layouts, newParams);
               if (result) return result;
             }
           }
@@ -1624,14 +2210,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: { page: string; layouts: string[]; params: Record<string, string | string[]> },
     pathname: string
   ): Promise<string> {
     // Use virtual server prefix for all file imports so the service worker can intercept them
@@ -1662,6 +2248,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 +2260,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 +2282,11 @@ 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"
     }
   }
   </script>
@@ -1706,6 +2300,39 @@ 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}';
+
+    // 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 +2399,60 @@ export class NextDevServer extends DevServer {
       return layouts;
     }
 
+    // Wrapper for async Server Components
+    function AsyncComponent({ component: Component, pathname, search }) {
+      const [content, setContent] = React.useState(null);
+      const [error, setError] = React.useState(null);
+
+      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) {
+            console.error('[AsyncComponent] Error rendering:', e);
+            if (!cancelled) setError(e);
+          }
+        }
+        render();
+        return () => { cancelled = true; };
+      }, [Component, pathname, search]);
+
+      if (error) {
+        return React.createElement('div', { style: { color: 'red', padding: '20px' } },
+          'Error: ' + error.message
+        );
+      }
+      if (!content) {
+        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 +2464,35 @@ 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)]);
+            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 });
       for (let i = layouts.length - 1; i >= 0; i--) {
         content = React.createElement(layouts[i], null, content);
       }
@@ -1962,6 +2652,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 +2664,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 +2678,12 @@ 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"
     }
   }
   </script>
@@ -2106,6 +2805,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 +2871,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 });
@@ -2191,12 +2924,15 @@ export class NextDevServer extends DevServer {
     // CSS imports in ESM would fail with MIME type errors
     const codeWithoutCssImports = this.stripCssImports(code);
 
+    // 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,12 +2942,80 @@ 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;
+  }
+
+  /**
+   * Redirect bare npm package imports to esm.sh CDN
+   * e.g., import { Crisp } from "crisp-sdk-web" -> import { Crisp } from "https://esm.sh/crisp-sdk-web?external=react"
+   *
+   * IMPORTANT: We redirect ALL npm packages to esm.sh URLs (including React)
+   * because import maps don't work reliably for dynamically imported modules.
+   */
+  private redirectNpmImports(code: string): string {
+    // Explicit mappings for common packages (ensures correct esm.sh URLs)
+    const explicitMappings: Record<string, string> = {
+      'react': 'https://esm.sh/react@18.2.0?dev',
+      'react/jsx-runtime': 'https://esm.sh/react@18.2.0&dev/jsx-runtime',
+      'react/jsx-dev-runtime': 'https://esm.sh/react@18.2.0&dev/jsx-dev-runtime',
+      'react-dom': 'https://esm.sh/react-dom@18.2.0?dev',
+      'react-dom/client': 'https://esm.sh/react-dom@18.2.0/client?dev',
+    };
+
+    // Packages that are local or have custom shims (NOT npm packages)
+    const localPackages = new Set([
+      'next/link', 'next/router', 'next/head', 'next/navigation',
+      'next/dynamic', 'next/image', 'next/script', 'next/font/google',
+      'convex/_generated/api'
+    ]);
+
+    // Pattern to match import statements with bare package specifiers
+    // Matches: from "package" or from 'package' where package doesn't start with . / or http
+    const importPattern = /(from\s*['"])([^'"./][^'"]*?)(['"])/g;
+
+    return code.replace(importPattern, (match, prefix, packageName, suffix) => {
+      // Skip if already a URL or local virtual path
+      if (packageName.startsWith('http://') ||
+          packageName.startsWith('https://') ||
+          packageName.startsWith('/__virtual__')) {
+        return match;
+      }
+
+      // Check explicit mappings first
+      if (explicitMappings[packageName]) {
+        return `${prefix}${explicitMappings[packageName]}${suffix}`;
+      }
+
+      // Skip local/shimmed packages (they're handled via import map or virtual paths)
+      if (localPackages.has(packageName)) {
+        return match;
+      }
+
+      // Check if it's a subpath import of a local package
+      const basePkg = packageName.includes('/') ? packageName.split('/')[0] : packageName;
+
+      // Handle scoped packages (@org/pkg)
+      const isScoped = basePkg.startsWith('@');
+      const scopedBasePkg = isScoped && packageName.includes('/')
+        ? packageName.split('/').slice(0, 2).join('/')
+        : basePkg;
+
+      if (localPackages.has(scopedBasePkg)) {
+        return match;
+      }
+
+      // Redirect to esm.sh with external=react to avoid bundling React twice
+      const esmUrl = `https://esm.sh/${packageName}?external=react`;
+      return `${prefix}${esmUrl}${suffix}`;
+    });
   }
 
   /**
@@ -2221,13 +3025,18 @@ export class NextDevServer extends DevServer {
   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>)');
+    // NOTE: Don't match trailing whitespace (\s*) as it would consume newlines
+    // and break subsequent imports that start on the next line
+    return code.replace(/import\s+['"][^'"]+\.css['"]\s*;?/g, '');
   }
 
   /**
    * 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 +3051,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',
@@ -2254,7 +3063,7 @@ export class NextDevServer extends DevServer {
     }
 
     // Simple ESM to CJS transform for Node.js/test environment
-    let transformed = code;
+    let transformed = codeWithResolvedAliases;
 
     // Convert: import X from 'Y' -> const X = require('Y')
     transformed = transformed.replace(
@@ -2420,6 +3229,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
    */