Next.js Proje Yapısı

Dijital ortam geliştikçe, sağlam ve ölçeklenebilir web uygulamaları oluşturmak çok önemli hale geldi. Popüler bir React çerçevesi olan Next.js, geliştiricilerin dinamik ve verimli uygulamalar oluşturmasına yardımcı olacak güçlü özellikler sunuyor. Ancak Next.js projeniz büyüdükçe, temiz ve düzenli bir kod tabanını korumak çok önemli hale gelir.

https://nextjs.org/docs/app/getting-started/project-structure

Büyük Ölçekli Uygulamalar için Optimal Next.js Proje Yapısı

Büyük Next.js projeleri için optimize edilmiş sağlam bir dizin yapısını keşfedelim:

my-nextjs-project/
│
├── app/                       # Temel uygulama mantığı ve yönlendirme
│   ├── (auth)/                # Kimlik doğrulama ile ilgili sayfalar için gruplandırma
│   │   ├── login/
│   │   │   ├── page.tsx
│   │   ├── register/
│   │       ├── page.tsx
│   ├── dashboard/
│   │   ├── page.tsx
│   │   ├── layout.tsx
│   ├── api/                   # API rotaları
│   │   ├── users/
│   │       ├── route.ts
│   ├── layout.tsx             # Ana layout dosyası
│   ├── page.tsx               # Anasayfa
│
├── components/                # Bileşenler
│   ├── ui/                    # UI bileşenleri
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   ├── forms/                 # Form bileşenleri
│   │   ├── LoginForm.tsx
│   ├── layouts/               # Layout bileşenleri
│       ├── Header.tsx
│       ├── Footer.tsx
│
├── lib/                       # Temel işlevler ve yardımcı programlar
│   ├── api.ts
│   ├── utils.ts
│
├── hooks/                     # Özel React kancaları
│   ├── useUser.ts
│   ├── useAuth.ts
│
├── types/                     # TypeScript türleri
│   ├── user.ts
│   ├── api.ts
│
├── styles/                    # Global ve bileşene özgü stiller
│   ├── globals.css
│
├── public/                    # Statik varlıklar
│   ├── images/
│       ├── logo.svg
│
├── next.config.js             # Next.js yapılandırması
├── package.json               # Proje bağımlılıkları ve komut dosyaları
├── tsconfig.json              # TypeScript yapılandırması

/app Dizini: Çekirdek Uygulama Mantığı

app dizini, uygulamanız için temel mantığı ve yönlendirmeyi barındırır:

• (auth)/ : Oturum açma ve kayıt gibi kimlik doğrulama ile ilgili sayfaları gruplayın.
• dashboard/ : Gösterge tablosu sayfasını ve düzen dosyalarını içerir.
• api/ : Uygulamanızda sunucusuz işlevleri etkinleştiren API rotaları içerir.
• layout.tsx : Birden fazla sayfada paylaşılan ana düzeni tanımlar.
• page.tsx : Ana giriş noktası, genellikle ana sayfa için kullanılır.

/components: Yeniden Kullanılabilir Yapı Taşları

Bileşenlerinizi modülerlik ve yeniden kullanım için düzenleyin:

• /ui/ : Düğmeler ve kartlar gibi genel UI bileşenleri.
• /forms/ : LoginForm gibi formları işlemek için özel bileşenler.
• /layouts/ : Üstbilgi ve altbilgi gibi düzen bileşenleri, sayfalar arasında tutarlı kullanıcı arayüzü sağlar.

/lib : Temel İşlevsellik

Lib dizini temel işlevleri ve yardımcı işlevleri içerir:

• /api.ts : API istemci kurulumu ve arka uç hizmetleriyle etkileşim için işlevler.
• /utils.ts : Uygulama boyunca kullanılan yardımcı fonksiyonlar.

/hooks : Mantığı Kapsülleme

Özel React kancalarınızı hooks dizininde saklayın:

• /useUser.ts : Kullanıcı ile ilgili durum ve mantığı yönetir.
• /useAuth.ts : Kimlik doğrulama işlemlerini yönetir.

/types : TypeScript Tanımları

TypeScript tür tanımlarınızı types dizininde düzenleyin:

• /user.ts : Kullanıcı ile ilgili türleri tanımlar.
• /api.ts : API yanıtları ve istekleri ile ilgili türleri içerir.

/styles: Global ve Bileşene Özel Stiller

Stillerinizi düzenli tutun:

• /globals.css : Tüm uygulama için global CSS stilleri.

/public: Statik Varlıklar

Resimler ve simgeler gibi statik varlıkları genel dizinde depolayın:

• /images/ : Proje logosu gibi görüntü varlıkları için dizin.

İyi yapılandırılmış bir Next.js projesi, ölçeklenebilir, bakımı yapılabilir ve verimli web uygulamaları oluşturmak için gereklidir.