StarterKit Next.js

Next.js projeleri için hızlı başlangıç sağlayan, düzenli yapı ve yeniden kullanılabilir bileşenler içeren bir başlangıç kiti.

🚀 Canlı Demoyu Görüntüle

Kullanılan kütüphaneler:

UI kütüphanesi
- npx shadcn@latest init
- npx shadcn@latest add button

Bir çok hazır bileşen sunarak geliştirme ortamını kolaylaştırır.

Projede kullanılan bileşenler: button checkbox dialog input input-otp label radio-group field sheet slider textarea select calendar popover command accordion carousel resizable table dropdown-menu

Tavsiye edilen kütüphaneler
- npm i zod : Model şemaları ve veri yönetimi
- npm i zustand : State yönetimi
- npm add react-hot-toast : Toast bildirimleri
- npm i next-themes : Tema
- npm i react-icons : Icon kütüphanesi

Büyük veri kütüphaneleri
- npm i @tanstack/react-query @tanstack/react-query-devtools : Veri yönetimi
- npm i @tanstack/react-table : Tablo yönetimi

Diğer kütüphaneler
- npm i @reduxjs/toolkit react-redux : State yönetimi
- npm i date-fns : Tarih işlemleri
- npm i @react-input/mask : Metin kalıpları oluşturur
- npm i react-hook-form @hookform/resolvers : form kütüphanesi
- npm i recharts : Grafik işlemleri
- npm i html-react-parser : HTML parse
- npm i lottie-react : Lottie animasyonları
- npm i motion : framer-motion animasyonları
- npm i react-easy-crop : Resim kırpma
- npm i @dnd-kit/core @dnd-kit/sortable @dnd-kit/modifiers : Sıralı liste
- npm i idb : indexedDB kütüphanesi
- npm i next-intl : Çoklu dil desteği

Mimari

Proje, kodun okunabilirliğini ve tekrar kullanılabilirliğini artırmak adına belirli sorumluluk alanlarına bölünmüştür:

• app: Routing, layout ve metadata gibi Next.js’e özgü temel uygulama yapıları bu dizinde yer alır. Uygulamanın giriş noktasıdır ve sayfa akışını yönetir.

• features: Uygulamadaki işlevsel özellikler (business logic) ve bu özelliklere ait dosyalar burada yer alır.

• components: Projenin genel UI bileşenlerini içerir.

  • custom: Projeden bağımsız, farklı projelerde de kullanılabilecek genel UI bileşenleri içerir. Tamamen yeniden kullanılabilir ve izole tasarlanmıştır.

  • common: Feature özelinde olmayan ama projeye özel olan UI bileşenlerini içerir.

• lib: Harici kütüphanelerin konfigürasyonları ve entegrasyon ayarları burada tutulur.

• assets: Public olmayan statik dosyalar (örneğin import edilen görseller, json dosyaları vb.) bu klasörde yer alır.

• shared: Proje genelinde ortak kullanılan modüller, yardımcı fonksiyonlar ve yeniden kullanılabilir yapılar burada bulunur.

  • utils: Projeye özel yardımcı fonksiyonlar ve araçlar bu dizinde bulunur. Genellikle küçük, saf ve tekrar kullanılabilir yardımcılar içerir.

  • styles: Global veya modüler CSS/SCSS dosyaları bu dizinde bulunur.

  • types: Proje genelinde kullanılan global TypeScript tip tanımlamaları burada yer alır.

  • models: Feature özelinde olmayan modeller burada yer alır. (Örn: BaseModel, ResponseModel vb.)

• core: Projenin temel altyapısını oluşturan, kullanıma hazır modüler araçlar ve sistemler burada yer alır. (Örn: API yapılandırması vb.)