2:I[231,["231","static/chunks/231-7054a12985b3b868.js","173","static/chunks/173-6d8e00193ae3f76c.js","532","static/chunks/app/articles/tailwindreact/page-536bb9f86a8e1d2d.js"],""]
3:I[9275,[],""]
4:I[1343,[],""]
5:I[1747,["231","static/chunks/231-7054a12985b3b868.js","173","static/chunks/173-6d8e00193ae3f76c.js","867","static/chunks/867-a87251d1c6093b7e.js","185","static/chunks/app/layout-9ab2d417c52414ab.js"],"Providers"]
6:I[5107,["231","static/chunks/231-7054a12985b3b868.js","173","static/chunks/173-6d8e00193ae3f76c.js","867","static/chunks/867-a87251d1c6093b7e.js","185","static/chunks/app/layout-9ab2d417c52414ab.js"],"SidebarLayout"]
0:["CNcemyiCksiu8DGDV_gau",[[["",{"children":["articles",{"children":["tailwindreact",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["articles",{"children":["tailwindreact",{"children":["__PAGE__",{},[["$L1",["$","div",null,{"className":"sm:px-8 mt-16 lg:mt-32","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"xl:relative","children":["$","div",null,{"className":"mx-auto max-w-2xl","children":[["$","$L2",null,{"href":"/articles","aria-label":"Go back to articles","className":"group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white ring-1 shadow-md shadow-zinc-800/5 ring-zinc-900/5 transition lg:absolute lg:-left-5 lg:-mt-2 lg:mb-0 xl:-top-1.5 xl:left-0 xl:mt-0 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20","children":["$","svg",null,{"viewBox":"0 0 16 16","fill":"none","aria-hidden":"true","className":"h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-400","children":["$","path",null,{"d":"M7.25 11.25 3.75 8m0 0 3.5-3.25M3.75 8h8.5","strokeWidth":"1.5","strokeLinecap":"round","strokeLinejoin":"round"}]}]}],["$","article",null,{"children":[["$","header",null,{"className":"flex flex-col","children":[["$","h1",null,{"className":"mt-6 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100","children":"Modern UI-Entwicklung mit React, Tailwind CSS und Next.js"}],["$","time",null,{"dateTime":"2025-01-03","className":"order-first flex items-center text-base text-zinc-400 dark:text-zinc-500","children":[["$","span",null,{"className":"h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"}],["$","span",null,{"className":"ml-3","children":"3. Januar 2025"}]]}]]}],["$","div",null,{"className":"mt-8 prose dark:prose-invert","data-mdx-content":true,"children":[["$","p",null,{"children":"Als Frontend-Entwickler bin ich ständig auf der Suche nach dem optimalen Tech-Stack, der Produktivität, Performance und Wartbarkeit vereint. Nach Jahren des Experimentierens mit verschiedenen Frameworks und Bibliotheken habe ich meine ideale Kombination gefunden: React für die Komponenten-Struktur, Tailwind CSS für schnelles und konsistentes Design und Next.js als leistungsstarkes Framework, das alles zusammenhält."}],"\n",["$","h2",null,{"children":"Warum diese Kombination unschlagbar ist"}],"\n",["$","p",null,{"children":"Wenn diese drei Technologien zusammenkommen, entsteht ein Workflow, der sowohl für individuelle Entwickler als auch für Teams außergewöhnlich effizient ist. Hier ist ein einfaches Beispiel für eine Produktkarte, die alle drei Technologien nutzt:"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token comment","children":"// components/ProductCard.jsx"}],"\n",["$","span",null,{"className":"token keyword module","children":"export"}]," ",["$","span",null,{"className":"token keyword module","children":"default"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":["$","span",null,{"className":"token maybe-class-name","children":"ProductCard"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," product ",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n    ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"group relative rounded-lg border border-zinc-200 bg-white p-4 shadow-sm transition-all hover:shadow-md dark:border-zinc-700 dark:bg-zinc-800",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"aspect-w-16 aspect-h-9 mb-3 overflow-hidden rounded-md",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"img"]}],"\n          ",["$","span",null,{"className":"token attr-name","children":"src"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"product",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"imageUrl"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n          ",["$","span",null,{"className":"token attr-name","children":"alt"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"product",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"name"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n          ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"h-full w-full object-cover transition-transform duration-200 group-hover:scale-105",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n        ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"h3"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"text-lg font-medium text-zinc-900 dark:text-zinc-100",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token punctuation","children":"{"}],"product",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"name"}],["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"h3"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"p"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"mt-1 text-sm text-zinc-600 dark:text-zinc-400",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token punctuation","children":"{"}],"product",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"description"}],["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"p"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"mt-3 flex items-center justify-between",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"span"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"font-semibold text-zinc-900 dark:text-zinc-100",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n          "}],["$","span",null,{"className":"token punctuation","children":"{"}],"product",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"price"}],["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token plain-text","children":" €\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"span"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"button"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n          Zum Warenkorb\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"button"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n    "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],"\n  ",["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","p",null,{"children":"Das Schöne an diesem Ansatz ist die klare Trennung von Struktur (React), Styling (Tailwind) und Funktionalität. Und das Beste daran: kein Wechsel zwischen CSS- und JavaScript-Dateien mehr."}],"\n",["$","h2",null,{"children":"Next.js: Das Framework, das alles zusammenbringt"}],"\n",["$","p",null,{"children":"Next.js hat die Art, wie ich React-Anwendungen entwickle, grundlegend verändert. Mit seiner server-seitigen Rendering-Fähigkeit, dem intelligenten Routing und den optimierten Builds sorgt es für unvergleichliche Performance."}],"\n",["$","p",null,{"children":"Hier ist ein Beispiel für eine einfache Next.js-Seite, die Produkte aus einer API lädt:"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token comment","children":"// pages/products.js"}],"\n",["$","span",null,{"className":"token keyword module","children":"import"}]," ",["$","span",null,{"className":"token imports","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," useState ",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token keyword module","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'react'"}],"\n",["$","span",null,{"className":"token keyword module","children":"import"}]," ",["$","span",null,{"className":"token imports","children":["$","span",null,{"className":"token maybe-class-name","children":"ProductCard"}]}]," ",["$","span",null,{"className":"token keyword module","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'@/components/ProductCard'"}],"\n\n",["$","span",null,{"className":"token keyword module","children":"export"}]," ",["$","span",null,{"className":"token keyword module","children":"default"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":["$","span",null,{"className":"token maybe-class-name","children":"ProductsPage"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," initialProducts ",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  ",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"products",["$","span",null,{"className":"token punctuation","children":","}]," setProducts",["$","span",null,{"className":"token punctuation","children":"]"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"useState"}],["$","span",null,{"className":"token punctuation","children":"("}],"initialProducts",["$","span",null,{"className":"token punctuation","children":")"}],"\n  ",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"filter",["$","span",null,{"className":"token punctuation","children":","}]," setFilter",["$","span",null,{"className":"token punctuation","children":"]"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"useState"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"''"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n\n  ",["$","span",null,{"className":"token keyword","children":"const"}]," filteredProducts ",["$","span",null,{"className":"token operator","children":"="}]," products",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"filter"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"product"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}],"\n    product",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"name"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"toLowerCase"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"includes"}],["$","span",null,{"className":"token punctuation","children":"("}],"filter",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"toLowerCase"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n  ",["$","span",null,{"className":"token punctuation","children":")"}],"\n\n  ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n    ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"mb-8 flex flex-col justify-between gap-4 sm:flex-row sm:items-center",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"h1"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n          Unsere Produkte\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"h1"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"w-full max-w-xs",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n          "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}],"\n            ",["$","span",null,{"className":"token attr-name","children":"type"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"text",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n            ",["$","span",null,{"className":"token attr-name","children":"placeholder"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"Produkte suchen...",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n            ",["$","span",null,{"className":"token attr-name","children":"value"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"filter",["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n            ",["$","span",null,{"className":"token attr-name","children":"onChange"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"e"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token function","children":"setFilter"}],["$","span",null,{"className":"token punctuation","children":"("}],"e",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"target"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"value"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n            ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"w-full rounded-md border border-zinc-300 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n          ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token punctuation","children":"{"}],"filteredProducts",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"map"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":"product"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n          ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"ProductCard"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"key"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"product",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"id"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"product"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"product",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],"\n        ",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n    "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],"\n  ",["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n\n",["$","span",null,{"className":"token keyword module","children":"export"}]," ",["$","span",null,{"className":"token keyword","children":"async"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":"getStaticProps"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  ",["$","span",null,{"className":"token comment","children":"// In einer realen Anwendung würde dies von einer API kommen"}],"\n  ",["$","span",null,{"className":"token keyword","children":"const"}]," initialProducts ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"\n    ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n      ",["$","span",null,{"className":"token literal-property property","children":"id"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"1"}],["$","span",null,{"className":"token punctuation","children":","}],"\n      ",["$","span",null,{"className":"token literal-property property","children":"name"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"Entwickler-Notebook\""}],["$","span",null,{"className":"token punctuation","children":","}],"\n      ",["$","span",null,{"className":"token literal-property property","children":"description"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"Leistungsstarkes Notebook für Programmierer\""}],["$","span",null,{"className":"token punctuation","children":","}],"\n      ",["$","span",null,{"className":"token literal-property property","children":"price"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"1499"}],["$","span",null,{"className":"token punctuation","children":","}],"\n      ",["$","span",null,{"className":"token literal-property property","children":"imageUrl"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"/images/products/laptop.jpg\""}],"\n    ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    ",["$","span",null,{"className":"token comment","children":"// Weitere Produkte..."}],"\n  ",["$","span",null,{"className":"token punctuation","children":"]"}],"\n\n  ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n    ",["$","span",null,{"className":"token literal-property property","children":"props"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n      initialProducts\n    ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    ",["$","span",null,{"className":"token literal-property property","children":"revalidate"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"60"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"60"}]," ",["$","span",null,{"className":"token comment","children":"// Jede Stunde aktualisieren"}],"\n  ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","h2",null,{"children":"Tailwind CSS: Effizienz und Konsistenz im Design"}],"\n",["$","p",null,{"children":"Tailwind CSS hat meinen Design-Workflow revolutioniert. Der utility-first Ansatz ermöglicht es mir, schnell und konsistent zu gestalten, ohne zwischen CSS-Dateien hin und her zu wechseln."}],"\n",["$","p",null,{"children":"Viele haben anfängliche Bedenken wegen der \"sperrigen\" Klassen-Attribute. Aber die Produktivitätssteigerung ist enorm. Mit dem neuen JIT-Compiler (Just-In-Time) ist Tailwind zudem schneller und leichter denn je."}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token comment","children":"// components/Alert.jsx"}],"\n",["$","span",null,{"className":"token keyword module","children":"export"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":["$","span",null,{"className":"token maybe-class-name","children":"Alert"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," type ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token string","children":"'info'"}],["$","span",null,{"className":"token punctuation","children":","}]," title",["$","span",null,{"className":"token punctuation","children":","}]," children ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  ",["$","span",null,{"className":"token keyword","children":"const"}]," styles ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n    ",["$","span",null,{"className":"token literal-property property","children":"info"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'bg-blue-50 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    ",["$","span",null,{"className":"token literal-property property","children":"success"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300'"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    ",["$","span",null,{"className":"token literal-property property","children":"warning"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'bg-yellow-50 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300'"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    ",["$","span",null,{"className":"token literal-property property","children":"error"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300'"}],["$","span",null,{"className":"token punctuation","children":","}],"\n  ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n\n  ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n    ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token template-string","children":[["$","span",null,{"className":"token template-punctuation string","children":"`"}],["$","span",null,{"className":"token string","children":"rounded-md p-4 "}],["$","span",null,{"className":"token interpolation","children":[["$","span",null,{"className":"token interpolation-punctuation punctuation","children":"$${"}],"styles",["$","span",null,{"className":"token punctuation","children":"["}],"type",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token interpolation-punctuation punctuation","children":"}"}]]}],["$","span",null,{"className":"token template-punctuation string","children":"`"}]]}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"flex",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"flex-shrink-0",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n          "}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token comment","children":"/* Icon based on type */"}],["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"ml-3",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n          "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"h3"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"text-sm font-medium",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token punctuation","children":"{"}],"title",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"h3"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n          "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"mt-2 text-sm opacity-90",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token punctuation","children":"{"}],"children",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n        "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n    "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],"\n  ",["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","p",null,{"children":"Dank der intelligenten Tailwind-Konfiguration kann ich ein Design-System aufbauen, das konsistent in der gesamten Anwendung verwendet wird."}],"\n",["$","h2",null,{"children":"React: Komponenten-basierte Architektur"}],"\n",["$","p",null,{"children":"Was ich an React am meisten schätze, ist die Möglichkeit, komplexe UIs in kleine, wiederverwendbare Komponenten zu zerlegen. Dies führt zu saubererem, wartbarerem Code und weniger Redundanz."}],"\n",["$","p",null,{"children":"Die Einführung von React Hooks hat die Art, wie wir Komponenten schreiben, nochmals vereinfacht:"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token comment","children":"// hooks/useLocalStorage.js"}],"\n",["$","span",null,{"className":"token keyword module","children":"import"}]," ",["$","span",null,{"className":"token imports","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," useState",["$","span",null,{"className":"token punctuation","children":","}]," useEffect ",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token keyword module","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'react'"}],"\n\n",["$","span",null,{"className":"token keyword module","children":"export"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":"useLocalStorage"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":["key",["$","span",null,{"className":"token punctuation","children":","}]," initialValue"]}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  ",["$","span",null,{"className":"token comment","children":"// Zustand initialisieren"}],"\n  ",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"storedValue",["$","span",null,{"className":"token punctuation","children":","}]," setStoredValue",["$","span",null,{"className":"token punctuation","children":"]"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"useState"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n    ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token keyword","children":"typeof"}]," ",["$","span",null,{"className":"token dom variable","children":"window"}]," ",["$","span",null,{"className":"token operator","children":"==="}]," ",["$","span",null,{"className":"token string","children":"'undefined'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n      ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," initialValue\n    ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n\n    ",["$","span",null,{"className":"token keyword control-flow","children":"try"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n      ",["$","span",null,{"className":"token keyword","children":"const"}]," item ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token dom variable","children":"window"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"localStorage"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"getItem"}],["$","span",null,{"className":"token punctuation","children":"("}],"key",["$","span",null,{"className":"token punctuation","children":")"}],"\n      ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," item ",["$","span",null,{"className":"token operator","children":"?"}]," ",["$","span",null,{"className":"token known-class-name class-name","children":"JSON"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"parse"}],["$","span",null,{"className":"token punctuation","children":"("}],"item",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":":"}]," initialValue\n    ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"catch"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"error",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n      ",["$","span",null,{"className":"token console class-name","children":"console"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"error"}],["$","span",null,{"className":"token punctuation","children":"("}],"error",["$","span",null,{"className":"token punctuation","children":")"}],"\n      ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," initialValue\n    ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n  ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n\n  ",["$","span",null,{"className":"token comment","children":"// Wert im localStorage speichern, wenn sich storedValue ändert"}],"\n  ",["$","span",null,{"className":"token function","children":"useEffect"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n    ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token keyword","children":"typeof"}]," ",["$","span",null,{"className":"token dom variable","children":"window"}]," ",["$","span",null,{"className":"token operator","children":"!=="}]," ",["$","span",null,{"className":"token string","children":"'undefined'"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n      ",["$","span",null,{"className":"token keyword control-flow","children":"try"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n        ",["$","span",null,{"className":"token dom variable","children":"window"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"localStorage"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setItem"}],["$","span",null,{"className":"token punctuation","children":"("}],"key",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token known-class-name class-name","children":"JSON"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"stringify"}],["$","span",null,{"className":"token punctuation","children":"("}],"storedValue",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n      ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token keyword control-flow","children":"catch"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"error",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n        ",["$","span",null,{"className":"token console class-name","children":"console"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"error"}],["$","span",null,{"className":"token punctuation","children":"("}],"error",["$","span",null,{"className":"token punctuation","children":")"}],"\n      ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n    ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n  ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"key",["$","span",null,{"className":"token punctuation","children":","}]," storedValue",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n\n  ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"storedValue",["$","span",null,{"className":"token punctuation","children":","}]," setStoredValue",["$","span",null,{"className":"token punctuation","children":"]"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","p",null,{"children":"Dieser Hook kann nun überall in der Anwendung verwendet werden, um Zustand persistent im Browser zu speichern."}],"\n",["$","h2",null,{"children":"Praktische Projektstruktur"}],"\n",["$","p",null,{"children":"Ein weiterer Vorteil dieses Stacks ist die klare Projektstruktur, die sich daraus ergibt. So sieht ein typisches Projekt bei mir aus:"}],"\n",["$","pre",null,{"children":["$","code",null,{"children":"├── components/        # Wiederverwendbare UI-Komponenten\n│   ├── ui/            # Basis-UI-Komponenten (Buttons, Cards, etc.)\n│   ├── layout/        # Layout-Komponenten (Header, Footer, etc.)\n│   └── features/      # Feature-spezifische Komponenten\n├── hooks/             # Eigene React Hooks\n├── lib/               # Hilfsfunktionen und Utilities\n├── pages/             # Next.js-Seiten und API-Routes\n├── public/            # Statische Assets\n├── styles/            # Globale Styles und Tailwind-Konfiguration\n└── context/           # React Context für globalen Zustand\n"}]}],"\n",["$","h2",null,{"children":"Performance-Optimierung mit Next.js"}],"\n",["$","p",null,{"children":"Next.js bietet zahlreiche Möglichkeiten zur Performance-Optimierung. Eines meiner Lieblingsfeatures ist die automatische Bildoptimierung:"}],"\n",["$","pre",null,{"className":"language-jsx","children":["$","code",null,{"className":"language-jsx","children":[["$","span",null,{"className":"token keyword module","children":"import"}]," ",["$","span",null,{"className":"token imports","children":["$","span",null,{"className":"token maybe-class-name","children":"Image"}]}]," ",["$","span",null,{"className":"token keyword module","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'next/image'"}],"\n\n",["$","span",null,{"className":"token keyword module","children":"export"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":["$","span",null,{"className":"token maybe-class-name","children":"OptimizedImage"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token parameter","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," src",["$","span",null,{"className":"token punctuation","children":","}]," alt ",["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  ",["$","span",null,{"className":"token keyword control-flow","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n    ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}]," ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"relative h-64 w-full overflow-hidden rounded-lg",["$","span",null,{"className":"token punctuation","children":"\""}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n      "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Image"}]]}],"\n        ",["$","span",null,{"className":"token attr-name","children":"src"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"src",["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n        ",["$","span",null,{"className":"token attr-name","children":"alt"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"alt",["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n        ",["$","span",null,{"className":"token attr-name","children":"fill"}],"\n        ",["$","span",null,{"className":"token attr-name","children":"sizes"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n        ",["$","span",null,{"className":"token attr-name","children":"className"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"object-cover",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n        ",["$","span",null,{"className":"token attr-name","children":"priority"}],["$","span",null,{"className":"token script language-javascript","children":[["$","span",null,{"className":"token script-punctuation punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token boolean","children":"false"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n        ",["$","span",null,{"className":"token attr-name","children":"loading"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"lazy",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n      ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n    "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"</"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],"\n  ",["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]}],"\n",["$","p",null,{"children":"Diese Komponente optimiert Bilder automatisch, reduziert ihre Größe, lädt sie verzögert und bietet responsive Größenoptionen – alles ohne zusätzliche Bibliotheken."}],"\n",["$","h2",null,{"children":"Das Beste aus beiden Welten: SSR und CSR"}],"\n",["$","p",null,{"children":"Mit Next.js kann ich wählen, welcher Rendering-Ansatz für jede Seite am besten geeignet ist:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","code",null,{"children":"getStaticProps"}]," und ",["$","code",null,{"children":"getStaticPaths"}]," für vollständig statische Seiten"]}],"\n",["$","li",null,{"children":[["$","code",null,{"children":"getServerSideProps"}]," für dynamische, serverseitig gerenderte Seiten"]}],"\n",["$","li",null,{"children":"Client-seitige Datenabfrage für interaktive Bereiche"}],"\n"]}],"\n",["$","p",null,{"children":"Diese Flexibilität ist genau das, was moderne Web-Anwendungen brauchen – die perfekte Balance zwischen Performance und Interaktivität."}],"\n",["$","h2",null,{"children":"Fazit"}],"\n",["$","p",null,{"children":"Die Kombination aus React, Tailwind CSS und Next.js bietet mir alles, was ich für schnelle, effiziente und wartbare Frontend-Entwicklung benötige. Nach mehr als fünf Jahren Entwicklungserfahrung ist dies der Stack, auf den ich mich für nahezu jedes Projekt verlasse."}],"\n",["$","p",null,{"children":"Die drei Technologien ergänzen sich perfekt und ermöglichen es mir, mich auf das Wesentliche zu konzentrieren: großartige Benutzererfahrungen zu schaffen. Weniger Zeit mit Konfiguration und CSS-Debugging bedeutet mehr Zeit für Features und Optimierungen, die wirklich zählen."}],"\n",["$","p",null,{"children":"Wenn du noch nicht mit dieser Kombination gearbeitet hast, kann ich sie nur wärmstens empfehlen. Der anfängliche Lernaufwand wird durch die langfristigen Vorteile bei weitem aufgewogen."}]]}]]}]]}]}]}]}]}]}]],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","articles","children","tailwindreact","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","articles","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},[["$","html",null,{"lang":"en","className":"h-full antialiased","suppressHydrationWarning":true,"children":["$","body",null,{"className":"flex h-full bg-zinc-50 dark:bg-black","children":["$","$L5",null,{"children":["$","div",null,{"className":"flex w-full","children":["$","div",null,{"className":"relative min-h-screen","children":[["$","div",null,{"className":"fixed inset-0 bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"}],["$","div",null,{"className":"relative","children":["$","$L6",null,{"children":["$","div",null,{"className":"flex flex-col min-h-screen","children":[["$","main",null,{"className":"flex-1 px-4 sm:px-6 lg:px-8 py-8","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"sm:px-8 flex h-full items-center pt-16 sm:pt-32","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"flex flex-col items-center","children":[["$","p",null,{"className":"text-base font-semibold text-teal-500 dark:text-teal-400","children":"404"}],["$","h1",null,{"className":"mt-4 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100","children":"Seite nicht gefunden"}],["$","p",null,{"className":"mt-4 text-base text-zinc-600 dark:text-zinc-400","children":"Entschuldigung, die gesuchte Seite konnte nicht gefunden werden."}],["$","div",null,{"className":"mt-8 flex space-x-4","children":[["$","$L2",null,{"className":"inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70 transition-all duration-300 hover:scale-105","href":"/","children":"Zurück zur Startseite"}],["$","$L2",null,{"className":"inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70 transition-all duration-300 hover:scale-105","href":"/projects","children":"Projekte entdecken"}]]}],["$","p",null,{"className":"mt-12 text-sm text-zinc-500 dark:text-zinc-500","children":["Du suchst etwas Bestimmtes? Schreib mir gerne eine"," ",["$","a",null,{"href":"mailto:christianc.pana@icloud.com","className":"text-teal-500 underline hover:text-teal-600 dark:text-teal-400 dark:hover:text-teal-300","children":"E-Mail"}],"."]}]]}]}]}]}]}],"notFoundStyles":[],"styles":null}]}]}],["$","footer",null,{"className":"mt-32 flex-none","children":["$","div",null,{"className":"sm:px-8","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"border-t border-zinc-100 pt-10 pb-16 dark:border-zinc-700/40","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"flex flex-col items-center justify-between gap-6 md:flex-row","children":[["$","div",null,{"className":"flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200","children":[["$","$L2",null,{"href":"/about","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"Über mich"}],["$","$L2",null,{"href":"/projects","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"Projekte"}],["$","$L2",null,{"href":"/uses","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"Hardware"}]]}],["$","p",null,{"className":"text-sm text-zinc-400 dark:text-zinc-500","children":["© ",2025," Christian Pana. All rights reserved."]}]]}]}]}]}]}]}]}]]}]}]}]]}]}]}]}]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"./_next/static/css/7cfd9be33ea86463.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Modern UI-Entwicklung mit React, Tailwind CSS und Next.js - Christian Pana"}],["$","meta","3",{"name":"description","content":"Wie ich mit dem perfekten Technologie-Stack schnellere, bessere und wartbare Frontend-Anwendungen entwickle: Eine Kombination aus React für Komponenten, Tailwind CSS für Design und Next.js für Performance."}],["$","link","4",{"rel":"alternate","type":"application/rss+xml","href":"https://softflow.dev/feed.xml"}],["$","link","5",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"4096x4096"}]]
1:null