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 { MobileNav } from "./mobile-nav";
|
||||||
import { site } from "@/content/site";
|
import { site } from "@/content/site";
|
||||||
import { CommandPalette } from "./command-palette";
|
import { CommandPalette } from "./command-palette";
|
||||||
|
import { CommandBarButton } from "./command-bar-button";
|
||||||
|
|
||||||
export function SiteHeader({
|
export function SiteHeader({
|
||||||
locale,
|
locale,
|
||||||
@@ -46,18 +47,7 @@ export function SiteHeader({
|
|||||||
<div className="hidden md:block">
|
<div className="hidden md:block">
|
||||||
<LanguageSwitcher currentLocale={locale} />
|
<LanguageSwitcher currentLocale={locale} />
|
||||||
</div>
|
</div>
|
||||||
<button
|
<CommandBarButton />
|
||||||
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>
|
|
||||||
<MobileNav locale={locale} items={nav} menuLabel={dict.nav.menu} switchLabel={dict.actions.languageSwitch} />
|
<MobileNav locale={locale} items={nav} menuLabel={dict.nav.menu} switchLabel={dict.actions.languageSwitch} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user