Next.js, Tailwind CSS ve shadcn/ui ile Modern Web Tasarımı

1import { Button } from '@/components/ui/button';
2import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
3
4export function HeroSection() {
5  return (
6    <section className="container mx-auto px-4 py-20">
7      <div className="max-w-4xl mx-auto text-center space-y-8">
8        {/* Gradient başlık - Tailwind utilities */}
9        <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
10          Modern Web Tasarımına Hoş Geldiniz
11        </h1>
12
13        <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
14          Next.js, Tailwind CSS ve shadcn/ui ile profesyonel, performanslı
15          ve güzel web uygulamaları oluşturun.
16        </p>
17
18        {/* shadcn Button component'i */}
19        <div className="flex gap-4 justify-center">
20          <Button size="lg" className="text-lg">
21            Hemen Başla
22          </Button>
23          <Button size="lg" variant="outline" className="text-lg">
24            Daha Fazla Öğren
25          </Button>
26        </div>
27
28        {/* shadcn Card component'i */}
29        <div className="grid md:grid-cols-3 gap-6 mt-16">
30          <Card>
31            <CardHeader>
32              <CardTitle>⚡ Super Hızlı</CardTitle>
33              <CardDescription>
34                Server Components ile lightning-fast yükleme
35              </CardDescription>
36            </CardHeader>
37            <CardContent>
38              <p className="text-sm text-muted-foreground">
39                Next.js optimizasyonları sayesinde kullanıcılarınız
40                anında içeriğe ulaşır.
41              </p>
42            </CardContent>
43          </Card>
44
45          <Card>
46            <CardHeader>
47              <CardTitle>🎨 Güzel Tasarım</CardTitle>
48              <CardDescription>
49                Tailwind ile pixel-perfect UI
50              </CardDescription>
51            </CardHeader>
52            <CardContent>
53              <p className="text-sm text-muted-foreground">
54                Utility-first yaklaşım ile hızlı ve tutarlı
55                tasarım sistemi.
56              </p>
57            </CardContent>
58          </Card>
59
60          <Card>
61            <CardHeader>
62              <CardTitle>♿ Erişilebilir</CardTitle>
63              <CardDescription>
64                WCAG 2.1 AA standardında
65              </CardDescription>
66            </CardHeader>
67            <CardContent>
68              <p className="text-sm text-muted-foreground">
69                shadcn/ui Radix primitives kullanır, tüm
70                accessibility standartları built-in.
71              </p>
72            </CardContent>
73          </Card>
74        </div>
75      </div>
76    </section>
77  );
78}

1// Tailwind ile (önerilen)
2function Card() {
3  return (
4    <div className="p-6 rounded-lg shadow-lg bg-white dark:bg-slate-800 hover:shadow-xl transition-shadow">
5      <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
6        Başlık
7      </h2>
8      <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
9        İçerik buraya gelecek...
10      </p>
11    </div>
12  );
13}
14
15// Avantajlar:
16// ✅ Hızlı geliştirme (class ismi düşünmeye gerek yok)
17// ✅ Tutarlı design system (spacing, colors standardize)
18// ✅ Responsive built-in (md:, lg: prefix'leri)
19// ✅ Dark mode built-in (dark: prefix)
20// ✅ Tree-shaking (kullanılmayan CSS bundle'a dahil edilmez)

1// Server Component (default - directive yok)
2// Sunucuda render edilir, JavaScript browser'a gönderilmez
3
4async function BlogPage() {
5  // API çağrısı doğrudan sunucuda
6  const posts = await fetch('https://api.example.com/posts', {
7    next: { revalidate: 60 } // 60 saniyede bir yenile (ISR)
8  }).then(res => res.json());
9
10  return (
11    <div className="container mx-auto py-12">
12      <h1 className="text-4xl font-bold mb-8">Blog</h1>
13
14      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
15        {posts.map((post) => (
16          <article key={post.id} className="border rounded-lg p-6">
17            <h2 className="text-2xl font-bold mb-2">{post.title}</h2>
18            <p className="text-muted-foreground mb-4">{post.excerpt}</p>
19            <time className="text-sm text-muted-foreground">
20              {new Date(post.date).toLocaleDateString('tr-TR')}
21            </time>
22          </article>
23        ))}
24      </div>
25    </div>
26  );
27}
28
29export default BlogPage;
30
31// Server Component Avantajları:
32// ✅ Bundle size küçük (JS kodu client'a gönderilmez)
33// ✅ SEO friendly (HTML olarak render edilir)
34// ✅ Database/API erişimi doğrudan (auth token güvenli)
35// ✅ Hızlı ilk yükleme (server rendering)
36// ✅ Otomatik code splitting