roadside-assistance-nextjs-template — Next.js Starter Template

SHA-256: fe142d3f010782e0dc36be8b77505d7a8f3dc0edb832d1f7e91c64e420bfda2a

2026-10-14T15:16:54.813Z

# 🚀 Next.js Business Website Template

**Languages / Diller:** 
- [English (README.en.md)](README.en.md) 🇬🇧
- [Türkçe (README.tr.md)](README.tr.md) 🇹🇷

---

## 📸 Screenshot'lar

### Ana Sayfa (Turkish)
![Screenshot 1](./public/images/ss1.png)

### Hizmet Sayfası (English)
![Screenshot 2](./public/images/ss2.png)

---

Merhaba! Bu, çok dilli işletme web siteleri için hazırladığım temiz ve modern bir Next.js şablonu. SEO dostu, hızlı ve özelleştirmesi kolay.

Hello! This is a clean and modern Next.js template I prepared for multilingual business websites. SEO-friendly, fast, and easy to customize.

Yol yardımı, çekici hizmeti, acil servis gibi 7/24 hizmet veren işletmeler için biçilmiş kaftan. Ama istersen herhangi bir işletme sitesi için de rahatlıkla kullanabilirsin.

Perfect for 24/7 service businesses like roadside assistance, towing services, emergency services. But you can easily use it for any business website.

## ✨ Özellikler

- 🌍 **Çoklu Dil Desteği** - Türkçe ve İngilizce hazır, yeni dil eklemek çok kolay
- 📱 **Tam Responsive** - Mobil, tablet, masaüstü her yerde güzel görünüyor
- 🎨 **Modüler Bileşen Mimarisi** - Temiz, bakımı kolay kod yapısı
- 🔍 **SEO Optimizasyonu** - Meta taglar, JSON-LD, sitemap hazır
- 💬 **WhatsApp Entegrasyonu** - Tek tıkla müşteri iletişimi
- 📊 **Analytics Desteği** - Google Analytics ve Tag Manager hazır
- ⚡ **Tailwind CSS v4** - Modern, hızlı stil sistemi

## 🛠️ Teknolojiler

| Teknoloji | Versiyon | Ne İçin |
|-----------|----------|---------|
| Next.js | 16 | React framework |
| TypeScript | 5 | Tip güvenliği |
| Tailwind CSS | 4 | Stil sistemi |
| next-intl | 4 | Çoklu dil |

---

## 🏁 Hızlı Başlangıç

```bash
# Repoyu klonla
git clone https://github.com/yourusername/your-repo.git
cd your-repo

# Bağımlılıkları yükle
npm install

# Ortam değişkenlerini ayarla
cp .env.example .env.local

# Geliştirme sunucusunu başlat
npm run dev
```

Tarayıcıda `http://localhost:3000` adresine git ve sitenin çalıştığını gör! 🎉

---

## 📁 Proje Yapısı

```
app/
├── components/
│   ├── ui/           # Atomik bileşenler (Button, Badge, Divider)
│   ├── common/       # Tekrar kullanılan bileşenler (SectionHeader, FeatureCard)
│   ├── layout/       # Header, Footer, Navigation
│   ├── sections/     # Sayfa bölümleri (CTABanner)
│   └── widgets/      # Yardımcı bileşenler (WhatsAppButton, LanguageSwitcher)
├── [locale]/         # Dil bazlı sayfalar
│   ├── page.tsx      # Ana sayfa
│   └── [regionSlug]/ # Bölge sayfaları
config/
├── site.ts           # Site ayarları
├── regions.ts        # Hizmet bölgeleri
└── whatsapp.ts       # WhatsApp ayarları
messages/
├── tr.json           # Türkçe çeviriler
└── en.json           # İngilizce çeviriler
```

---

## ⚙️ Yapılandırma

### Site Ayarları (`config/site.ts`)

İşletme adı, telefon, e-posta, renkler ve SEO ayarlarını buradan değiştir.

### Bölgeler (`config/regions.ts`)

Hizmet verdiğin bölgeleri tanımla. Her bölge için slug, isim, açıklama ve alt bölgeler ekleyebilirsin.

### Ortam Değişkenleri (`.env.local`)

```env
NEXT_PUBLIC_SITE_URL=https://sitenin-adresi.com
NEXT_PUBLIC_WHATSAPP_PHONE=905551234567

# Opsiyonel
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX
NEXT_PUBLIC_GOOGLE_VERIFICATION=your-verification-code
```

---

## 🌍 Yeni Dil Ekleme

1. `messages/` klasöründe yeni bir dosya oluştur (örn: `de.json`)
2. `en.json` dosyasını kopyala ve çevirileri yap
3. `i18n/routing.ts` dosyasında `locales` dizisine yeni dili ekle
4. `npm run validate:i18n` ile kontrol et

---

## 🧩 Bileşen Kullanımı

### Button

```tsx
import { Button } from "@/components/ui";

<Button variant="primary" size="lg" icon={<Phone />}>
  Hemen Ara
</Button>
```

Varyantlar: `primary`, `secondary`, `outline`, `ghost`, `dark`

### SectionHeader

```tsx
import { SectionHeader } from "@/components/common";

<SectionHeader
  title="Hizmetlerimiz"
  subtitle="7/24 profesyonel destek"
/>
```

### CTAButtonGroup

```tsx
import { CTAButtonGroup } from "@/components/common";

<CTAButtonGroup
  phoneText="Hemen Ara"
  whatsappText="WhatsApp"
/>
```

---

## 📋 Komutlar

| Komut | Ne Yapar |
|-------|----------|
| `npm run dev` | Geliştirme sunucusunu başlatır |
| `npm run build` | Prodüksiyon build'i alır |
| `npm run start` | Prodüksiyon sunucusunu başlatır |
| `npm run lint` | Kod kalitesini kontrol eder |
| `npm run validate` | Lint + i18n kontrolü yapar |
| `npm run validate:i18n` | Çeviri dosyalarını kontrol eder |

---

## 🚀 Yayınlama

### Vercel (Önerilen)

1. GitHub'a push'la
2. [Vercel](https://vercel.com)'e bağlan
3. Ortam değişkenlerini ekle
4. Deploy! 🎉

### Diğer Platformlar

Next.js'in desteklediği herhangi bir platformda çalışır: Netlify, Railway, DigitalOcean, AWS Amplify...

---

## 🤝 Katkıda Bulunma

1. Fork'la
2. Branch oluştur (`git checkout -b feature/harika-ozellik`)
3. Değişikliklerini commit'le
4. `npm run validate` ile kontrol et
5. Pull request aç

Herhangi bir sorun veya önerin varsa issue açmaktan çekinme!

---

## 📄 Lisans

MIT Lisansı - istediğin gibi kullan, değiştir, dağıt. Sadece bir yıldız bırakırsan sevinirim ⭐

---

## 💡 İpuçları

- Görselleri `public/images/` klasörüne koy
- Renkleri `app/globals.css` içindeki `@theme` bloğundan değiştir
- Yeni bileşen eklerken `components/ui/` veya `components/common/` kullan
- SEO için `config/site.ts` dosyasını doldur

---

Sorular için issue aç veya PR gönder. İyi kodlamalar! 🚀