⚡Vibe Coding

Filter & Sortierung bauen

Daten filtern wie ein Profi

Filter und Sortierung machen den Unterschied zwischen einer Spielzeug-App und einem echten Produkt. Mit URL-Search-Params, Server-Side Filtering und einer sauberen UI baust du Filter die skalieren.

Pro-Tip — Der schnelle Weg
Speichere alle Filter in der URL mit useSearchParams. So bleiben Filter beim Neuladen erhalten und Nutzer koennen gefilterte Ansichten teilen.
Seite 1
1

Filter-State in URL

Nutze URL Search Params statt useState fuer Filter. So bleiben sie beim Refresh erhalten und sind teilbar.

'use client'
import { useSearchParams, useRouter } from 'next/navigation'


function Filters() {
 const searchParams = useSearchParams()
 const router = useRouter()
 const status = searchParams.get('status') || 'all'


 function setFilter(key: string, value: string) {
 const params = new URLSearchParams(searchParams)
 if (value === 'all') params.delete(key)
 else params.set(key, value)
 router.push(`?${params.toString()}`)
 }


 return (
 <select value={status} onChange={e => setFilter('status', e.target.value)}>
 <option value='all'>Alle</option>
 <option value='aktiv'>Aktiv</option>
 <option value='inaktiv'>Inaktiv</option>
 </select>
 )
}
2

Server-Side Filtering

Lese die Search Params auf dem Server und filtere in der Datenbank. Das ist schneller als Client-Side Filtering bei grossen Datenmengen.

// app/posts/page.tsx (Server Component)
export default async function PostsPage({ searchParams }) {
 const status = searchParams.status
 let query = supabase.from('posts').select()
 if (status && status !== 'all') {
 query = query.eq('status', status)
 }
 const { data } = await query
 return <PostList posts={data} />
}
3

Sortierung einbauen

Fuege sort und order Parameter hinzu. Klickbare Spaltenheader wechseln zwischen aufsteigend, absteigend und unsortiert.

const sort = searchParams.get('sort') || 'created_at'
const order = searchParams.get('order') || 'desc'


const { data } = await supabase
 .from('posts')
 .select()
 .order(sort, { ascending: order === 'asc' })
4

Multi-Filter UI

Nutze Shadcn Select, Popover und Badge Komponenten fuer eine saubere Filter-Leiste. Zeige aktive Filter als Badges mit X-Button zum Entfernen.

npx shadcn@latest add select popover badge
5

Reset und Presets

Biete einen 'Alle Filter zuruecksetzen' Button an und speichere haeufig genutzte Filter-Kombinationen als Presets. Nutzer lieben es ihre Ansichten zu speichern.

Seite 2
Warum das funktioniert
  • URL-Filter ueberleben Page Refreshes und sind teilbar
  • Server-Side Filtering skaliert fuer Millionen Datensaetze
  • Aktive Filter als Badges geben sofortigen Ueberblick
  • Filter-Presets sparen wiederkehrenden Nutzern taeglich Zeit
Tipps
  • URL-basierte Filter sind SEO-freundlich und bookmarkbar
  • Zeige die Anzahl der gefilterten Ergebnisse in Echtzeit
  • Deaktiviere Filter-Optionen die 0 Ergebnisse liefern wuerden
  • Mobile: nutze ein Filter-Sheet statt eine breite Filter-Leiste
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen