SSR and Next.js

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

'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