Next.js ile oluşturulmuş modern bir blog başlangıç şablonu arıyorsanız, NextJS Base Blog projesi mükemmel bir başlangıç noktasıdır. Next.js 15, React 19, TypeScript ve Tailwind CSS 4 ile oluşturulmuş, tam özellikli açık kaynaklı bir blog uygulamasıdır .
Proje, temiz bir mimari, modern bir kullanıcı arayüzü componentsve sahte bir API katmanı sunarak, arka uç kurmaya gerek kalmadan hızlı bir şekilde blog oluşturmak isteyen geliştiriciler için idealdir.
GitHub Deposu: https://github.com/bfotool/nextjs-base-blog
Bu proje özellikle şu kişiler için faydalıdır:
Geliştiriciler Next.js uygulaması öğreniyor.Router
Hızlı bir şekilde blog veya içerik web sitesi oluşturmak
Next.js için temel bir proje oluşturma
Gerçek bir arka uç API'sine bağlanmadan önce kullanıcı arayüzü özelliklerini geliştirmek.
Proje Genel Bakışı
NextJS Base Blog, modern içerik web sitelerinde bulunan birçok yaygın özelliğe sahip, kullanıma hazır bir blog şablonu olarak tasarlanmıştır .
Proje şunları içermektedir:
Öne çıkan gönderilerin yer aldığı bir ana sayfa
blog yazısı sayfaları
kategori filtreleme
tam metin arama
sayfalama
içindekiler
İlgili gönderiler
koyu/açık tema
Projenin en ilgi çekici kısımlarından biri, Axios interceptor'larını kullanarak bir REST API'yi simüle eden Sahte API Katmanı'dır. Bu, geliştiricilerin bir arka uç sunucusuna ihtiyaç duymadan uygulamayı oluşturmasına ve test etmesine olanak tanır .
Başlıca Özellikler
Ana Sayfa
Ana sayfada çeşitli önemli bölümler yer almaktadır:
öne çıkan kahraman gönderisi
kategori filtreleri
blog gönderilerinin bir tablosu
sayfalı gezinme
Tasarım tamamen duyarlıdır ve hem masaüstü hem de mobil cihazlar için optimize edilmiştir.
Blog Yazısı Sayfası
Her makaleye dinamik bir rota üzerinden erişilebilir:
/blog/[slug]
Blog yazısı sayfası çeşitli kullanışlı özellikler içeriyor:
makalenin tamamı
otomatik içindekiler tablosu
tahmini okuma süresi
sosyal paylaşım düğmeleri
İlgili gönderi önerileri
Bu özellikler, modern blog platformlarına benzer profesyonel bir okuma deneyimi oluşturmaya yardımcı olur.
Kategori Sayfaları
Kullanıcılar gönderilere kategoriye göre göz atabilirler.
Örnek rota:
/blog/category/[slug]
Bu özellik, okuyucuların belirli konular içindeki içerikleri keşfetmelerine olanak tanır.
Arama İşlevi
Proje, dahili bir arama sayfası içermektedir:
/search
Arama şu özellikleri destekler:
gerçek zamanlı sonuçlar
gecikme giderilmiş giriş
Başlıklar, alıntılar ve etiketler arasında arama yapma
Bu, kullanılabilirliği artırır ve kullanıcıların ilgili içeriği hızlı bir şekilde bulmasına yardımcı olur.
Hakkımızda ve İletişim Sayfaları
Proje ayrıca, profesyonel bloglarda sıkça rastlanan ek sayfaları da içermektedir.
Hakkımızda Sayfası
Hakkımızda sayfası şunları tanıtıyor:
takım
proje öyküsü
temel değerler
İletişim Sayfası
İletişim sayfasında, aşağıdaki özelliklere sahip, tamamen doğrulanmış bir form bulunmaktadır:
form doğrulama
bildirimler
başarı ve hata geri bildirimi
Karanlık Mod Desteği
Blog, karanlık mod ve aydınlık modu desteklemektedir .
Özellikler şunları içerir:
otomatik sistem tema tespiti
manuel geçiş
localStorage kullanarak tema kalıcılığı
Sahte API Katmanı(Arka Uç Olmadan Geliştirme)
Bu projenin en ilgi çekici kısımlarından biri de sahte API sistemi .
Uygulama, gerçek bir sunucuya çağrı yapmak yerine, REST API yanıtlarını simüle etmek için Axios interceptor'larını kullanır.
Sahte API Nasıl Çalışır?
Axios örneği şu konumda oluşturulur:
src/services/api-client.ts
Ortam değişkeni etkinleştirildiğinde:
NEXT_PUBLIC_USE_MOCK_API=true
İstekler ağa ulaşmadan önce engellenir.
Sahte işleyiciler, gerçekçi gecikmelerle(200-600 ms) sahte yanıtlar döndürür.
Yanıtlar gerçek API yanıtları gibi davranır.
Sahte veriler şu konumda saklanır:
src/mocks/
İçermek:
örnek gönderiler
yazarlar
kategoriler
Kullanılabilir API Uç Noktaları
Örnek API, çeşitli uç noktaları destekler:
| Yöntem | Uç nokta | Tanım |
|---|---|---|
| ELDE ETMEK | /yazılar | Sayfalandırılmış blog yazıları |
| ELDE ETMEK | /yazılar/öne çıkanlar | Öne çıkan gönderiler |
| ELDE ETMEK | /posts/:slug | Tek blog yazısı |
| ELDE ETMEK | /kategoriler | Kategori listesi |
| ELDE ETMEK | /yazarlar | Yazar listesi |
| POSTALAMAK | /temas etmek | İletişim formunu gönder |
Teknoloji Yığını
Proje modern bir ön uç geliştirme yığını kullanıyor.
| Katman | Teknoloji |
|---|---|
| Çerçeve | Next.js 15 |
| Kullanıcı Arayüzü Kütüphanesi | React 19 |
| Dil | TypeScript |
| Stil | Tailwind CSS 4 |
| HTTP İstemcisi | Axios |
| Simgeler | Lucide React |
| Tüylenme | ESLint |
| Biçimlendirme | Daha güzel |
Bu paket şunları sağlar:
güçlü tip güvenlik
sürdürülebilir mimari
modern geliştirici deneyimi
Proje Yapısı
Proje yapısı, temiz ve ölçeklenebilir bir mimariye dayanmaktadır.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
UygulamaRouter
Bu appdizin, uygulamanın tüm rotalarını içerir.
Örnekler:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Bu, Next.js'in daha yeni sürümlerinde tanıtılan Next.js Uygulama Routermimarisine uygundur.
Bileşenler
Kullanıcı arayüzleri componentsmantıksal gruplar halinde düzenlenmiştir:
components/layout
components/common
components/blog
Bu yapı, kullanıcı arayüzü kodunu düzenli tutar ve bakımını kolaylaştırır.
Hizmetler Katmanı
Klasör services, API ile ilgili mantığı içerir:
API istemci yapılandırması
posta servisi
kategori hizmeti
iletişim formu hizmeti
Bu katman, veri alma mantığını kullanıcı arayüzündencomponents ayırarak ölçeklenebilirliği artırır.
Kurulum Kılavuzu
Gereksinimler
Başlamadan önce şunlara sahip olduğunuzdan emin olun:
Node.js 18 veya üzeri
npm, yarn veya pnpm
Depoyu Klonla
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Bağımlılıkları Yükle
npm install
Ortam Değişkenlerini Yapılandır
cp .env.example .env
Geliştirme Sunucusunu Başlatın
npm run dev
Tarayıcınızı açın ve şu adresi ziyaret edin:
http://localhost:3000
Mevcut Komut Dosyaları
| Emretmek | Tanım |
|---|---|
| npm run dev | Geliştirme sunucusunu başlat |
| npm run build | Üretim sürümü oluştur |
| npm run start | Üretim sunucusunu başlatın |
| npm run lint | ESLint'i çalıştırın |
| npm çalıştırma formatı | Prettier ile kodu biçimlendirin. |
| npm run type-check | TypeScript kontrollerini çalıştırın. |
Gerçek bir API'ye geçiş
Projeyi gerçek bir arka uç API'sine bağlamak istiyorsanız, şu adımları izleyin.
Adım 1: Sahte API'yi Devre Dışı Bırakın
Dosyayı düzenleyin .env:
NEXT_PUBLIC_USE_MOCK_API=false
Adım 2: API Temel URL'sini Ayarlayın
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
3. Adım: Veri Türlerini Eşleştirme
Arka uç API'nizin aşağıdaki TypeScript tanımlarıyla eşleşen veriler döndürdüğünden emin olun:
src/types/index.ts
Ek kod değişikliğine gerek yoktur.
İçeriği Özelleştirme
Örnek içerik şu alanlarda düzenlenebilir:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Bu, geliştiricilerin demo içeriğini hızlı bir şekilde özelleştirmesine olanak tanır.
Tema ve Kullanıcı Arayüzünü Özelleştirme
Küresel stil anlayışına şu alanlarda rastlanabilir:
src/app/globals.css
Projede aşağıdaki yazı tipleri kullanılmaktadır:
DM Sans
JetBrains Mono
Tasarım gereksinimlerinize bağlı olarak stilleri değiştirebilir veya yazı tiplerini değiştirebilirsiniz.
Çözüm
NextJS Base Blog, Next.js ile blog oluşturmak için güçlü ve modern bir başlangıç şablonudur.
Projenin başlıca avantajları şunlardır:
modern teknoloji yığını
temiz mimari
geliştirme için sahte API
Gerçek arka uç API'leriyle kolay entegrasyon
duyarlı kullanıcı arayüzü ve modern özellikler
Next.js ile bir blog, geliştirici web sitesi veya içerik platformu oluşturuyorsanız, bu depo size önemli ölçüde geliştirme süresi kazandırabilir.
Kaynak koduna buradan ulaşabilirsiniz: https://github.com/bfotool/nextjs-base-blog