SSR and Next.js

SSR and Next.js

modern-cmdk/react works with server-side rendering. All components have "use client" directives.

Next.js App Router

// app/components/command-palette.tsx
'use client';

import { Command } from 'modern-cmdk/react';

export function CommandPalette() {
  return (
    <Command.Dialog>
      <Command.Input placeholder="Search..." />
      <Command.List>
        <Command.Empty>No results.</Command.Empty>
        <Command.Item>Settings</Command.Item>
      </Command.List>
    </Command.Dialog>
  );
}

WASM Search with SSR

The WASM engine is browser-only. Use dynamic imports:

'use client';

import { useEffect, useState } from 'react';
import type { SearchEngine } from 'modern-cmdk';

function useWasmSearch() {
  const [engine, setEngine] = useState<SearchEngine | null>(null);

  useEffect(() => {
    import('modern-cmdk-search-wasm')
      .then(({ createWasmSearchEngine }) => createWasmSearchEngine())
      .then(setEngine);
  }, []);

  return engine;
}

Key Points

• All components export "use client" — safe in RSC environments
• The core state machine is isomorphic (no DOM dependency)
• WASM engine must be loaded client-side only
• CSS imports work with Next.js CSS module system