Next.js Projesi React ve TailwindCSS ile Nasıl Oluşturulur?

Modern web uygulamaları geliştirirken Next.js, React tabanlı güçlü bir framework olarak öne çıkar. Performans, SEO ve geliştirme deneyimi açısından oldukça avantajlıdır. Next.js ile birlikte TailwindCSS kullanarak hızlı ve modern arayüzler oluşturmak mümkündür.

1. Next.js Projesi Oluşturma

Öncelikle terminal veya komut satırını açarak aşağıdaki komutu çalıştırın:

npx create-next-app@latest

Bu komut çalıştırıldığında Next.js size bazı seçenekler soracaktır. Genellikle aşağıdaki ayarlar tercih edilir:

• TypeScript: isteğe bağlı
• ESLint: Yes (önerilir)
• Tailwind CSS: Yes
• src directory: isteğe bağlı
• App Router: Yes (modern Next.js yapısı)
• Import alias: isteğe bağlı

Seçimleri yaptıktan sonra proje klasörü oluşturulur ve gerekli bağımlılıklar otomatik olarak yüklenir.

2. Projeyi Çalıştırma Proje oluşturulduktan sonra klasöre girip geliştirme sunucusunu başlatabilirsiniz:

cd proje-adi
npm run dev

Daha sonra tarayıcıda şu adrese giderek uygulamanızı görebilirsiniz:

http://localhost:3000

3. TailwindCSS Kullanımı

Eğer proje oluştururken TailwindCSS seçtiyseniz, Tailwind otomatik olarak kurulmuş olur. Artık bileşenlerinizde Tailwind sınıflarını kullanabilirsiniz.

Örnek:

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-3xl font-bold text-gray-800">
        Next.js + TailwindCSS Projesi
      </h1>
    </div>
  );
}

4. Sonuç

Bu adımlarla React tabanlı Next.js projesi oluşturabilir ve TailwindCSS kullanarak hızlı bir şekilde modern kullanıcı arayüzleri geliştirmeye başlayabilirsiniz.