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:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user