Oberflächeninteraktion

:root {
  --primary: oklch(0.7 0.15 200);
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  --border: oklch(0.25 0 0);
  /* ... weitere Farbvariablen */
}

// app/layout.tsx
import { ThemeProvider } from '@/components/theme-provider'

export default function RootLayout({ children }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  )
}

.dark {
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  /* Alle Farbvariablen im Dunkelmodus */
}

// Vollständiges Beispiel einer Formular-Komponente
'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'

const formSchema = z.object({
  username: z.string().min(2, 'Der Benutzername muss mindestens 2 Zeichen lang sein'),
  email: z.string().email('Ungültige E-Mail-Adresse'),
})

export function UserForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: '',
      email: '',
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Benutzername</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Senden</Button>
      </form>
    </Form>
  )
}

// Verwenden Sie tabIndex, um die Tab-Reihenfolge zu steuern
<button tabIndex={1}>Erster</button>
<button tabIndex={2}>Zweiter</button>

// Nicht interaktive Elemente überspringen
<div tabIndex={-1}>Dieses Element überspringen</div>

// Aus der Tab-Reihenfolge entfernen (nicht empfohlen, außer wenn nötig)
<button tabIndex={-1}>Über Tab nicht erreichbar</button>

// Fokusfalle (Focus Trap) - in Modals verwendet
import { FocusTrap } from '@radix-ui/react-focus-trap'

<FocusTrap>
  <Dialog>
    {/* Der Fokus ist auf den Dialog beschränkt */}
  </Dialog>
</FocusTrap>

// Fokus-sichtbare Stile
<button className="focus-visible:ring-2 focus-visible:ring-primary">
  {/* Fokus-Ring bei Tastaturnavigation anzeigen */}
</button>

// aria-label: gibt einem Element eine Beschriftung
<button aria-label="Dialog schließen">
  <X />
</button>

// aria-labelledby: verweist auf die ID eines anderen Elements
<div aria-labelledby="dialog-title">
  <h2 id="dialog-title">Dialogtitel</h2>
</div>

// aria-describedby: bietet eine zusätzliche Beschreibung
<input 
  aria-describedby="email-help"
  aria-invalid={hasError}
/>
<span id="email-help">Bitte geben Sie eine gültige E-Mail-Adresse ein</span>

// Semantische Tags verwenden
<nav>Navigation</nav>
<main>Hauptinhalt</main>
<article>Artikel</article>
<section>Abschnitt</section>
<aside>Seitenleiste</aside>
<header>Kopfbereich</header>
<footer>Fußzeile</footer>

// Vermeiden: div anstelle semantischer Tags verwenden
<div className="nav"> {/* Nicht empfohlen */}
<nav> {/* Empfohlen */}

// Verwenden Sie das role-Attribut (wenn semantische Tags nicht verfügbar sind)
<div role="button" tabIndex={0} onClick={handleClick}>
  Benutzerdefinierte Schaltfläche
</div>

<div role="alert" aria-live="polite">
  Wichtiger Hinweis
</div>

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  {/* Modaler Dialog */}
</div>

// Fehler: Status nur mit Farbe anzeigen
<span className="text-red-500">Fehler</span>

// Korrekt: Farbe + Symbol/Text
<span className="text-red-500 flex items-center gap-1">
  <AlertCircle />
  Fehler: Bitte geben Sie einen gültigen Wert ein
</span>

// memo verwenden, um unnötige Re-Renders zu vermeiden
const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* komplexes Rendering */}</div>
})

// useMemo verwenden, um berechnete Ergebnisse zu cachen
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

// useCallback verwenden, um Funktionen zu cachen
const handleClick = useCallback(() => {
  doSomething(id)
}, [id])

// Verwenden Sie react-window oder react-virtualized
import { FixedSizeList } from 'react-window'

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {Row}
</FixedSizeList>

// Komponente dynamisch importieren
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false, // falls Sie SSR deaktivieren müssen
})

// Code-Splitting auf Routenebene (von Next.js automatisch gehandhabt)
// app/dashboard/page.tsx wird automatisch aufgeteilt

// Automatische Optimierung durch die Next.js Image-Komponente
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // Bild above the fold
  loading="lazy" // Bild below the fold
  placeholder="blur" // unscharfer Platzhalter
/>

// Unterstützt moderne Formate wie WebP und AVIF
// Generiert automatisch responsive Bilder

// Use next/font to optimize fonts
import { GeistSans } from 'next/font/google'

const geistSans = GeistSans({
  subsets: ['latin'],
  display: 'swap', // Font loading strategy
  preload: true,
})

// Font subsetting, load only the required characters

// Drittanbieter-Domains vorverbinden
<link rel="preconnect" href="https://fonts.googleapis.com" />

// Kritische Ressourcen vorladen
<link rel="preload" href="/fonts/geist.woff2" as="font" />

// Ressourcen der nächsten Seite vorab abrufen
<link rel="prefetch" href="/dashboard" />