Bu rehberde, Next.js ile projelerinizde nasıl etkili bir route ve klasör yapısı oluşturabileceğinizi detaylı bir şekilde inceleyeceğiz. Bu yapılarla projelerinizi daha düzenli ve yönetilebilir hale getirebilirsiniz.

Giriş

Next.js, React tabanlı bir framework olup, modern web uygulamaları geliştirmek için güçlü özellikler sunar. Proje geliştirme sürecinde düzenli ve tutarlı bir route ve klasör yapısı oluşturmak, kodun okunabilirliğini ve bakımını kolaylaştırır. Bu yazıda, Next.js ile projelerinizde nasıl etkili bir route ve klasör yapısı oluşturabileceğinizi adım adım ele alacağız.

Route ve Klasör Yapısının Önemi

Bir proje geliştirilirken route ve klasör yapısının doğru bir şekilde oluşturulması, projenin yönetimini ve genişletilebilirliğini önemli ölçüde etkiler. İyi bir yapı:

• Kodun okunabilirliğini artırır.
• Geliştirme sürecini hızlandırır.
• Hata bulmayı ve düzeltmeyi kolaylaştırır.
• Yeni özelliklerin eklenmesini kolaylaştırır.

Next.js'te Route ve Klasör Yapısının Temelleri

Next.js, dosya tabanlı routing sistemi kullanır. Bu sistem, pages klasöründeki dosyaların otomatik olarak route'lara dönüşmesini sağlar. Örneğin:

pages/
  index.js       // Ana sayfa ("/")
  about.js       // Hakkında sayfası ("/about")
  blog/
    index.js     // Blog anasayfası ("/blog")
    [id].js      // Dinamik blog yazıları ("/blog/:id")

Temel Klasör Yapısı

1. pages/: Route'ların oluşturulduğu temel klasördür.
2. public/: Statik dosyaların (resimler, videolar vb.) saklandığı klasördür.
3. styles/: CSS veya Sass dosyalarının yer aldığı klasördür.
4. components/: Tekrar kullanılabilir React bileşenlerinin bulunduğu klasördür.
5. lib/: Yardımcı fonksiyonlar ve harici kütüphaneler burada yer alır.
6. hooks/: Özel React hook'larının bulunduğu klasördür.
7. context/: Context API ile oluşturulan global durum yönetimi dosyaları burada yer alır.

Detaylı Route Yapısı

Statik Route'lar

Next.js'te statik route'lar, pages klasöründeki dosya ve klasör isimlerine göre belirlenir. Örneğin, about.js dosyası /about route'unu oluşturur.

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

Dinamik Route'lar

Dinamik route'lar, köşeli parantezler kullanılarak oluşturulur. Örneğin, bir blog yazısı sayfası için:

// pages/blog/[id].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Blog Post: {id}</h1>;
}

İç İçe Route'lar

İç içe route'lar, klasör yapıları kullanılarak oluşturulur. Örneğin, bir kullanıcı profil sayfası için:

// pages/users/[id].js
import { useRouter } from 'next/router';

export default function UserProfile() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>User Profile: {id}</h1>;
}

Gelişmiş Klasör Yapısı

Modüler Klasör Yapısı

Büyük projelerde, modüler bir klasör yapısı kullanmak, projenin yönetimini kolaylaştırır. Örneğin:

src/
  modules/
    auth/
      components/
      pages/
      hooks/
      context/
    blog/
      components/
      pages/
      hooks/
      context/

Bu yapıda, her modül kendi bileşenlerini, sayfalarını, hook'larını ve context dosyalarını içerir. Bu sayede, modüller arasındaki bağımlılıklar azaltılır ve kodun tekrar kullanılabilirliği artar.

Sonuç

Next.js ile etkili bir route ve klasör yapısı oluşturmak, projenizin başarısı için kritik öneme sahiptir. Bu rehberde, temel ve gelişmiş seviyede route ve klasör yapılarının nasıl oluşturulacağını detaylı bir şekilde ele aldık. Bu yapıları kullanarak, projelerinizi daha düzenli, okunabilir ve yönetilebilir hale getirebilirsiniz. Unutmayın, iyi bir yapı, geliştirme sürecini hızlandırır ve projelerinizin sürdürülebilirliğini artırır.