fix(react): extract ⌘K-button to client component

Server-Components dürfen in Next.js 16 keine Event-Handler an DOM-Elemente
oder Client-Komponenten weitergeben. Site-Header war Server-Component mit
onClick={dispatchEvent(...)} — das hat alle /ueber-mich, /projekte,
/projekte/[slug], /en mit 500er geworfen (nur / und /admin/login blieben
200, weil sie kein Site-Header-Render nutzen bzw. ein anderes Layout).

Fix: �K-Button in eigene 'use client'-Datei ausgelagert (command-bar-button.tsx)
und im Header eingebunden. Nach dem Fix: alle Routen wieder 200.
This commit is contained in:
Jan Wagner
2026-08-31 21:00:20 +02:00
parent 6cdd8438ae
commit 88b3af4ba8
2 changed files with 22 additions and 12 deletions
+20
View File
@@ -0,0 +1,20 @@
"use client";
// Kleine Client-Component für den ⌘K-Button im Header.
// Dispatcht ein Synthetic-KeyboardEvent, das der Command-Palette-Listener fängt.
export function CommandBarButton({ ariaLabel = "Command palette öffnen" }: { ariaLabel?: string }) {
return (
<button
type="button"
aria-label={ariaLabel}
data-cursor="hover"
onClick={() => {
window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }));
}}
className="flex items-center gap-1.5 rounded border border-hairline bg-[color-mix(in_oklab,var(--panel)_50%,transparent)] px-2.5 py-1.5 font-mono text-xs text-muted transition-colors hover:border-accent hover:text-[var(--fg)]"
>
<span className="font-mono text-base leading-none"></span>
<span>K</span>
</button>
);
}
+2 -12
View File
@@ -6,6 +6,7 @@ import { LanguageSwitcher } from "./language-switcher";
import { MobileNav } from "./mobile-nav";
import { site } from "@/content/site";
import { CommandPalette } from "./command-palette";
import { CommandBarButton } from "./command-bar-button";
export function SiteHeader({
locale,
@@ -46,18 +47,7 @@ export function SiteHeader({
<div className="hidden md:block">
<LanguageSwitcher currentLocale={locale} />
</div>
<button
type="button"
aria-label="Command palette öffnen"
data-cursor="hover"
onClick={() => {
window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }));
}}
className="flex items-center gap-1.5 rounded border border-hairline bg-[color-mix(in_oklab,var(--panel)_50%,transparent)] px-2.5 py-1.5 font-mono text-xs text-muted transition-colors hover:border-accent hover:text-[var(--fg)]"
>
<span className="font-mono text-base leading-none"></span>
<span>K</span>
</button>
<CommandBarButton />
<MobileNav locale={locale} items={nav} menuLabel={dict.nav.menu} switchLabel={dict.actions.languageSwitch} />
</div>
</div>